mpvue小程序開發

查閱資料，看官方文檔，知道mpvue是一個使用 Vue.js 開發小程序的前端框架（美團的開源項目）。框架基於 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其能夠運行在小程序環境中，從而爲小程序開發引入了整套 Vue.js 開發體驗。

mpvue你可使用你熟悉的vue框架語法，雙向綁定讓你不用再使用wx的this.setData了，你可使用npm方便的引入第三方了，真的是貧窮限制了個人想象力啊。我的感受mpvue比wepy更加簡單，上手更加方便，mpuve五分鐘教程快速構建。

 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

須要注意的是：我在

npm install --global vue-cli

安裝時。遇到了報錯Error: EACCES: permission denied, access '/usr/local/lib/node_modules/vue-cli/node_modules/asn1'

很明顯這個錯誤由於權限不夠。

解決辦法：運行命令前加sudo 在管理員權限之下執行。

建立新項目時我選擇了Vuex，可是ESlint(代碼檢查)沒有選。不喜歡檢測空格和;的規範

完成建立新項目後用微信開發者工具打開頁面是這樣的

封裝api和http請求（這裏使用的是flyio，除了請求取消，其餘功能基本類似axios,大小隻有4kb,是axios的三分之一）

參見官網連接https://wendux.github.io/dist/#/doc/flyio/readme

使用fiyio的方法是：
package.json加入依賴

或者npm install flyio

下載以後咱們會在ppackage.json中看到

在微信小程序中引入flyio

var Fly=require("../lib/wx") //wx.js爲您下載的源碼文件
// var Fly=require("flyio/dist/npm/wx") //npm引入方式
var fly=new Fly(); //建立fly實例

//添加攔截器
fly.interceptors.request.use((config,promise)=>{
    //給全部請求添加自定義header
    config.headers["X-Tag"]="flyio";
    return config;
})
//配置請求基地址
fly.config.baseURL="https://wendux.github.io/"
...

Page({
  //事件處理函數
  bindViewTap: function() {
    //調用
    fly.get("http://10.10.180.81/doris/1/1.0.0/user/login",{xx:6}).then((d)=>{
      //輸出請求數據
      console.log(d.data)
      //輸出響應頭
      console.log(d.header)
    }).catch(err=>{
      console.log(err.status,err.message)
    })
    ...
  })
})

若是你是npm添加使用

var Fly=require("flyio/dist/npm/wx") //npm引入方式

使用這種方式

接下來：將flyio封裝的請求和項目api做爲組件庫掛載在原型對象上，這樣不用每一個vue單頁面都import 封裝的js,直接使用this.$http調用方法。

掛載的方式以下：

補充下使用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 。