美團(tuán)小程序框架mpvue入門教程

自打?qū)懥?美團(tuán)小程序框架mpvue蹲坑指南, 一發(fā)不可收拾，今天趁周末空閑，來寫個(gè)mpvue(沒朋友)的簡單入門教程，本教程只針對新手，老鳥勿噴。

另外，我還專門為本文做了一個(gè)簡單的項(xiàng)目，如果懶得從頭開始搭項(xiàng)目的童鞋，可以直接去我的 github上克隆到本地， 安裝一下依賴，即可直接在此基礎(chǔ)在開發(fā)，不需要做任何配置。如果你覺得該項(xiàng)目對有幫助， 請順便給我Star,你們的支持是我最大的動(dòng)力，謝謝!

好了，我們進(jìn)入主題，首先，請?jiān)试S引用一下美團(tuán)官方對mpvue的介紹

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

主要特性

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

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

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

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

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

支持使用 npm 外部依賴

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

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

學(xué)習(xí)最好的方式就動(dòng)手，我們就徒手?jǐn)]一個(gè)demo項(xiàng)目出來跑一跑，看看到底有沒有官方說的那么好。 如果你有過vue的開發(fā)經(jīng)歷，相信你會對這個(gè)過程非常熟悉，甚至你都不需要安裝其他工具， 直接用vue-cli創(chuàng)建項(xiàng)目，如果你一起沒安裝過vue-cli，那么你要先運(yùn)行一下命令

npm install --g vue-cli 復(fù)制代碼

安裝完vue-cli以后，我們就可以運(yùn)行一下命令，來自動(dòng)構(gòu)建一個(gè)項(xiàng)目（期間會詢問你是否使用一些工具/插件， 請根據(jù)自己的實(shí)際情況選擇y或n,對于不懂得該選y還是n的，統(tǒng)統(tǒng)選n）

vue init mpvue/mpvue-quickstart test-wxapp 復(fù)制代碼

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

cd test-wxapp npm i 復(fù)制代碼

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

npm run dev 復(fù)制代碼

項(xiàng)目就跑起來了，這個(gè)時(shí)候，我們打開微信開發(fā)者工具，選擇小程序，然后新建一個(gè)，項(xiàng)目目錄填 我們項(xiàng)目目錄下的dist目錄 test-wxapp/dist,就可以看到效果了

到此為止，一個(gè)基本的項(xiàng)目就完成了，但是，本文的目的不是讓你學(xué)會搭一個(gè)空項(xiàng)目的，空項(xiàng)目的話，我覺得官方教程做的已經(jīng)夠好了。 接下來，我們來刪掉幾個(gè)示例文件，然后一步步添加頁面. 首先，我們看一下項(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.jsonconfig: {// 頁面前帶有 ^ 符號的，會被編譯成首頁，其他頁面可以選填，我們會自動(dòng)把 webpack entry 里面的入口頁面加進(jìn)去pages: ['pages/logs/main', '^pages/index/main'],window: {backgroundTextStyle: 'light',navigationBarBackgroundColor: '#fff',navigationBarTitleText: 'WeChat',navigationBarTextStyle: 'black'}} } 復(fù)制代碼

這里的 config 字段下面的內(nèi)容，就是整個(gè)小程序的全局配置了，其中pages是頁面的路由，window則是頁面的一些配置（大部分都是頂部欄的配置） ，這些配置，最終都會被打包到原生小程序的app.json，對這些配置不了解的，建議看一下微信方法的小程序文檔，這里不做贅述。

我們先把/src/pages 下面的counter和logs兩個(gè)文件夾刪掉，只保留一個(gè)index ,順便把 /src/components 文件夾下面的文件也全刪掉, 然后把/src/main.js 里面的 config.pages里面多余的路由也刪掉，只保留一條['^pages/index/main'],這樣目前就只有個(gè)index頁面，

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

<template><div class="container">我是首頁</div> </template><script>export default {data () {return { }},methods: {},created () {} } </script><style scoped></style> 復(fù)制代碼

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

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

一、先用mptoast組件代替官方提供的wx.showToast, wx.showToast諸多不便我就不說了，關(guān)鍵是還有坑 小程序基礎(chǔ)庫比較低的，不管你怎么設(shè)置，總是會在彈窗里面加一個(gè)鉤鉤，有時(shí)候我想彈出錯(cuò)誤消息也是打鉤， 嚴(yán)重誤導(dǎo)用戶，字?jǐn)?shù)上還有限制有帶icon的不能超過7個(gè)字，你說說，你說說 7個(gè)字夠干嘛的， 那我們來看看mptoast,據(jù)官方介紹mptoast具有輕量，配置少，冗余少，使用簡單，可定制性強(qiáng)等特點(diǎn)

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

npm i vuex npm i mptoast -D 復(fù)制代碼

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

import mpvueToastRegistry from 'mptoast/registry' mpvueToastRegistry(Vue) 復(fù)制代碼

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

<template><div><-- 省略其他代碼 --><mptoast /></div> </template><script> import mptoast from 'mptoast'export default {components: {mptoast},data () {return {}},methods: {showToast () {this.$mptoast('我是提示信息')},} } </script> 復(fù)制代碼

使用起來還是蠻簡單的

二，用promise封裝異步請求函數(shù) 在小程序的環(huán)境下面，要想發(fā)送一個(gè)外部請求，我們只能使用小程序官方提供的wx.request方法， 但是該方法的代碼風(fēng)跟跟Jquery年代的Ajax一樣，都散靠回調(diào)來處理請求響應(yīng)，如果有很多層回調(diào)， 就會有很多層嵌套，這讓我們這些平時(shí)被async-await慣壞的人怎么接受？

所以，建完基本項(xiàng)目，我們要做的第一件事，就是用wx.request自己封裝一個(gè)基于promise的異步請求方法。 我們先來看一下 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)} }) 復(fù)制代碼

可以看到，每次請求都要發(fā)送一大堆的東西，重點(diǎn)少這些東西里面，很可能對于一個(gè)項(xiàng)目來說， 絕大部分都是固定不變的，那這樣，不是冗余了么。

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

我們分析一下，第一個(gè)參數(shù)是url,也就是我們請求的地址，這個(gè)應(yīng)該是每次都不一樣的，但是，不一樣的應(yīng)該也只是url的最后一部分， 接口名稱的位置不一樣，前面的服務(wù)器地址一般都是一樣的，例如http://www.abc.com/api/member/login 對于同一個(gè)項(xiàng)目的所有接口 服務(wù)器地址http://www.abc.com/api/應(yīng)該都是一樣的，不一樣的只是后媽的接口名稱member/login, 那我們可以把url拆分成 服務(wù)器地址 + 接口名稱，這樣做也方便后期上線的時(shí)候，切換服務(wù)器地址。

第二個(gè)參數(shù)是請求的參數(shù)，請求的參數(shù)應(yīng)該是每次都不一樣的，所以這個(gè)我們就不做修改（事實(shí)上實(shí)際應(yīng)用中， 經(jīng)常有可能出現(xiàn)需要每個(gè)接口都帶一個(gè)token的，我們也可以在這里統(tǒng)一加上去，不過這里就不做深入）

第三個(gè)參數(shù)是 請求頭，這個(gè)一般同一個(gè)項(xiàng)目里面，這些都是一樣的，所以我們就寫死。 這里還有一個(gè)參數(shù)method請求方法， 這里因?yàn)槭褂媚J(rèn)值GET，所以就沒列出，我們這邊需要做設(shè)置，因?yàn)楝F(xiàn)在前后分離的模式，現(xiàn)在基本上大部分都是POST請求，所以我們這邊也寫死成method:'POST'

最后一個(gè)就是處理請求結(jié)果回調(diào)函數(shù)，示例里面只有一個(gè)請求成功的回調(diào)，其實(shí)我們應(yīng)該再加一個(gè)請求實(shí)例的處理函數(shù)， fail，而我們封裝這個(gè)函數(shù)的重點(diǎn)，就是要用promise來處理這兩個(gè)回調(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 // 拼接完整的urldata: bodymethod:'POST',header: {'content-type': 'application/json'},success(res) {resolve(res.data) // 把返回的數(shù)據(jù)傳出去},fail(ret) {reject(ret) // 把錯(cuò)誤信息傳出去}})}) } 復(fù)制代碼

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

import {post} from '/src/utils/requestMethod.js' // 需要注意的是，這行代碼必須要在async修飾的函數(shù)里面才能正確調(diào)用 let res = await post('member/login',{name:myname}) 復(fù)制代碼

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

import {post} from '/src/utils/requestMethod.js' Vue.prototype.$post = post 復(fù)制代碼

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

// 這行代碼同樣需要在async修飾的函數(shù)里面才能正確調(diào)用 let res = await this.$post('member/login',{name:myname}) 復(fù)制代碼

怎么樣？是不是比原生的方便很多呢？

當(dāng)然，跑起來以后，你可能還會遇到各種問題，這里我有對我自己遇到的問題做了一些總結(jié) 美團(tuán)小程序框架mpvue蹲坑指南，希望對你有幫助, 還有官方文檔也是很不錯(cuò)的哦

總結(jié)

以上是生活随笔為你收集整理的美团小程序框架mpvue入门教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。