mpvue 是一個使用 Vue.js 開發(fā)小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現(xiàn)，使其可以運行在小程序環(huán)境中，從而為小程序開發(fā)引入了整套 Vue.js 開發(fā)體驗。mp 即 mini program 的縮寫。
二、mpvue快速入門
① 通過腳手架引入mpvue模板
vue 3.0已經(jīng)不支持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 devnpm run dev命令會在項目根目錄下生成一個dist目錄，其就是將vue的項目轉(zhuǎn)換為微信小程序項目
② 搭建小程序的開發(fā)環(huán)境
微信提供了一個專門微信開發(fā)者工具用于開發(fā)小程序，需要下載安裝微信開發(fā)者工具，同時還需要申請一個小程序ID，即AppID，因為通過微信開發(fā)者工具創(chuàng)建小程序項目需要填入AppID，可以在微信公眾平臺申請得到。
③ 調(diào)試項目
通過微信開發(fā)者工具啟動微信小程序項目，選擇的項目目錄是mpvue項目的根目錄，而不是生成的dist目錄，由于微信開發(fā)者工具不支持.vue文件的查看，所以我們還是要用自己的開發(fā)工具調(diào)試源碼。
三、mpvue的一些使用細節(jié)
① mpvue的src目錄下和vue一樣，也有一個App.vue根組件，App.vue根組件只是一個結(jié)構(gòu)，無具體內(nèi)容，根組件有對應(yīng)的main.js文件用于渲染App.vue根組件，即引入App.vue并作為Vue構(gòu)造函數(shù)創(chuàng)建Vue實例，然后mount，還有一個app.json文件，即頁面全局配置文件，用于頁面的注冊、tabBar的注冊、全局window樣式設(shè)置，如:
// 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目錄里面，一個頁面對應(yīng)一個文件夾，每個頁面文件夾內(nèi)需要有一個.vue文件和main.js文件，main.js主要做的就是，引入當(dāng)前頁面對應(yīng)的.vue，然后作為Vue構(gòu)造函數(shù)的參數(shù)創(chuàng)建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，通過外層的文件夾來區(qū)分不同的頁面，而原生小程序中，也是通過外層文件夾來區(qū)分不同的頁面，但是文件夾中的四個頁面的名稱可以和外層文件夾相同，也可以不同，但四個文件必須統(tǒng)一。
③ 每次新增了頁面，需要重新啟動項目，即重新執(zhí)行npm run dev.
資源搜索網(wǎng)站大全 https://www.renrenfan.com.cn 廣州VI設(shè)計公司https://www.houdianzi.com
四、微信小程序基礎(chǔ)與常用API① 點擊按鈕提示用戶是否授權(quán)并獲取用戶信息
微信小程序給我們的按鈕<button>提供了一些微信開發(fā)的能力，其通過給<button>標(biāo)簽添加一個open-type屬性，表示要給按鈕開放的能力類型，比如getUserInfo，即點擊按鈕獲取用戶信息的能力，我們需要在<button>上通過監(jiān)聽getuserinfo事件，mpvue在小程序的基礎(chǔ)上進行了封裝，需要通過e.mp.detail.userInfo才能獲取到用戶信息
<button open-type="getUserInfo" @getuserinfo="getUserInfo">點擊開始</button>
<script>
export default {
getUserInfo(e) {
console.log(e.mp.detail.userInfo); // 獲取用戶信息
}
}
</script>② wx全局對象
就像網(wǎng)頁運行在瀏覽器環(huán)境一樣，瀏覽器環(huán)境會提供一個全局的window對象，同樣小程序是運行在小程序環(huán)境中，小程序環(huán)境也會提供一個全局的wx對象，wx會提供很多api，比如訪問網(wǎng)絡(luò)(wx.request({}))、頁面跳轉(zhuǎn)(wx.redirectTo({}))、顯示loading(wx.showLoading({}))、顯示提示(wx.showToast({}))等
③ 微信小程序中發(fā)起網(wǎng)絡(luò)請求
在小程序環(huán)境中不能像瀏覽器環(huán)境一個直接提供ajax，而是提供了一個全局的網(wǎng)絡(luò)請求api，即wx.request(),在小程序環(huán)境中只能使用wx.request()發(fā)起網(wǎng)絡(luò)請求，不能使用axios等常用的請求類庫，并且wx.request()并不存在跨域問題。使用wx.request()的時候，需要傳遞一個請求參數(shù)配置對象，request()方法返回結(jié)果并不是一個Promise對象，所以不能通過.then()的方式去處理請求結(jié)果，而是在請求配置對象中添加了success、fail、complete等回調(diào)函數(shù)，在回調(diào)函數(shù)中可以獲取到請求的結(jié)果，如:
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); // 獲取響應(yīng)數(shù)據(jù)
},
fail(error) {
console.log(error); // 請求失敗
}
complete(res) { // 接口調(diào)用結(jié)束，請求成功或失敗都會執(zhí)行
console.log(res); // 如果請求成功則res為響應(yīng)結(jié)果res，如果請求失敗則res為錯誤信息error
}
});需要注意的是，返回狀態(tài)碼為404也算請求成功，一般只有網(wǎng)絡(luò)異常的時候才算請求失敗。
④ 跳轉(zhuǎn)頁面非tabBar頁面
如果想要跳轉(zhuǎn)到某個非tabBar頁面，那么可以使用一個全局的api，即wx.redirectTo({})，其作用就是關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不允許跳轉(zhuǎn)到 tabbar 頁面。需要傳遞一個配置對象，主要屬性為url，即要跳轉(zhuǎn)頁面的路徑，可帶參數(shù)，然后就是success、fail、complete三個回調(diào)函數(shù)，請處理跳轉(zhuǎn)結(jié)果，如:
wx.redirectTo({
url: "../question/main", // 在某個頁面內(nèi)../相當(dāng)于pages/
success() {
},
fail() {
},
complete() {
}
});⑤ 跳轉(zhuǎn)到tabBar頁面
在微信小程序中，tabBar頁面是需要特殊的方式跳轉(zhuǎn)的，即使用wx.switchTab({})的方式，其會跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面，其用法同wx.redirectTo({});
wx.switchTab({
url: "../learn/main", // 在某個頁面內(nèi)../相當(dāng)于pages/
success() {
},
fail() {
},
complete() {
}
});⑥ 頁面配置文件
小程序的頁面配置文件分為全局配置文件app.json與即頁面配置main.json. 全局配置文件可配置項比較多，整個配置文件內(nèi)容要用花括號括起來，也就是說是一個JSON對象，如:
- pages屬性，是一個數(shù)組，用于定義小程序用到的頁面，數(shù)組中每一項對應(yīng)一個頁面，即路徑+文件名信息，不需要寫后綴，在mpvue中所有頁面固定使用main，即每個頁面下都會有一個main.js，所以在配置pages時，通常為"pages/頁面名/main"，位于pages數(shù)組第一項表示小程序的初始頁面，即小程序運行時顯示的頁面。
- window屬性，即對小程序的窗口樣式進行配置，其屬性值為一個對象，主要包括backgroundColor(窗口背景顏色，即頁面下拉后漏出的背景窗口顏色)、backgroundTextStyle(設(shè)置下拉背景字體、loading圖的樣式，目前只支持dark和light)、navigationBarBackgroundColor(導(dǎo)航欄背景顏色)、navigationBarTextStyle(導(dǎo)航欄標(biāo)題顏色，目前只支持black和white)、navigationBarTitleText(導(dǎo)航欄標(biāo)題文字內(nèi)容)、navigationStyle(值為custom自定義導(dǎo)航欄)
微信小程序設(shè)置顏色的時候，只支持十六進制顏色，不支持RGB格式和顏色英文。
- tarBar屬性，用于配置窗口底部的tabBar，其屬性值為一個對象，主要有color(設(shè)置tab未激活狀態(tài)文字的顏色)、selectedColor(設(shè)置tab激活狀態(tài)的文字顏色)、borderStyle(設(shè)置tabBar上邊框的顏色，目前只支持black和white)、backgroundColor(設(shè)置tab的背景顏色)、list(用于配置tab項，最多可配置5項)，list屬性值為一個數(shù)組，主要包括text(tab上顯示的文字內(nèi)容)、iconPath(tab處于未激活狀態(tài)時顯示的圖標(biāo)路徑)、selectedPath(tab處于激活狀態(tài)時顯示的圖標(biāo)路徑)、pagePath(tab被點擊時要跳轉(zhuǎn)的頁面路徑，其屬性值為pages中配置的路徑)
頁面配置配置相對于全局主配置文件來說要簡單得多，在頁面配置文件中只能配置窗口的樣式屬性，即只能配置全局配置文件中的window屬性中的內(nèi)容，頁面配置文件中配置的內(nèi)容會覆蓋掉全局配置文件中window中相同的配置，以決定當(dāng)前頁面的窗口表現(xiàn)，無需使用window屬性，直接將window配置放到花括號中即可。
⑦ 小程序頁面與Vue生命周期
小程序給頁面提供了onLoad(頁面加載)、onShow(頁面顯示，但還未渲染完成)、onReady(頁面渲染完成)、onHide(頁面隱藏)、onUnload(頁面卸載)，mpvue將小程序提供的頁面生命周期和vue的生命周期結(jié)合在了一起，也就是說使用mpvue開發(fā)小程序，可以同時使用小程序的生命周期和vue的生命周期，其順序為: beforeCreate --> created --> onLoad --> onShow --> onReady --> beforeMount --> mounted。即Vue首先實例化然后頁面開始加載、顯示、渲染，頁面渲染完成后Vue實例開始掛載。
⑧ 導(dǎo)航到某個頁面
所謂導(dǎo)航到某個頁面，就是跳轉(zhuǎn)到某個頁面，但是其會保留當(dāng)前頁面，跳轉(zhuǎn)的目的頁面導(dǎo)航欄左側(cè)中自帶一個返回按鈕，點擊可以回到之前的頁面，但是這個跳轉(zhuǎn)的目的頁面不能是tabbar中的頁面，其使用的是wx.navigateTo({})
wx.navigateTo({
url: "../myLesson/main" // 導(dǎo)航到我的課程頁面，目標(biāo)頁面自帶返回按鈕，點擊可返回之前的頁面
});⑨ 動態(tài)設(shè)置頁面導(dǎo)航欄標(biāo)題
當(dāng)我們點擊列表中的某個具體項時，通常需要在其對應(yīng)頁面動態(tài)顯示出當(dāng)前點擊項的具體導(dǎo)航欄標(biāo)題，微信小程序提供了wx.setNavigationBarTitle({})用于動態(tài)設(shè)置導(dǎo)航欄欄標(biāo)題，同樣有success、fail、complete三個回調(diào)函數(shù)，如:
wx.setNavigationBarTitle({
title: "動態(tài)標(biāo)題內(nèi)容",
success() {
},
fail() {
},
complete() {
}
});⑩ 本地緩存數(shù)據(jù)
微信小程序提供了setStorage({})方法，可以將數(shù)據(jù)存儲在本地緩存中指定的 key 中，除非用戶主動刪除或因存儲空間原因被系統(tǒng)清理，否則數(shù)據(jù)都一直可用。單個 key 允許存儲的最大數(shù)據(jù)長度為 1MB，所有數(shù)據(jù)存儲上限為 10MB。如:
wx.setStorage({
key:"key",
data:"value"
});同樣，微信小程序也提供了getStorage({})方法，用于獲取對應(yīng)key中存儲的數(shù)據(jù)，其還有success、fail、complete三個回調(diào)函數(shù)，如:
wx.getStorage({
key: "key",
success (res) { // 成功獲取到對應(yīng)key中的數(shù)據(jù)
},
fail() { // 未成功獲取到對應(yīng)key中的數(shù)據(jù)
},
complete() { // 獲取對應(yīng)key數(shù)據(jù)結(jié)束，不管成功還是失敗都會執(zhí)行
}
});getStorage()和setStorage()方法本身是異步的，但是微信小程序提供了對應(yīng)的同步方法，即getStorageSync("key")和setStorageSync("key", "value");
? 輪播圖組件
微信小程序提供了一個<swiper>輪播圖組件，其中只可放置swiper-item組件，swiper有一些常用的屬性，如:
- indicator-dots: 是否顯示面板指示點;
- autoplay: 是否自動切換;
- interval: 設(shè)置自動切換時間間隔;
- duration: 滑動動畫時長;
- circular: 是否循環(huán)播放;
- indicator-active-color: 設(shè)置當(dāng)前選中的指示點顏色;
<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>當(dāng)然，<swiper>組件不僅僅能實現(xiàn)圖片的輪播，還可以實現(xiàn)其他輪播，比如列表內(nèi)容的輪播(導(dǎo)航和內(nèi)容的聯(lián)動)，我們不給其添加indicator-dots、autoplay、interval、duration、circular等屬性，而是通過手進行滑動，swiper組件還有一個current屬性，屬性值為滑動塊的索引值，用于顯示對應(yīng)的滑動item，從而實現(xiàn)導(dǎo)航和內(nèi)容的聯(lián)動，即點擊導(dǎo)航，自動切換到對應(yīng)內(nèi)容。swiper組件也提供了change事件，當(dāng)我們手動滑動滑動item的時候，就會觸發(fā)change事件，可以在事件對象中拿到對應(yīng)滑塊的索引，從而更新導(dǎo)航位置，實現(xiàn)滑動內(nèi)容，自動高亮導(dǎo)航位置。
? 可滾動區(qū)域組件
微信提供了一個<scroll-view>可滾動區(qū)域組件，用于設(shè)置該區(qū)域中的內(nèi)容是可以滾動的，通常用于實現(xiàn)可滾動的導(dǎo)航標(biāo)簽欄，其常用屬性為:
- scroll-x: 是否允許橫向滾動;
- scroll-y: 是否允許縱向滾動;
- scroll-into-view: 屬性值為對應(yīng)滾動item的id，表示自動滾動到對應(yīng)id元素位置;
- scroll-with-animation: 在設(shè)置滾動條位置時使用動畫過渡;
要實現(xiàn)點擊某個滾動item后，自動滾動到對應(yīng)滾動item位置，那么需要給每個滾動item添加一個id，然后動態(tài)改變scroll-into-view的值為對應(yīng)的滾動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>
