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)。

主要特性

使用 mpvue 開(kāi)發(fā)小程序，你將在小程序技術(shù)體系的基礎(chǔ)上獲取到這樣一些能力：

1. 徹底的組件化開(kāi)發(fā)能力：提高代碼復(fù)用性

2. 完整的 Vue.js 開(kāi)發(fā)體驗(yàn)

3. 方便的 Vuex 數(shù)據(jù)管理方案：方便構(gòu)建復(fù)雜應(yīng)用

4. 快捷的 webpack 構(gòu)建機(jī)制：自定義構(gòu)建策略、開(kāi)發(fā)階段 hotReload

5. 支持使用 npm 外部依賴

6. 使用 Vue.js 命令行工具 vue-cli 快速初始化項(xiàng)目

7. H5 代碼轉(zhuǎn)換編譯成小程序目標(biāo)代碼的能力

學(xué)習(xí)最好的方式就動(dòng)手，我們就徒手?jǐn)]一個(gè)demo項(xiàng)目出來(lái)跑一跑，看看到底有沒(méi)有官方說(shuō)的那么好。

如果你有過(guò)vue的開(kāi)發(fā)經(jīng)歷，相信你會(huì)對(duì)這個(gè)過(guò)程非常熟悉，甚至你都不需要安裝其他工具，

直接用vue-cli創(chuàng)建項(xiàng)目，如果你一起沒(méi)安裝過(guò)vue-cli，那么你要先運(yùn)行一下命令

npm install --g vue-cli

安裝完vue-cli以后，我們就可以運(yùn)行一下命令，來(lái)自動(dòng)構(gòu)建一個(gè)項(xiàng)目(期間會(huì)詢問(wèn)你是否使用一些工具/插件，

請(qǐng)根據(jù)自己的實(shí)際情況選擇y或n,對(duì)于不懂得該選y還是n的，統(tǒng)統(tǒng)選n)

vue init mpvue/mpvue-quickstart test-wxapp

然后 進(jìn)入我們創(chuàng)建的項(xiàng)目，并安裝依賴

cd test-wxapp

npm i

最后，在運(yùn)行一下我們的開(kāi)發(fā)服務(wù)

npm run dev

項(xiàng)目就跑起來(lái)了，這個(gè)時(shí)候，我們打開(kāi)微信開(kāi)發(fā)者工具，選擇小程序，然后新建一個(gè)，項(xiàng)目目錄填

我們項(xiàng)目目錄下的dist目錄 test-wxapp/dist,就可以看到效果了

到此為止，一個(gè)基本的項(xiàng)目就完成了，但是，本文的目的不是讓你學(xué)會(huì)搭一個(gè)空項(xiàng)目的，空項(xiàng)目的話，我覺(jué)得官方教程做的已經(jīng)夠好了。

接下來(lái)，我們來(lái)刪掉幾個(gè)示例文件，然后一步步添加頁(yè)面.

首先，我們看一下項(xiàng)目的配置文件 /src/main.js 里面的初始內(nèi)容如下：

import Vue from 'vue'

import App from './App'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue(App)

app.$mount()

export default {

// 這個(gè)字段走 app.json

config: {

// 頁(yè)面前帶有 ^ 符號(hào)的，會(huì)被編譯成首頁(yè)，其他頁(yè)面可以選填，我們會(huì)自動(dòng)把 webpack entry 里面的入口頁(yè)面加進(jìn)去

pages: ['pages/logs/main', '^pages/index/main'],

window: {

backgroundTextStyle: 'light',

navigationBarBackgroundColor: '#fff',

navigationBarTitleText: 'WeChat',

navigationBarTextStyle: 'black'

}

}

}

這里的 config 字段下面的內(nèi)容，就是整個(gè)小程序的全局配置了，其中pages是頁(yè)面的路由，window則是頁(yè)面的一些配置(大部分都是頂部欄的配置)

，這些配置，最終都會(huì)被打包到原生小程序的app.json，對(duì)這些配置不了解的，建議看一下微信方法的小程序文檔，這里不做贅述。

我們先把/src/pages 下面的counter和logs兩個(gè)文件夾刪掉，只保留一個(gè)index ,順便把 /src/components 文件夾下面的文件也全刪掉,

然后把/src/main.js 里面的 config.pages里面多余的路由也刪掉，只保留一條['^pages/index/main'],這樣目前就只有個(gè)index頁(yè)面，

然后我們打開(kāi)/src/pages/index/index.vue 我們把里面多余的代碼刪掉，只保留一個(gè)基礎(chǔ)骨架

 

tip /src/utils/index.js 是一個(gè)公共函數(shù)庫(kù)，里面只有一個(gè)簡(jiǎn)單的格式化日期函數(shù)，不要也可以刪掉

到目前為止，一個(gè)干凈的空項(xiàng)目就算是ok了，接下來(lái)我們來(lái)對(duì)微信原生的一些反人類的東西來(lái)做一下優(yōu)化。

一、先用mptoast組件代替官方提供的wx.showToast, wx.showToast諸多不便我就不說(shuō)了，關(guān)鍵是還有坑

小程序基礎(chǔ)庫(kù)比較低的，不管你怎么設(shè)置，總是會(huì)在彈窗里面加一個(gè)鉤鉤，有時(shí)候我想彈出錯(cuò)誤消息也是打鉤，

嚴(yán)重誤導(dǎo)用戶，字?jǐn)?shù)上還有限制有帶icon的不能超過(guò)7個(gè)字，你說(shuō)說(shuō)，你說(shuō)說(shuō) 7個(gè)字夠干嘛的，

那我們來(lái)看看mptoast,據(jù)官方介紹mptoast具有輕量，配置少，冗余少，使用簡(jiǎn)單，可定制性強(qiáng)等特點(diǎn)

我們開(kāi)根據(jù)官方介紹，從npm引入并配置

npm i vuex

npm i mptoast -D

在項(xiàng)目的主配置文件(一般位于src/main.js)加入以下代碼

import mpvueToastRegistry from 'mptoast/registry'

mpvueToastRegistry(Vue)

在你需要彈窗的頁(yè)面，引入組件，并注冊(cè)，然后在頁(yè)面內(nèi)加入一個(gè)你注冊(cè)的組件，就可以在js里面調(diào)用this.$mptoast()了， 以下是一個(gè)簡(jiǎn)單的實(shí)例

 

使用起來(lái)還是蠻簡(jiǎn)單的

二，用promise封裝異步請(qǐng)求函數(shù)

在小程序的環(huán)境下面，要想發(fā)送一個(gè)外部請(qǐng)求，我們只能使用小程序官方提供的wx.request方法，

但是該方法的代碼風(fēng)跟跟Jquery年代的Ajax一樣，都散靠回調(diào)來(lái)處理請(qǐng)求響應(yīng)，如果有很多層回調(diào)，

就會(huì)有很多層嵌套，這讓我們這些平時(shí)被async-await慣壞的人怎么接受?

所以，建完基本項(xiàng)目，我們要做的第一件事，就是用wx.request自己封裝一個(gè)基于promise的異步請(qǐng)求方法。

我們先來(lái)看一下 wx.request的一個(gè)官方示例代碼

wx.request({

url: 'test.php', //僅為示例，并非真實(shí)的接口地址

data: {

x: '' ,

y: ''

},

header: {

'content-type': 'application/json' // 默認(rèn)值

},

success: function(res) {

console.log(res.data)

}

})

可以看到，每次請(qǐng)求都要發(fā)送一大堆的東西，重點(diǎn)少這些東西里面，很可能對(duì)于一個(gè)項(xiàng)目來(lái)說(shuō)，

絕大部分都是固定不變的，那這樣，不是冗余了么。

tip: 更多wx.request參數(shù)，請(qǐng)參考 微信官方文檔

我們分析一下，第一個(gè)參數(shù)是url,也就是我們請(qǐng)求的地址，這個(gè)應(yīng)該是每次都不一樣的，但是，不一樣的應(yīng)該也只是url的最后一部分，

接口名稱的位置不一樣，前面的服務(wù)器地址一般都是一樣的，例如http://www.abc.com/api/member/login 對(duì)于同一個(gè)項(xiàng)目的所有接口

服務(wù)器地址http://www.abc.com/api/應(yīng)該都是一樣的，不一樣的只是后面的接口名稱member/login,

那我們可以把url拆分成 服務(wù)器地址 + 接口名稱，這樣做也方便后期上線的時(shí)候，切換服務(wù)器地址。

第二個(gè)參數(shù)是請(qǐng)求的參數(shù)，請(qǐng)求的參數(shù)應(yīng)該是每次都不一樣的，所以這個(gè)我們就不做修改(事實(shí)上實(shí)際應(yīng)用中，

經(jīng)常有可能出現(xiàn)需要每個(gè)接口都帶一個(gè)token的，我們也可以在這里統(tǒng)一加上去，不過(guò)這里就不做深入)

第三個(gè)參數(shù)是 請(qǐng)求頭，這個(gè)一般同一個(gè)項(xiàng)目里面，這些都是一樣的，所以我們就寫死。 這里還有一個(gè)參數(shù)method請(qǐng)求方法，

這里因?yàn)槭褂媚J(rèn)值GET，所以就沒(méi)列出，我們這邊需要做設(shè)置，因?yàn)楝F(xiàn)在前后分離的模式，現(xiàn)在基本上大部分都是POST請(qǐng)求，所以我們這邊也寫死成method:’POST’

最后一個(gè)就是處理請(qǐng)求結(jié)果回調(diào)函數(shù)，示例里面只有一個(gè)請(qǐng)求成功的回調(diào)，其實(shí)我們應(yīng)該再加一個(gè)請(qǐng)求實(shí)例的處理函數(shù)，

fail，而我們封裝這個(gè)函數(shù)的重點(diǎn)，就是要用promise來(lái)處理這兩個(gè)回調(diào)函數(shù)，使它們可以用async-await的語(yǔ)法

// 假設(shè)以下代碼在 `/src/utils/requestMethod.js`

let serverPath = 'http://www.abc.com/api/'

export function post(url,body) {

return new Promise((resolve,reject) => {

wx.request({

url: serverPath + url // 拼接完整的url

data: body

method:'POST',

header: {

'content-type': 'application/json'

},

success(res) {

resolve(res.data) // 把返回的數(shù)據(jù)傳出去

},

fail(ret) {

reject(ret) // 把錯(cuò)誤信息傳出去

}

})

})

}

有了這樣的封裝，我們就可以在其他地方引入 上面這個(gè)文件，然后使用post函數(shù)請(qǐng)求

import {post} from '/src/utils/requestMethod.js'

// 需要注意的是，這行代碼必須要在async修飾的函數(shù)里面才能正確調(diào)用

let res = await post('member/login',{name:myname})

如果你覺(jué)得每次都要import這個(gè)文件很麻煩,那我們也可以把它掛在到Vue(mpvue)的原型(prototype)上，我們打開(kāi)/src/main.js文件，然后在里面加入以下代碼

import {post} from '/src/utils/requestMethod.js'

Vue.prototype.$post = post

這樣，我們就可以在Vue(mpvue)的所有實(shí)例里面，直接使用 this.$post()來(lái)調(diào)用，只要一行代碼，

// 這行代碼同樣需要在async修飾的函數(shù)里面才能正確調(diào)用

let res = await this.$post('member/login',{name:myname})