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