前段時間剛寫完一個mpvue的小程序，現在得閑必須趕緊記錄和總結一下，不然很多東西又要忘了

我是比較熟悉vue的語法，但是也猶豫過是用原生還是用mpvue，因為那時候原生小程序已經相當成熟而mpvue才剛出來（踩坑和填坑的前人還很少）

所以我學習了幾天原生的框架和語法，果斷選擇了mpvue，真的是沒有對比就沒有傷害，對比原生體驗不要太好

mpvue是一個使用 Vue.js 開發小程序的前端框架，他是將我們寫的vue文件重新編譯成wxml等文件，最后的底層實現還是用的小程序語法，所以原生小程序語法也是比較重要的，而且像很多下拉刷新，到底部請求下一頁什么的等等很多地方也是要用到小程序api的，所以建議大家在入坑之前還是了解一些小程序語法比較好

附上官方文檔http://mpvue.com/#_1

項目配置

使用官方的5分鐘上手，生成一個基本框架，后來開發也沒有手動修改過他的配置

用到了4個插件

mpvue-weui? ? ui庫，相當方便輕量好使

官網地址：http://kuangpf.com/mpvue-weui/#/

mpvue-toast??一個基于mpvue的簡單彈窗組件

因為mpvue目前還不支持全局的組件，所以沒有辦法像vue組件引入一次就能在所有頁面使用，但是mpvue團隊已經在考慮新增全局組件功能了

github地址：https://github.com/linrui1994/mpvue-toast

sass? 不多介紹

全局安裝：npm install sass-loader node-sass --save-dev

在style節點加上lang=”scss”，這樣就可以愉快地使用sass進行開發了

mpvue-router-patch? ?在mpvue 中使用 vue-router 兼容的路由寫法

當知道mpvue不支持vue-router的時候我還是非常難受，還好mpvue團隊后面發布了這個插件，非常簡單好用

github地址：https://github.com/F-loat/mpvue-router-patch

接下來的3個插件我沒有用過但是和mpvue-router-patch一樣是mpvue團隊發布的，感覺應該也不差，也推薦給大家如果需要可以花時間了解一下

mpvue-echarts? ??適用于 Mpvue 的 ECharts 組件

github地址：https://github.com/F-loat/mpvue-echarts

微信小程序富文本解析組件??適用于 Mpvue 的微信小程序富文本解析自定義組件

github地址：https://github.com/F-loat/mpvue-wxParse

mpvue-entry自動生成各頁面的入口文件??集中式頁面配置，自動生成各頁面的入口文件，優化目錄結構，支持新增頁面熱更新

github地址：https://github.com/F-loat/mpvue-entry

ajax請求封裝拿走不謝

let urlPath = '' // 項目的域名 export function post(url, data) {wx.showLoading({title: '努力加載中',}) // 由于微信不會保存后端用于登陸驗證的cookie，這里需要自己從登陸返回的數據里取到cookie，然后本地緩存，請求時在header里帶上cookielet header = {} url === 'user/loginworker' // 通過傳進來的url判斷是否是登陸頁? header = {} : header = {'content-type': 'application/x-www-form-urlencoded','cookie': wx.getStorageSync("sessionid")} return new Promise((resolve, reject) => {wx.request({url: urlPath url,data: data,method: 'get',header: header, success(res) {console.log(res)if (res.statusCode === 200) {if (res.data === 9999) { // 與后端的后端返回9999表示cookie失效wx.showModal({content: '登陸超時請重新登陸',showCancel: false,success: function (res) {if (res.confirm) {wx.navigateTo({url: '../../pages/login/main',})}}})} else if (res.data.code && res.data.code !== 200) { // 若返回coode碼且不等于200表示傳入參數有問題res.message = res.data.message, reject(res)} else resolve(res)// 存儲cookieres.data.message === '登錄成功。' ? wx.setStorageSync("sessionid", res.header["Set-Cookie"]) : ""}else {res.message = '服務器錯誤請求失敗'reject(res)}wx.hideLoading()}, fail(err) {err.message = '請求超時請稍后再試'reject (err)wx.hideLoading()}})}) }

生命周期鉤子

created是vue的生命周期在mpvue里所有頁面的created函數會在項目加載的時候被一起調用，可用性不大，可以使用onShow()代替，但是onShow()只有在隱藏又顯示后才會顯示,也就是第一次加載不會執行

created() {console.log('created')},mounted() {console.log('mounted')},onLoad() {console.log('onLoad')},onShow() {console.log('onShow')},onUnload() {console.log('onUnload')},onHide() {console.log('onHide')},

頁面跳轉后并沒有銷毀頁面實例

比如一個搜索頁面，頁面第一次進來所有的數據都是空的，但你搜索一次之后，input框就有值了，這個時候再跳轉到其他頁面或者返回之后再進入這個頁面那個值依然存在，頁面跳轉后并沒有銷毀頁面實例，而是將其推入頁面棧中，所以會保存之前的舊的數據，目前為止看到的比較統一的解決辦法就是：在onShow()或者onLoad()手動清空

關于微信直播

這個小程序需要引入監控相當于是直播功能，這個組件也是有點坑

Live-player組件本身只能播放，如果想要在組件上加功能，像什么全屏靜音播放暫停之類的功能需要使用wx.createLivePlayerContext()方法，而且由于live-player層級是最高的，如果你需要在組件上加功能比如點一下全屏再點下退出全屏或者加css樣式，你必須寫在 cover-view cover-image上面，直接加在live-player上是沒用的

<live-player id='liveInfo' src="" mode="live" autoplay='false' @bindstatechange="statechange" binderror="error"><cover-image @click="requestFullScreen"></cover-image> </live-player>

你以為這樣就完了嘛，不，如果你有一個直播列表，比如一個屏幕同時有一個以上的live-player組件那么你全屏的時候就會發現其余的組件因為層級的原因全部覆蓋在你全屏的那個組件之上

解決辦法：全屏是v-if隱藏其余的組件，退出時再顯示

如有不足、需要改善或者還能優化的地方歡迎指出不勝感激，歡迎留言交流? (′▽`???)**

總結

以上是生活随笔為你收集整理的mpvue小程序以及微信直播踩坑总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。