mpvue 是一個使用 Vue.js 開發小程式的前端框架。框架基於 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其可以運行在小程式環境中，從而為小程式開發引入了整套 Vue.js 開發體驗。 mp 即 mini program 的縮寫。
mpvue快速入門
① 透過鷹架引入mpvue模板
vue 3.0已經不支援vue init指令 了，所以需要單獨安裝@vue/cli-init ，安裝好之後，就可以按以下操作步驟引入mpvue模板了
npm install -g @vue/cli-init
vue init mpvue/mpvue-quickstart my-project
cd my-project
npm install
npm run dev 登入後複製
npm run dev指令會在專案根目錄下產生一個dist目錄，其就是將vue的專案轉換為微信小程式專案
② 搭建小程式的開發環境
#微信提供了一個專門微信開發者工具 用於開發小程序，需要下載安裝微信開發者工具，同時還需要申請一個小程序ID，即AppID ，因為透過微信開發者工具創建小程序項目需填入AppID ，可以在微信公眾平台申請得到。
③ 調試項目
透過微信開發者工具啟動微信小程式項目，選擇的項目目錄是mpvue項目的根目錄，而不是產生的dist目錄 ，由於微信開發者工具不支援.vue檔案的檢視 ，所以我們還是要用自己的開發工具來偵錯原始碼。
mpvue的一些使用細節
① mpvue的src目錄下和vue一樣，也有一個App.vue根元件 ，App.vue根元件只是一個結構 ，無具體內容 ，根元件有對應的main.js 檔案用於渲染App.vue根元件，即引入App.vue並作為Vue建構函數建立Vue實例，然後mount ，還有一個app.json 文件，即頁面全域設定檔 ，用於頁面的註冊 、tabBar的註冊 、全域window樣式設定 ，如:
// App.vue
<script>
export default {
}
</script>
<style>
page {
width: 100%;
height: 100%;
background-color: #f7f7f7;
}
</style> 登入後複製
// main.js
#
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue(App)
app.$mount() 登入後複製
// app.json
{
"pages": [
"pages/index/main"
],
"tabBar": {
......
},
"window": {
"backgroundColor":"#00BFFF",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "测试",
"navigationBarTextStyle": "black"
}
} 登入後複製
② mpvue中定義的頁面都放在src目錄下的pages目錄 裡面，一個頁面對應一個資料夾 ，每個頁面資料夾內需要有一個.vue檔案 和main.js檔案 ，main.js主要做的就是，引入目前頁面對應的.vue ，然後作為Vue建構函數的參數建立Vue實例並mount ，且main.js的名稱不能改變 ，只能是main .
/ / main.js
import Vue from 'vue'
import App from './index'
// add this to handle exception
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.
#微信小程式基礎與常用API
① 點擊按鈕提示使用者是否授權並獲取使用者資訊
微信小程式給我們的按鈕微信開發的能力 ，其透過為標籤添加一個open-type 屬性，表示要開放給按鈕的能力類型 ，例如getUserInfo ，即點擊按鈕獲取使用者資訊的能力，我們需要在上透過監聽getuserinfo 事件，mpvue在小程式的基礎上進行了封裝，需要透過e.mp.detail. userInfo 才能取得使用者訊息，
<button open-type="getUserInfo" @getuserinfo="getUserInfo">点击开始</button>
<script>
export default {
getUserInfo(e) {
console.log(e.mp.detail.userInfo); // 获取用户信息
}
}
</script> 登入後複製
② wx全域物件 小程式環境也會提供一個全域的wx物件 ，wx會提供很多api，例如存取網路(wx.request({}) )、頁面跳轉(wx.redirectTo({}) )、顯示loading(wx.showLoading({}) )、顯示提示(wx. showToast({}) )等
③ 微信小程序中发起网络请求 不能使用axios 等常用的请求类库，并且wx.request()并不存在跨域问题 。使用wx.request()的时候，需要传递一个请求参数配置对象 ，request()方法返回结果并不是一个Promise对象 ，所以不能通过.then()的方式去处理请求结果，而是在请求配置对象中添加了success、fail、complete等回调函数 ，在回调函数中可以获取到请求的结果，如:
wx.request({
url: "http://www.baidu.com", // 请求url地址必填
data: {
user: "even li"
},
method: "get", // 请求方法
header: {
"content-type": "application/json" // 默认值
},
success(res) {
console.log(res.data); // 获取响应数据
},
fail(error) {
console.log(error); // 请求失败
}
complete(res) { // 接口调用结束，请求成功或失败都会执行
console.log(res); // 如果请求成功则res为响应结果res，如果请求失败则res为错误信息error
}
}); 登入後複製
需要注意的是，返回状态码为404也算请求成功 ，一般只有网络异常的时候才算请求失败 。
④ 跳转页面非tabBar页面 wx.redirectTo({}) ，其作用就是关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面 。需要传递一个配置对象，主要属性为url ，即要跳转页面的路径，可带参数 ，然后就是success、fail、complete三个回调函数，请处理跳转结果 ，如:
wx.redirectTo({
url: "../question/main", // 在某个页面内../相当于pages/
success() {
},
fail() {
},
complete() {
}
}); 登入後複製
⑤ 跳转到tabBar页面 wx.switchTab({}) 的方式，其会跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 ，其用法同wx.redirectTo({});
wx.switchTab({
url: "../learn/main", // 在某个页面内../相当于pages/
success() {
},
fail() {
},
complete() {
}
}); 登入後複製
⑥ 页面配置文件 全局配置文件 app.json与即页面配置 main.json. 全局配置文件可配置项比较多，整个配置文件内容要用花括号括起来，也就是说是一个JSON对象 ，如:
pages 属性，是一个数组 ，用于定义小程序用到的页面 ，数组中每一项对应一个页面，即路径+文件名 信息，不需要写后缀，在mpvue中所有页面固定使用main，即每个页面下都会有一个main.js，所以在配置pages时，通常为"pages/页面名/main "，位于pages数组第一项 表示小程序的初始页面，即小程序运行时显示的页面 。
window 属性，即对小程序的窗口样式 进行配置，其属性值为一个对象，主要包括backgroundColor (窗口背景颜色，即页面下拉后漏出的背景窗口颜色 )、backgroundTextStyle(设置下拉背景字体、loading图的样式，目前只支持dark和light )、navigationBarBackgroundColor (导航栏背景颜色)、navigationBarTextStyle(导航栏标题颜色，目前只支持black和white )、navigationBarTitleText(导航栏标题文字内容)、navigationStyle(值为custom自定义导航栏 )
微信小程序设置颜色的时候，只支持十六进制颜色 ，不支持RGB格式和颜色英文。
tarBar 属性，用于配置窗口底部的tabBar，其属性值为一个对象 ，主要有color(设置tab未激活状态文字的颜色)、selectedColor(设置tab激活状态的文字颜色)、borderStyle(设置tabBar上边框的颜色，目前只支持black和white)、backgroundColor(设置tab的背景颜色)、list(用于配置tab项，最多可配置5项 )，list属性值为一个数组 ，主要包括text (tab上显示的文字内容)、iconPath (tab处于未激活状态时显示的图标路径)、selectedPath (tab处于激活状态时显示的图标路径)、pagePath (tab被点击时要跳转的页面路径，其属性值为pages中配置的路径 ) 页面配置配置相对于全局主配置文件来说要简单得多，在页面配置文件中只能配置窗口的样式属性 ，即只能配置全局配置文件中的window属性中的内容，页面配置文件中配置的内容会覆盖掉全局配置文件中window中相同的配置 ，以决定当前页面的窗口表现，无需使用window属性，直接将window配置放到花括号中即可 。
⑦ 小程序页面 与Vue 生命周期
小程序给页面提供了onLoad (页面加载)、onShow (页面显示，但还未渲染完成 )、onReady(页面渲染完成)、onHide (页面隐藏)、onUnload (页面卸载)，mpvue将小程序提供的页面生命周期和vue的生命周期结合在了一起 ，也就是说使用mpvue开发小程序，可以同时使用小程序的生命周期和vue的生命周期，其顺序为: beforeCreate --> created --> onLoad --> onShow --> onReady --> beforeMount --> mounted 。即Vue首先实例化然后页面开始加载、显示、渲染，页面渲染完成后Vue实例开始挂载 。
⑧ 导航到某个页面 保留当前页面 ，跳转的目的页面导航栏左侧中自带一个返回按钮 ，点击可以回到之前的页面，但是这个跳转的目的页面不能是tabbar中的页面 ，其使用的是wx.navigateTo({})
wx.navigateTo({
url: "../myLesson/main" // 导航到我的课程页面，目标页面自带返回按钮，点击可返回之前的页面
}); 登入後複製
⑨ 动态设置页面导航栏标题 wx.setNavigationBarTitle({}) 用于动态设置导航栏栏标题 ，同样有success、fail、complete三个回调函数，如:
wx.setNavigationBarTitle({
title: "动态标题内容",
success() {
},
fail() {
},
complete() {
}
}); 登入後複製
⑩ 本地缓存数据 setStorage({}) 方法，可以将数据存储在本地缓存中指定的 key 中，除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用 。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。如:
wx.setStorage({
key:"key",
data:"value"
}); 登入後複製
同样，微信小程序也提供了getStorage({})方法，用于获取对应key中存储的数据，其还有success、fail、complete三个回调函数，如:
wx.getStorage({
key: "key",
success (res) { // 成功获取到对应key中的数据
},
fail() { // 未成功获取到对应key中的数据
},
complete() { // 获取对应key数据结束，不管成功还是失败都会执行
}
}); 登入後複製
getStorage()和setStorage()方法本身是异步的 ，但是微信小程序提供了对应的同步方法，即getStorageSync("key") 和setStorageSync("key", "value") ;
⑪ 轮播图组件 swiper-item组件 ，swiper有一些常用的属性，如:
indicator-dots: 是否显示面板指示点;
autoplay: 是否自动切换;
interval: 设置自动切换时间间隔;
duration: 滑动动画时长;
circular: 是否循环播放;
indicator-active-color: 设置当前选中的指示点颜色;
<swiper :indicator-dots="indicatorDots"
:autoplay="autoPlay"
:interval="interval"
:duration="duration"
:circular="circular"
indicator-active-color="rgba(255,255,255, 0.6)">
<block v-for="(item, index) in imgUrls" :key="index">
<swiper-item>
<img :src="item" class="slide-item"/>
</swiper-item>
</block>
</swiper> 登入後複製
当然，组件不仅仅能实现图片的轮播，还可以实现其他轮播，比如列表内容的轮播(导航和内容的联动) ，我们不给其添加indicator-dots、autoplay、interval、duration、circular等属性，而是通过手进行滑动 ，swiper组件还有一个current 属性，属性值为滑动块的索引值 ，用于显示对应的滑动item，从而实现导航和内容的联动，即点击导航，自动切换到对应内容 。swiper组件也提供了change事件，当我们手动滑动滑动item的时候，就会触发change事件，可以在事件对象中拿到对应滑块的索引，从而更新导航位置，实现滑动内容，自动高亮导航位置 。
⑫ 可滚动区域组件 可滚动的导航标签栏 ，其常用属性为:
scroll-x: 是否允许横向滚动;
scroll-y: 是否允许纵向滚动;
scroll-into-view: 属性值为对应滚动item的id，表示自动滚动到对应id元素位置;
scroll-with-animation: 在设置滚动条位置时使用动画过渡;
要实现点击某个滚动item后，自动滚动到对应滚动item位置，那么需要给每个滚动item添加一个id，然后动态改变scroll-into-view的值为对应的滚动item的id即可。
<scroll-view class="btns_wrap"
scroll-x :scroll-into-view="toChildView"
scroll-with-animation>
<span :class="{active: currentIndex === index}"
class="btn_scroll"
v-for="(item, index) in allLessons"
:key="index"
:id="item.id"
@click="switchItem(index)">
{{item.name}}
</span>
</scroll-view> 登入後複製
本文来自 小程序开发 栏目，欢迎学习！
以上是mpvue如何開發微信小程式？基礎知識介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
