美團小順序框架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蹲坑指南，願望對你有協助,
另有官方文檔也是很不錯的哦
