美團小程序框架mpvue入門教程

mpvue是一個使用 Vue.js 開發(fā)小程序的前端框架?？蚣芑?Vue.js 核心，mpvue 修改了 Vue.js的 runtime 和 compiler 實現(xiàn)，使其可以運行在小程序環(huán)境中，從而為小程序開發(fā)引入了整套 Vue.js 開發(fā)體驗。

主要特性

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

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

2. 完整的 Vue.js 開發(fā)體驗

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

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

5. 支持使用 npm 外部依賴

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

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

學(xué)習(xí)最好的方式就動手，我們就徒手?jǐn)]一個demo項目出來跑一跑，看看到底有沒有官方說的那么好。

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

直接用vue-cli創(chuàng)建項目，如果你一起沒安裝過vue-cli，那么你要先運行一下命令

npm install --g vue-cli

安裝完vue-cli以后，我們就可以運行一下命令，來自動構(gòu)建一個項目(期間會詢問你是否使用一些工具/插件，

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

vue init mpvue/mpvue-quickstart test-wxapp

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

cd test-wxapp

npm i

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

npm run dev

項目就跑起來了，這個時候，我們打開微信開發(fā)者工具，選擇小程序，然后新建一個，項目目錄填

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

到此為止，一個基本的項目就完成了，但是，本文的目的不是讓你學(xué)會搭一個空項目的，空項目的話，我覺得官方教程做的已經(jī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 {

// 這個字段走 app.json

config: {

// 頁面前帶有 ^ 符號的，會被編譯成首頁，其他頁面可以選填，我們會自動把 webpack entry 里面的入口頁面加進去

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

window: {

backgroundTextStyle: 'light',

navigationBarBackgroundColor: '#fff',

navigationBarTitleText: 'WeChat',

navigationBarTextStyle: 'black'

}

}

}

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

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

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

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

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

 

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

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

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

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

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

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

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

npm i vuex

npm i mptoast -D

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

import mpvueToastRegistry from 'mptoast/registry'

mpvueToastRegistry(Vue)

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

 

使用起來還是蠻簡單的

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

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

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

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

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

我們先來看一下 wx.request的一個官方示例代碼

wx.request({

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

data: {

x: '' ,

y: ''

},

header: {

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

},

success: function(res) {

console.log(res.data)

}

})

可以看到，每次請求都要發(fā)送一大堆的東西，重點少這些東西里面，很可能對于一個項目來說，

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

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

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

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

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

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

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

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

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

這里因為使用默認(rèn)值GET，所以就沒列出，我們這邊需要做設(shè)置，因為現(xiàn)在前后分離的模式，現(xiàn)在基本上大部分都是POST請求，所以我們這邊也寫死成method:’POST’

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

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

// 假設(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) // 把錯誤信息傳出去

}

})

})

}

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

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

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

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

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

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

Vue.prototype.$post = post

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

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

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