美團小程序框架mpvue入門教程
自打寫了 美團小程序框架mpvue蹲坑指南, 一發不可收拾，今天趁周末空閑，來寫個mpvue(沒朋友)的簡單入門教程，本教程只針對新手，老鳥勿噴。
另外，我還專門為本文做了一個簡單的項目，如果懶得從頭開始搭項目的童鞋，可以直接去我的 github上克隆到本地， 安裝一下依賴，即可直接在此基礎在開發，不需要做任何配置。如果你覺得該項目對有幫助， 請順便給我Star,你們的支持是我最大的動力，謝謝!
好了，我們進入主題，首先，請允許引用一下美團官方對mpvue的介紹
mpvue是一個使用 Vue.js 開發小程序的前端框架。框架基於 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其可以運行在小程序環境中，從而為小程序開發引入了整套 Vue.js 開發體驗。
主要特性
使用 mpvue 開發小程序，你將在小程序技術體系的基礎上獲取到這樣一些能力：
- 徹底的組件化開發能力：提高代碼復用性
- 完整的 Vue.js 開發體驗
- 方便的 Vuex 數據管理方案：方便構建復雜應用
- 快捷的 webpack 構建機制：自定義構建策略、開發階段 hotReload
- 支持使用 npm 外部依賴
- 使用 Vue.js 命令行工具 vue-cli 快速初始化項目
- 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 我們把裏面多余的代碼刪掉，只保留一個基礎骨架
<template>
<div class="container">
我是首頁
</div>
</template>
<script>
export default {
data () {
return { }
},
methods: {},
created () {}
}
</script>
<style scoped>
</style>
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()了， 以下是一個簡單的實例
<template>
<div>
<-- 省略其他代碼 -->
<mptoast />
</div>
</template>
<script>
import mptoast from ‘mptoast‘
export default {
components: {
mptoast
},
data () {
return {}
},
methods: {
showToast () {
this.$mptoast(‘我是提示信息‘)
},
}
}
</script>
使用起來還是蠻簡單的
二，用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})
怎麽樣？是不是比原生的方便很多呢？
當然，跑起來以後，你可能還會遇到各種問題，這裏我有對我自己遇到的問題做了一些總結 美團小程序框架mpvue蹲坑指南，希望對你有幫助, 還有官方文檔也是很不錯的哦
作者：noahlam
鏈接：https://juejin.im/post/5ac31e8d6fb9a028d9375765
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。
美團小程序框架mpvue入門教程