想高效開發小程式，mpvue瞭解下（一）
序言
小程式一定是今年熱門話題之一，對於我們開發者來講，開發小程式也是屬於我們的技能之一了。從去年我也玩過小程式，但當時處於內測的階段，各種反人類的設計都有，連es6都不支援，只能說瞎折騰了。到了如今，小程式迎來春天，友好度提高了不少，wepy、taro與mpvue的出現也帶來更高的開發效率。
什麼是mpvue
是一個使用 Vue.js 開發小程式的前端框架。框架基於 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其可以執行在小程式環境中，從而為小程式開發引入了整套 Vue.js 開發體驗。
上面那段話語，是引用官方文件（http://mpvue.com/）的一段簡介，簡單的總結下，他有以下幾個亮點：
- 跟vue一樣的開發體驗,包括vuex
- H5程式碼轉換編譯成小程式目的碼的能力。
也就是說，只要會vue，學習成本基本為0。這對於前端來講，開發過程是很舒服的。
完成一個demo
學習一個新知識，實操才是最重要的一環。這一小節，將會完成一個簡單的開發流程。
- 安裝vue-cli
任意框架的使用都離不開腳手架的搭建，而mpvue跟vue一樣依賴的便是vuecli，這也是為啥說，掌握vue的原理，基本mpvue也就直接用了。
首先，安裝下vuecli這一腳手架。
npm install --g vue-cli
安裝完後，我們需要執行下vue這一命令，來檢測安裝是否成功。
vue
- 開始構建專案
執行以下命令，用來自動構建一個專案（構建過程會進行工具的選擇，其中包括Eslint的使用，如果沒用過的可以選擇n，同時會生成一系列的檔案）
vue init mpvue/mpvue-quickstart test-mpvue
- 安裝依賴以及執行專案
專案生成後，為了保證執行成功，需要先install一下依賴包，可以使用這一命令。
npm install
不過呢，由於npm是國外的，因此會下載比較慢，可以考慮下使用cnpm 淘寶映象來下載依賴，使用以下命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
執行成功後，便可以直接使用來快速安裝依賴。
cnpm install
- 微信開發工具
專案執行成功之後，便下載微信開發工具並且開啟小程式的入口，專案目錄填的是【test-mpvue】-【dist】；APPID填寫的是從【微信公眾號】-【設定】-【AppID】獲取到的值,專案名稱任意填即可。
架構優化
前面的步驟完成後，專案的基本模板已經生成，不過呢，參照小程式的官方文件（https://developers.weixin.qq.com/miniprogram/dev/api/）之後，發現還是有一些硬性的要求，例如wx.request
wx.request({
url: 'test.php', //僅為示例，並非真實的介面地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 預設值
},
success (res) {
console.log(res.data)
}
})
在上面的程式碼中，header欄位是固定的，完全可以封裝一個tool，包括url的字首也是固定不變的，因此可以以傳參的方式以及暴露一個promise來進行呼叫，這樣的程式碼不僅維護性高，而且也具有較強的複用性。
著手開發
1.在專案架構中，找到造輪子的資料夾【src】-【utils】，新建一個檔案【request.js】。
let urlPath = 'https://xxx';
export function request(url,data) {
return new Promise((resolve,reject) => {
wx.request({
url: urlPath + url,
data: data,
method:'post',
header: {
'content-type': 'application/json'
},
success(res) {
resolve(res.data)
},
fail(ret) {
reject(ret)
}
})
})
}
從程式碼上來看，通過url，data的傳參，從而進行wx.request的請求，同時return一個promise例項用於呼叫。
2.在【src】-【app.vue】中引用request.js檔案， 發起請求。
import {request} from '/src/utils/request.js'
exports default{
mounted () {
this.fetchData();
},
methods:{
async fetchData(){
let res = await request('aaaaa',{bbb:''})
}
}
}
總結
mpvue結合了原生小程式的開發能力和Vue能力，開發起來能夠更加便捷高效，當然也可以像vue一樣使用vuex機制進行狀態資料管理，這次主要完成了mpvue的使用流程以及開發小程式所應該掌握的多個程式碼部分 。“紙上得來終覺淺，絕知此事要躬行”，要真正學會mpvue進行開發，還得多敲程式碼，這樣才能夠更加深刻地認識mpvue。
本篇文章首發於公眾號「才華與信仰」，關注公眾號瞭解最新推文。
