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

2019-11-19 13:47:59

字體：大中小

來源：轉載

供稿：網友

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. *///封裝httpApiimport request from './httpUtil'const host = "https://XXX.cn"const api = { // test地址 authorList:() => request.get(`${host}/index/list_author_recommend.html`)}// export default apiexport 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'