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

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

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

好了，我們進(jìn)入主題，首先，請?jiān)试S引用一下美團(tuán)官方對(duì)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)歷，相信你會(huì)對(duì)這個(gè)過程非常熟悉，甚至你都不需要安裝其他工具，
直接用vue-cli創(chuàng)建項(xiàng)目，如果你一起沒安裝過vue-cli，那么你要先運(yùn)行一下命令

npm install --g vue-cli

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

vue init mpvue/mpvue-quickstart test-wxapp

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

cd test-wxapp
npm i

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

npm run dev

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

到此為止，一個(gè)基本的項(xiàng)目就完成了，但是，本文的目的不是讓你學(xué)會(huì)搭一個(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.json
  config: {
    // 頁面前帶有 ^ 符號(hào)的，會(huì)被編譯成首頁，其他頁面可以選填，我們會(huì)自動(dòng)把 webpack entry 里面的入口頁面加進(jìn)去
    pages: ["pages/logs/main", "^pages/index/main"],
    window: {
      backgroundTextStyle: "light",
      navigationBarBackgroundColor: "#fff",
      navigationBarTitleText: "WeChat",
      navigationBarTextStyle: "black"
    }
  }
}

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

我們先把/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ǔ)骨架

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

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

一、先用mptoast組件代替官方提供的wx.showToast, wx.showToast諸多不便我就不說了，關(guān)鍵是還有坑
小程序基礎(chǔ)庫比較低的，不管你怎么設(shè)置，總是會(huì)在彈窗里面加一個(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

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

import mpvueToastRegistry from "mptoast/registry"
mpvueToastRegistry(Vue)

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

使用起來還是蠻簡單的

二，用promise封裝異步請求函數(shù)
在小程序的環(huán)境下面，要想發(fā)送一個(gè)外部請求，我們只能使用小程序官方提供的wx.request方法，
但是該方法的代碼風(fēng)跟跟Jquery年代的Ajax一樣，都散靠回調(diào)來處理請求響應(yīng)，如果有很多層回調(diào)，
就會(huì)有很多層嵌套，這讓我們這些平時(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ā)送一大堆的東西，重點(diǎn)少這些東西里面，很可能對(duì)于一個(gè)項(xiàng)目來說，
絕大部分都是固定不變的，那這樣，不是冗余了么。

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

我們分析一下，第一個(gè)參數(shù)是url,也就是我們請求的地址，這個(gè)應(yīng)該是每次都不一樣的，但是，不一樣的應(yīng)該也只是url的最后一部分，
接口名稱的位置不一樣，前面的服務(wù)器地址一般都是一樣的，例如http://www.abc.com/api/member/login 對(duì)于同一個(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    // 拼接完整的url
              data: body
              method:"POST",
              header: {
                  "content-type": "application/json"
              },
              success(res) {
                resolve(res.data)  // 把返回的數(shù)據(jù)傳出去
              },
              fail(ret) {
                reject(ret)   // 把錯(cuò)誤信息傳出去
              }
            })
    })
}

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

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

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

import {post} from "/src/utils/requestMethod.js"
Vue.prototype.$post = post

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

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

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

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