美團小程序框架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.jsonconfig: {// 頁面前帶有 ^ 符號的，會被編譯成首頁，其他頁面可以選填，我們會自動把 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 // 拼接完整的urldata: bodymethod:'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蹲坑指南，希望對你有幫助, 還有官方文檔也是很不錯的哦

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。