mpvue構建小程序(步驟+地址)

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

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

項目git地址：mpvue-demo （代碼註釋很全，使用mpvue很簡單構建一個小程序，拓展）

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

 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 })

View Code

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 }

View Code

 

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 。

 

-----原創文章，©版權全部，轉載請註明標明出處：http://www.cnblogs.com/doinbean