mpvue小程式以及微信直播踩坑總結

沒事兒發表於2018-09-03
Vue

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

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

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

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

附上官方文件mpvue.com/#_1

專案配置

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

用到了4個外掛

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

官網地址：kuangpf.com/mpvue-weui/…

mpvue-toast  一個基於mpvue的簡單彈窗元件

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

github地址：github.com/linrui1994/…

sass  不多介紹

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

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

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

當知道mpvue不支援vue-router的時候我還是非常難受，還好mpvue團隊後面釋出了這個外掛，非常簡單好用

github地址：github.com/F-loat/mpvu…

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

mpvue-echarts    適用於 Mpvue 的 ECharts 元件

github地址：github.com/F-loat/mpvu…

微信小程式富文字解析元件  適用於 Mpvue 的微信小程式富文字解析自定義元件

github地址：github.com/F-loat/mpvu…

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

github地址：github.com/F-loat/mpvu…

ajax請求封裝拿走不謝

let urlPath = '' // 專案的域名
export function post(url, data) {
  wx.showLoading({
    title: '努力載入中',
  })
// 由於微信不會儲存後端用於登陸驗證的cookie，這裡需要自己從登陸返回的資料裡取到cookie，然後本地快取，請求時在header裡帶上cookie
  let 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)
            // 儲存cookie
          res.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隱藏其餘的元件，退出時再顯示

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

相關文章