嘗試使用markdown寫一篇文章，只關注內容，排版交給工具。
這篇文章主要熟悉markdown快捷鍵和介紹mpvue開發小程式。
開發了一款簡單的原生的微信小程式之後，覺得使用美團開源的mpvue來開發小程式，這使得不熟悉小程式語法的程式設計師不用花過多精力去熟悉小程式官方文件，使用vue語法來進行開發。
mpvue簡介
mpvue 是一個使用 Vue.js 開發小程式的前端框架（美團的開源專案）。框架基於 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其可以執行在小程式環境中，從而為小程式開發引入了整套 Vue.js 開發體驗。
demo地址
step1: 檢視文件快速構建simple mpvue project
1 # 全域性安裝 vue-cli
2 $ npm install --global vue-cli
3
4 # 建立一個基於 mpvue-quickstart 模板的新專案
5 $ vue init mpvue/mpvue-quickstart my-project
6
7 # 安裝依賴
8 $ cd my-project
9 $ npm install
10 # 啟動構建
11 $ npm run dev
複製程式碼這裡我取消了vuex(狀態管理)和ESlint(程式碼檢查)，因為個人不喜歡檢測空格和;的規範，你可以根據你的需求配置。
step2:修改程式碼，微信開發者工具開啟dist目錄，檢視是否發生改變。
step3:封裝api和http請求（這裡使用的是flyio，除了請求取消，其他功能基本相似axios,大小隻有4kb,是axios的三分之一）
package.json加入依賴或者npm install flyio
1 var Fly=require("../lib/wx") //wx.js為您下載的原始碼檔案
2 // var Fly=require("flyio/dist/npm/wx") //npm引入方式
3 var fly=new Fly(); //建立fly例項
4
5 //新增攔截器
6 fly.interceptors.request.use((config,promise)=>{
7 //給所有請求新增自定義header
8 config.headers["X-Tag"]="flyio";
9 return config;
10 })
11 //配置請求基地址
12 fly.config.baseURL="https://wendux.github.io/"
13 ...
14
15 Page({
16 //事件處理函式
17 bindViewTap: function() {
18 //呼叫
19 fly.get("http://10.10.180.81/doris/1/1.0.0/user/login",{xx:6}).then((d)=>{
20 //輸出請求資料
21 console.log(d.data)
22 //輸出響應頭
23 console.log(d.header)
24 }).catch(err=>{
25 console.log(err.status,err.message)
26 })
27 ...
28 })
29 })
複製程式碼step4: 將flyio封裝的請求和專案api作為元件庫掛載在原型物件上，這樣不用每個vue單頁面都import 封裝的js,直接使用this.$http呼叫方法。(flyio官方文件)
httpUtil.js
點選展開程式碼
var Fly=require("../lib/wx") //wx.js為您下載的原始碼檔案
2 // var Fly=require("flyio/dist/npm/wx") //npm引入方式
3 var fly=new Fly(); //建立fly例項
4
5 //新增攔截器
6 fly.interceptors.request.use((config,promise)=>{
7 //給所有請求新增自定義header
8 config.headers["X-Tag"]="flyio";
9 return config;
10 })
11 //配置請求基地址
12 fly.config.baseURL="https://wendux.github.io/"
13 ...
14
15 Page({
16 //事件處理函式
17 bindViewTap: function() {
18 //呼叫
19 fly.get("http://10.10.180.81/doris/1/1.0.0/user/login",{xx:6}).then((d)=>{
20 //輸出請求資料
21 console.log(d.data)
22 //輸出響應頭
23 console.log(d.header)
24 }).catch(err=>{
25 console.log(err.status,err.message)
26 })
27 ...
28 })
29 })
複製程式碼apiUtil.js
點選展開程式碼
1 /**
2 * Created by yuchen on 2018/4/2.
3 */
4 //封裝httpApi
5 import request from './httpUtil'
6 const host = "https://XXX.cn"
7 const api = {
8 // test地址
9 authorList:() => request.get(`${host}/index/list_author_recommend.html`)
10 }
11
12 // export default api
13 export default { //作為元件庫(install)
14 install: function(Vue,name="$http") {//自定義名字(vue-resource也使用$http)
15 Object.defineProperty(Vue.prototype, name, { value: api });//將元件庫掛載在原型物件上
16 }
17 }
複製程式碼step5:vue元件(mpvue官方專案中就建立了card元件，這裡注意class需要寫在元件內部裡面，不然渲染不出來)
step6:頁面跳轉和傳參(這裡mpvue不支援vue-router)
使用微信的頁面跳轉方法，然後跳轉頁面使用this.$root.$mp.query獲取引數。
step7:引入weui,測試效果(根據你的需求引入UI庫，不支援elementUI，或者不使用)。
下載weui.css放入專案中，import引入css，如：import '../static/weui/weui.css'
彩彈：補充下使用mpvue需要注意的地方(具體參考官方文件)
1.新增頁面需要npm run dev重啟一下。
2.小程式裡所有的 BOM／DOM 都不能用，也就是說 v-html 指令不能用。
3.暫不支援在元件上使用 Class 與 Style 繫結，需要在元件內部書寫。
4.mpvue 可以支援小程式的原生元件，比如： picker,map 等，需要注意的是原生元件上的事件繫結，需要以 vue 的事件繫結語法來繫結，如 bindchange="eventName" 事件，需要寫成 @change="eventName"。
5.mpvue 建議使用 v-model.lazy 繫結方式以優化效能，此外 v-model 在老基礎庫下輸入框輸入時可能存在游標重設的問題。
6.寫頁面跳轉時候傳入動態引數，需要寫成:url，如：<navigator url="'../test/main?id='+id hover-class="none""。
7.通過 this.$root.$mp.query 進行獲取小程式在 page onLoad 時候傳遞的 options。通過 this.$root.$mp.appOptions 進行獲取小程式在 app onLaunch/onShow 時候傳遞的 options。
8.使用this.$root.$mp.query獲取引數需要在monted中獲取，在created中會報Cannot read property 'query' of undefined 。