本篇文章給大家分享的是有關(guān)使用mpvue怎么構(gòu)建小程序，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、重慶小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了浦口免費(fèi)建站歡迎大家使用！

查看文檔快速構(gòu)建simple mpvue project

# 全局安裝 vue-cli
$ npm install --global vue-cli

# 創(chuàng)建一個(gè)基于 mpvue-quickstart 模板的新項(xiàng)目
$ vue init mpvue/mpvue-quickstart my-project

# 安裝依賴
$ cd my-project
$ npm install
# 啟動(dòng)構(gòu)建
$ npm run dev

這里我取消了vuex(狀態(tài)管理)和ESlint(代碼檢查)，因?yàn)閭€(gè)人不喜歡檢測(cè)空格和;的規(guī)范，你可以根據(jù)你的需求配置。

step2:修改代碼，微信開(kāi)發(fā)者工具打開(kāi)dist目錄，查看是否發(fā)生改變。

step3:封裝api和http請(qǐng)求（這里使用的是flyio，除了請(qǐng)求取消，其他功能基本相似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(); //創(chuàng)建fly實(shí)例

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

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

step4: 將flyio封裝的請(qǐng)求和項(xiàng)目api作為組件庫(kù)掛載在原型對(duì)象上，這樣不用每個(gè)vue單頁(yè)面都import 封裝的js,直接使用this.$http調(diào)用方法。(flyio官方文檔)

httpUtil.js

var Fly=require("../lib/wx") //wx.js為您下載的源碼文件
// var Fly=require("flyio/dist/npm/wx") //npm引入方式
var fly=new Fly(); //創(chuàng)建fly實(shí)例

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

Page({
 //事件處理函數(shù)
 bindViewTap: function() {
  //調(diào)用
  fly.get("http://10.10.180.81/doris/1/1.0.0/user/login",{xx:6}).then((d)=>{
   //輸出請(qǐng)求數(shù)據(jù)
   console.log(d.data)
   //輸出響應(yīng)頭
   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 { //作為組件庫(kù)(install)
 install: function(Vue,name="$http") {//自定義名字(vue-resource也使用$http)
  Object.defineProperty(Vue.prototype, name, { value: api });//將組件庫(kù)掛載在原型對(duì)象上
 }
}

step5:vue組件(mpvue官方項(xiàng)目中就創(chuàng)建了card組件，這里注意class需要寫(xiě)在組件內(nèi)部里面，不然渲染不出來(lái))

step6:頁(yè)面跳轉(zhuǎn)和傳參(這里mpvue不支持vue-router)

使用微信的頁(yè)面跳轉(zhuǎn)方法，然后跳轉(zhuǎn)頁(yè)面使用this.$root.$mp.query獲取參數(shù)。

step7:引入weui,測(cè)試效果(根據(jù)你的需求引入U(xiǎn)I庫(kù)，不支持elementUI，或者不使用)。

下載weui.css放入項(xiàng)目中，import引入css，如：import '../static/weui/weui.css'

補(bǔ)充下使用mpvue需要注意的地方(具體參考官方文檔)

1.新增頁(yè)面需要npm run dev重啟一下。

2.小程序里所有的 BOM／DOM 都不能用，也就是說(shuō)v-html指令不能用。

3.暫不支持在組件上使用 Class 與 Style 綁定，需要在組件內(nèi)部書(shū)寫(xiě)。

4.mpvue 可以支持小程序的原生組件，比如：picker,map等，需要注意的是原生組件上的事件綁定，需要以vue的事件綁定語(yǔ)法來(lái)綁定，如bindchange="eventName"事件，需要寫(xiě)成@change="eventName"。

5.mpvue建議使用v-model.lazy綁定方式以優(yōu)化性能，此外v-model在老基礎(chǔ)庫(kù)下輸入框輸入時(shí)可能存在光標(biāo)重設(shè)的問(wèn)題。

6.寫(xiě)頁(yè)面跳轉(zhuǎn)時(shí)候傳入動(dòng)態(tài)參數(shù)，需要寫(xiě)成:url，如：

7.通過(guò)this.$root.$mp.query進(jìn)行獲取小程序在 page onLoad 時(shí)候傳遞的 options。通過(guò)this.$root.$mp.appOptions進(jìn)行獲取小程序在 app onLaunch/onShow 時(shí)候傳遞的 options。

8.使用this.$root.$mp.query獲取參數(shù)需要在monted中獲取，在created中會(huì)報(bào)Cannot read property 'query' of undefined 

以上就是使用mpvue怎么構(gòu)建小程序，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。