怎樣用mpvue建構小程式

這次帶給大家怎樣用mpvue建構小程序，用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

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project
# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev

這裡我取消了vuex(狀態管理)和ESlint(程式碼檢查)，因為個人不喜歡偵測空格和;的規範，你可以依照你的需求設定。

step2:修改程式碼，微信開發者工具開啟dist目錄，查看是否發生變更。

step3:封裝api和http請求（這裡使用的是flyio，除了請求取消，其他功能基本上相似axios,大小只有4kb,是axios的三分之一）

package. json加入依賴或npm install 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)
  })
  ...
 })
})

step4: 將flyio封裝的請求和項目api作為元件庫掛載在原型物件上，這樣不用每個vue單頁都import 封裝的js,直接使用this .$http呼叫方法。 (flyio官方文檔)

httpUtil.js

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

apiUtil.js

/**
 * Created by yuchen on 2018/4/2.
 */
//封装httpApi
import request from './httpUtil'
const host = "https://XXX.cn"
const api = {
 // test地址
 authorList:() => request.get(`${host}/index/list_author_recommend.html`)
}
// export default api
export default { //作为组件库(install)
 install: function(Vue,name="$http") {//自定义名字(vue-resource也使用$http)
  Object.defineProperty(Vue.prototype, name, { value: api });//将组件库挂载在原型对象上
 }
}

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，如：

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 。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Vue.js實作表格增刪步奏詳解

#怎麼快速解決jQuery發請求傳輸中文參數亂碼

以上是怎樣用mpvue建構小程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！