mpvue是一個使用 Vue.js 開發小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js的 runtime 和 compiler 實現，使其可以運行在小程序環境中，從而為小程序開發引入了整套 Vue.js 開發體驗。

主要特性

使用 mpvue 開發小程序，你將在小程序技術體系的基礎上獲取到這樣一些能力：

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

2. 完整的 Vue.js 開發體驗

3. 方便的 Vuex 數據管理方案：方便構建復雜應用

4. 快捷的 webpack 構建機制：自定義構建策略、開發階段 hotReload

5. 支持使用 npm 外部依賴

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

7. H5 代碼轉換編譯成小程序目標代碼的能力

學習最好的方式就動手，我們就徒手擼一個demo項目出來跑一跑，看看到底有沒有官方說的那么好。

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

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

npm install --g vue-cli

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

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

vue init mpvue/mpvue-quickstart test-wxapp

然后 進入我們創建的項目，并安裝依賴

cd test-wxapp

npm i

最后，在運行一下我們的開發服務

npm run dev

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

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

到此為止，一個基本的項目就完成了，但是，本文的目的不是讓你學會搭一個空項目的，空項目的話，我覺得官方教程做的已經夠好了。

接下來，我們來刪掉幾個示例文件，然后一步步添加頁面.

首先，我們看一下項目的配置文件 /src/main.js 里面的初始內容如下：

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 字段下面的內容，就是整個小程序的全局配置了，其中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 我們把里面多余的代碼刪掉，只保留一個基礎骨架

 

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

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

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

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

嚴重誤導用戶，字數上還有限制有帶icon的不能超過7個字，你說說，你說說 7個字夠干嘛的，

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

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

npm i vuex

npm i mptoast -D

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

import mpvueToastRegistry from 'mptoast/registry'

mpvueToastRegistry(Vue)

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

 

使用起來還是蠻簡單的

二，用promise封裝異步請求函數

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

但是該方法的代碼風跟跟Jquery年代的Ajax一樣，都散靠回調來處理請求響應，如果有很多層回調，

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

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

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

wx.request({

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

data: {

x: '' ,

y: ''

},

header: {

'content-type': 'application/json' // 默認值

},

success: function(res) {

console.log(res.data)

}

})

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

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

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

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

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

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

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

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

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

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

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

最后一個就是處理請求結果回調函數，示例里面只有一個請求成功的回調，其實我們應該再加一個請求實例的處理函數，

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

// 假設以下代碼在 `/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) // 把返回的數據傳出去

},

fail(ret) {

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

}

})

})

}

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

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

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

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()來調用，只要一行代碼，

// 這行代碼同樣需要在async修飾的函數里面才能正確調用

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