使用mpvue开发微信小程序基础知识

1. mpvue概述：mpvue是一个使用Vue.js开发小程序的前端框架。 该框架基于Vue.js的核心。 mpvue修改了Vue.js运行时和编译器实现，以在小程序环境中运行，将完整的Vue.js开发体验引入到小程序开发中。 mp是小程序的缩写。 2. mpvue快速入门

①通过脚手架引入mpvue模板

由于vue 3.0中不再支持vue init命令，所以必须单独安装@vue/cli-init。 安装后，您可以： 安装mpvue模板步骤 npm install -g @vue/cli-initvue init mpvue/mpvue-quickstart my-projectcd my-projectnpm installnpm run devnpm run 根目录下生成dev命令该项目将完成。 dist 目录。 将您的 Vue 项目转换为微信小程序项目。

②搭建小程序开发环境。

微信提供了专门用于开发小程序的微信开发者工具，微信开发开发者工具需要下载安装。 您还需要申请小程序ID，即AppID。 这是因为使用微信开发者工具创建小程序项目需要输入适用的AppID。 在微信公众平台上。

③调试项目

通过微信开发者工具启动微信小程序项目。 微信开发者工具不支持.vue文件，所以选择的项目目录是mpvue项目的根目录，而不是生成的dist目录。 因此，您必须使用自己的开发工具来调试您的源代码。 3. mpvue使用详情

① mpvue的src目录与vue的src目录相同。 还有一个 App.vue 根组件。 App.vue根组件只是一个结构，没有具体内容。 根组件有一个对应的main.js 文件。 App.vue 用于渲染根组件。 即我们引入App.vue并创建一个Vue实例作为Vue构造函数。，一旦挂载，还有一个app.json文件。 这是页面的全局配置文件，用于注册页面、注册tabBar、设置全局窗口样式。

// vue

默认导出 { }page { width: 100%; height: 100%; ;}

// main.js

从 'vue'导入 Vue 从 './App'导入 App Vue.config.productTip = falseApp.mpType = 'app'const app = new Vue (App)app.$mount()

// app.json

{ "pages": [ "pages/index/main" ], "tabBar": { .. }, "window }}

② 用mpvue定义的页面放在src目录下的pages目录中。 一页对应一个文件夹。 每个页面文件夹都需要一个 .vue 文件和一个 main.js 文件。 Main.js主要引入一个当前页面对应的.vue，并创建并挂载一个Vue实例作为Vue构造函数的参数。 main.js 无法重命名。 只有 main 是可能的。 .

// main.js

import Vue from 'vue'import App from './index'//添加这个来处理异常 Vue.config.errorHandler = function (err) { if (console && console.error) { console.error(err) } }const app = new Vue(App)app.$mount() 在mpvue中，页面中.vue文件的名称是任意的，但是，.js和 .json 文件固定到 main 。 通常，.vue 文件也会永久使用index.vue。 每个页面通常包含一个index.vue、main.js 和main.json。 不同的页面通过外部文件夹来区分。 原生小程序也使用外部文件。 文件夹用于区分不同的页面，文件夹内的四个页面可以与外部文件夹的名称相同或不同，但四个文件必须相同。

③ 每次添加新页面都需要重新启动项目。 这意味着 npm run dev 将重新运行。

4.微信小程序基础知识及常用API

①点击按钮。 提示用户进行身份验证并获取用户信息。

微信小程序提供按钮的微信开发功能。 这会向标签添加一个 open-type 属性，以指示将为按钮打开的功能类型（例如 getUserInfo）。 这意味着单击按钮并获取用户信息。 getus 监听所需的函数erinfo事件、mpvue基于小程序进行封装。 用户信息必须通过e.mp.detail.userInfo获取。 点击开始导出默认值 { getUserInfo(e) { console .log(e.mp.detail.userInfo); // 获取用户信息 }}

② wx全局对象与在浏览器环境中运行的网页完全相同。 浏览器环境提供了一个全局的window对象，同样的applet在applet环境中运行。 applet环境还提供全局wx对象。 wx提供了很多API，例如网络访问（wx.request({})）。 、页面跳转（wx.redirectTo({})）、显示加载（wx.showLoading({})）、显示提示（wx.showToast({})）等

③ 发起网络请求 微信小程序内部 小程序环境内部 不能像浏览器环境那样直接提供ajax，但提供了一个全局的网络请求API，即 wx.request() 。 在小程序环境下，只能使用wx.request()来发起网络请求，不能使用axios等常用方法。 request库和wx.request()不存在跨域问题。 使用wx.request()时，必须传递一个请求参数设置对象。 request()方法返回的结果不是Promise对象，因此请求结果不能通过.then()处理，而是在请求配置对象内处理。 添加成功、失败、完成等回调函数。 可以使用回调函数检索请求的结果，如下所示：

wx.request({ url: "http://www.baidu.com", // 请求URL地址为必填 data: { user: "even li" }, method: "get", // 请求方法头: { "content-type": "application/json" // 默认值 }, success(res) { console.log(res. data); // 获取响应数据 }, failed(error) { console.log(error); // 请求失败 }complete(res) { // 接口调用完成，请求成功或失败 console.log (res) ; // 如果请求成功，res为响应结果 res. 如果请求失败，res返回错误信息error }})；返回状态码404也视为请求成功。 一般只有在网络出现异常的情况下才会考虑请求。 失败。

④ 跳转到tabBar以外的页面 如果想跳转到tabBar以外的页面，可以使用全局API，即wx.redirectTo({})。 该函数关闭当前页面并跳转到下一页。 将应用程序应用到其中的页面。 但是，不允许跳转到标签栏页面。 您需要传递一个配置对象。 主要属性是url，它是要重定向到的页面的路径。 可以接受参数的回调函数有以下三种：成功、失败和完成。 处理跳转结果如下：

wx.redirectTo({ url: "../question/main", // ../页面中是pages/ success() { }, failed( ) { },complete() { }} ) ;

⑤ 跳转到tabBar页面。 微信小程序需要一个tabBar页面。你需要以特殊的方式跳跃。 也就是说，wx.switchTab({})会跳转到tabBar页面，并关闭所有其他非tabBar页面。 用法：wx.redirectTo({});

wx.switchTab({ url: "../learn/main", // 页面内部，../ ispages/success( ) { }, failed( ) { },complete() { }}) ;

⑥ 页面配置文件 小程序的页面配置文件分为全局配置文件app.json和页面配置文件main.json。 全局配置文件有很多可配置项，配置文件的全部内容必须用大括号括起来。 这是一个如下所示的 JSON 对象：

pages 属性是一个数组，用于定义小程序使用的页面。 数组中的每一项对应一个页面，或者路径+文件名信息。 不需要写后缀。 mpvue 中的所有页面始终使用 main。 这意味着每个页面的底部都有一个main.js，所以配置页面时通常是“pages/pagename/main”，第一个页面数组项代表小程序。 初始页面是小程序运行时显示的页面。 window属性用于配置小程序的窗口样式。 它的属性值是对象，主要有backgroundColor（窗口的背景颜色，即页面下拉后泄漏的背景窗口颜色）、backgroundTextStyle（设置下拉的背景字体、加载样式）将会出现。 image），目前只支持深色和浅色），navigationBarBackgroundColor（导航栏背景颜色），navigationBarTextStyle（导航栏标题颜色，目前只支持白色和黑色），navigationBarTitleText（导航栏标题文字内容），navigationStyle（值为自定义导航栏） ) ) 微信小程序设置颜色时，仅支持十六进制数字。不支持颜色、RGB 格式和颜色英文。 tarBar属性用于配置窗口底部的tabBar。 属性值是一个对象，主要包括color（设置非活动状态下tab的字体颜色）、selectedColor（设置活动状态下tab的字体颜色）、borderStyle（设置tabBar的上边框） 。 目前只支持白色和黑色）、backgroundColor（设置tab的背景颜色）、list（用于配置tab项，最多可配置5项）、list属性值主要是一个包含文本的数组（要在选项卡内容中显示）、iconPath（选项卡非活动状态时显示的图标的路径）、selectedPath（选项卡活动时显示的图标的路径）、pagePath（选项卡处于活动状态时显示的图标的路径）单击选项卡时跳转到的页面及其属性值在PagePath中设置）配置页面设置比在全局主配置文件中容易得多。 只能在页面配置文件中配置窗口样式属性。 即只能在全局配置文件中配置窗口属性的内容。 页面配置文件中的配置会覆盖全局配置文件中窗口中的相同配置，以确定当前页面的窗口性能。 无需使用 window 属性。 只需将窗口设置直接放在花括号内即可。

⑦小程序页面及Vue生命周期

小程序有onLoad（页面加载完毕）、onShow（页面显示但未完成渲染）、onReady（页面渲染完成）、提供onHide（页面）。 hidden) )、onUnload(页面卸载)，mpvue将小程序提供的页面生命周期与vue生命周期结合起来。 这意味着当你使用mpvue开发小程序时，你可以同时使用小程序生命周期和vue生命周期。 顺序为： beforeCreate --> 创建 --> onLoad --> onShow --> onReady --> beforeMount [k3 ][k3 ] ]> 米被算计了。 也就是说，首先实例化Vue，然后页面开始加载、显示和渲染。 页面完成渲染后，Vue 实例将开始安装。

⑧ 移动到特定页面。 所谓导航到特定页面，就是跳转到特定页面，但保持当前页面。 您跳转到的页面在导航栏左侧有一个后退按钮。 单击返回。 跳转到上一页，但该跳转目标页面不能是标签栏中的页面。 wx.navigateTo({})

wx.navigateTo({ url: "../myLesson/main" //导航到我的课程页面，目标页面有自己的后退按钮，点击后返回课程page 上一页});

⑨ 动态设置页面导航栏标题。 当您单击列表中的特定项目时，相应的页面通常会动态显示当前单击项目的特定导航栏标题。 微信小程序提供了wx.setNavigationBarTitle({})来动态设置导航栏标题。 还有三个回调函数：success、fail、complete。 例如，

wx.setNavigationBarTitle({ title: "动态标题内容", success() { }, failed() { },complete() { }});

⑩ 微信小程序本地缓存数据为setStorage({})方法将数据保存到本地缓存中指定的key中。 数据始终可用，除非您主动删除它或系统因存储空间原因而将其删除。 单个密钥可存储的最大数据长度为1MB，所有数据存储上限为10MB。 示例：

wx.setStorage({ key:"key", data:"value"});

同理，微信小程序通过 getStorage({}) 方法获取对应存储中的存储，我们也提供了 重要数据，同样成功三个回调函数：s、fail、complete（例如： // 检索对应键的数据失败 },complete() { // 检索对应键的数据已完成，无论成功还是失败 getStorage()而 setStorage() 方法本身是异步的，但是微信小程序有相应的同步方法，即 getStorageSync("key") 和 setStorageSync("key", "value") 提供的。

⑪ 轮播图组件微信小程序提供了一个只能放置滑动条的轮播图组件。 -项目组件。 Swiper 具有常用的属性，例如：

indicator-dots：是否显示面板指示点。 autoplay：是否自动切换。 间隔：设置自动切换的时间间隔。 Duration：幻灯片动画的持续时间；Circular：是否循环播放。 指示器 - 活动 - 颜色：设置当前所选指示器点的颜色。 /block>当然，这个组件不仅可以实现图片轮播，其他组件也可以。 我们不会向轮播添加指示符 - 点，例如列表内容轮播（导航和内容协调）。 、自动播放、间隔、时长、周期等属性，用手滑动它。 swiper 组件还有一个 current 属性。 属性值为滑块的索引值，用于显示对应的滑动项。 这使得导航和内容可以协同工作。 这意味着点击导航会自动切换到相应的内容。 swiper 组件还提供更改事件。 手动滑动幻灯片项会触发更改事件。 通过检索事件对象中对应滑块的索引，可以更新导航位置，实现滑动内容，并自动高亮导航位置。 。

⑫ 可滚动区域组件 微信提供了可滚动区域组件，用于设置该区域的内容可滚动。 通常用于实现可滚动的导航选项卡栏。 其共同属性有：

scroll-x：是否允许水平滚动。 scroll-y：是否允许垂直滚动。 scroll-into-view：属性值为对应滚动项的ID。 这意味着它会自动滚动到相应 id 元素的位置。 scroll-with-animation：设置滚动条位置时使用动画过渡。 要实现点击某个滚动项后自动滚动到对应的滚动项位置，给每个滚动项添加一个ID，然后将scroll-into-view的值设置为滚动项的ID即可动态更改。到 。 对应的滚动项。 {{item.name}}

推荐教程：“微信小程序”

下载微信App

微信是一款移动通讯软件，支持通过手机网络发送语音消息、视频、照片和文字。 微信允许您单独或群组聊天。 您还可以根据您的手机网络进行聊天。 根据您的地理位置查找附近的人，提供全新的移动通信体验。 保存您的下载体验。

这几篇文章你可能也喜欢：

• 如何使用vue完成微信官方账号页面（vue开发微信官方账号页面）
• 宝塔部署vue项目时，访问首页正常，其他页面无法访问404的解决方案。
• 如何用vue完成微信微信官方账号网页(vue写微信官方账号)

本文由主机参考刊发，转载请注明：使用mpvue开发微信小程序基础知识 https://zhujicankao.com/123729.html