記一次mpvue開發完整小程序相關筆記

經過一個月的小程序開發，記錄下一點點當心得······

先給各位大佬請安了~~~~~~

一、wx.previewImage預覽圖片 關閉後會再次觸發onShow方法：

在全局變量裏定義一個全局變量開關來控制，調用預覽圖片的時候將其取反再也不觸發onShow的事件

data(){
    return {
        isShow:true
    }
},
onShow(){
if(this.isShow){
    ...處理事件
}
else{
    this.isShow = true; 
    return;
}
}
複製代碼

調用wx.previewImage()方法前 ，this.isShow = false; 思路就是用一個全局變量巧妙的阻止預覽圖片後再次執行，能夠看出wx.previewImage()是跳到一個新的頁面進行圖片預覽，關閉後又返回了上一個頁面，從而致使了onShow再次觸發。

二、mpvue中路由參數獲取

在接收頁面在頁面生命週期函數的onShow或者onLoad函數裏經過 this.$root.$mp.query.參數名 進行獲取

三、mpvue中路由跳轉傳參

(1)、經過

wx.navigateTo({
      url: '/test/test?params='+paramsStr
    })
複製代碼

由於url的限制，當須要傳遞的參數過多的時候會出現被截取過濾丟失的狀況，因此在這種狀況下須要經過encodeURIComponent()把全部的參數字符串編碼後進行傳遞，在接收頁面在頁面生命週期函數的onShow或者onLoad函數裏經過this.$root.$mp.query.params獲取到上一個頁面傳遞的參數。再將該參數經過decodeURIComponent()方法進行解碼處理，便可獲得對應的參數hash值。 這裏順帶把參數字符串拆分紅對象的方法貼出來，方便你們直接使用。

// 請求參數序列化
function formatParams(params) {
    let str = decodeURIComponent(params);
    let paras = {};
    str = str.split('&');
    for (let n in str) {
        let name = str[n].split('=')[0];
        let val = str[n].split('=')[1];
        paras[name] = val;
    }
    return paras;
}
複製代碼

eg:params = a=1&b=2&c=3

//傳遞
wx.navigateTo({
      url: '/test/test?params='+encodeURIComponent(params)
    })
複製代碼

//接收
onShow(){
let params = this.$root.$mp.query.params;
let {a,b,c } =  formatParams(params)
//到這裏就能夠拿到上一個頁面傳遞的多個參數了~奈斯~
}
複製代碼

PS:若是想要傳遞對象數據，則須要經過JSON.stringify()對數據進行處理一下

（2）、經過數據緩存進行數據的頁面傳遞

//傳遞

try{
    wx.setStorage({
        key:'',
        data:{...},
        success:()=>{
            //緩存成功 ..進行跳轉
            wx.navigatorTo({
            url:'/pages/test/main'
            })
        }
    })
}
catch(e){}
複製代碼

//接收 在onShow或者onLoad頁面生命函數裏經過

wx.getStorage({
key:'',
success:()=>{
//接收成功
//進行數據頁面初始化
}
})
複製代碼

或者

wx.getStorageSync('key')
複製代碼

獲取到參數進行數據頁面初始化

四、頁面數據在unLoad以後沒有被初始化

經過在main.js裏經過Vue.mixin對數據進行恢復初始化

Vue.mixin({
  onUnload() {
    if (typeof this.$options.data === 'function') {
      try {
        Object.assign(this.$data, this.$options.data());
      } catch (e) {
        console.log(e)
      }
    }
  }
})
複製代碼

五、如何檢查小程序版本更新進行更新版本？

官方文檔傳送門=> developers.weixin.qq.com/miniprogram… 基本上官方文檔的公共方法我都會作一層封裝，包括wx.showToast等方法均會進行一個處理 檢查版本更新也是同樣 這邊也是參考網上的結合本身封裝的代碼進行一個整合

/* 小程序監聽更新信息 */
export function checkUpdateVersion() {
    //建立 UpdateManager 實例
    const updateManager = wx.getUpdateManager();
    //檢測小程序版本更新
    updateManager.onCheckForUpdate((res) => {
        // 請求完新版本信息的回調
        if (res.hasUpdate) {
            //監聽小程序有版本更新事件
            updateManager.onUpdateReady(() => {
                showConfirm({
                title: '更新提示',
                content: '新版本已經準備好，是否重啓應用？',
                ok(res) {
                    // 新的版本下載完畢，調用 applyUpdate 應用新版本並重啓
                    updateManager.applyUpdate();
                }
                })
            })
            //監聽小程序更新失敗事件
            updateManager.onUpdateFailed(() => {
                // 新版本下載失敗
                showConfirm({
                title: '已經有新版本咯~',
                content: '請在微信 「發現-小程序」 頁刪除當前小程序，從新經過小程序名稱搜索打開使用最新版本',
                })
            })
        }
    })
}
複製代碼

---

六、小程序獲取頁面棧信息和參數

官網提供了 getCurrentPages()來獲取當前小程序打開的頁面的全部頁面棧信息，文檔是這麼寫的，

打印出來該結果，能夠清晰的看到頁面棧的相關信息，包括頁面路徑以及頁面參數

當咱們打開多個對象的時候，這個頁面結果也會有多條。 在實際開發中，我會碰到這樣一個場景，在用戶未登錄的狀況下會記錄下當前用戶操做的頁面，自動跳轉登錄頁，待用戶登錄成功後自動跳回上一個未登錄的頁面，這個時候就須要經過這個API進行操做處理了。 經過處理，分享一個能夠獲取當前全部打開的頁面的任一頁面的棧信息。

/* 
獲取頁面棧信息和參數
參數 page 默認獲取當前頁面 =1
*/
export function getPagesInfo(page = 1) {
  let routeHistory = getCurrentPages();

  let length = routeHistory.length;
  let route = routeHistory[length - page]['route']

  let params = routeHistory[length - page]['options'];
  let url = '';
  let option = '';
  Object.keys(params).forEach(key => {
    option += `${key}=${params[key]}`;
  })
  url = `/${route}${option?'?'+option:''}`;
  url = encodeURIComponent(url)

  return url;
}
複製代碼

七、mpvue動態設置樣式Style

經過Mpvue官網，咱們知道

這時候當咱們須要動態設置一系列樣式給Dom渲染的時候，就出現了問題，因此須要多一步對styleObject進行處理。 這裏也分享一下解決方案!

export function styles(obj) {
  let stylesStr = '';
  for (let styleName in obj) {
    if (obj.hasOwnProperty(styleName)) stylesStr += `${styleName.replace(/([A-Z])/g, "-$1").toLowerCase()}:${px2rpx(obj[styleName])};`;
  }
  return stylesStr;
}

export function px2rpx(str) {
  if (/rpx/.test(str)) return str
  else if (/px/.test(str)) {
    let val = str.substring(0, str.indexOf('px'))
    return `${(val - 0) * 2}rpx`
  } else return str
}
複製代碼

eg: <div :style='styleObject'></div>
//在之前，可能咱們只須要這樣
computed:{
    styleObject(){
        return {
            backgroundColor:'#fff',
            color:'#000'
        }
    }
}
//在mpvue中，這是不被支持的，因此咱們須要經過上面的函數多一層轉換，轉成樣式字符串才能夠。
//更改以下
computed:{
    styleObject(){
        return styles({
            backgroundColor:'#fff',
            color:'#000'
        })
    }
}
複製代碼

八、mpvue中設置默認轉發分享信息

一樣在main.js中經過Vue.mixin()裏經過API裏的onShareAppMessage()來設置分享

//這裏能夠默認一套全部頁面的默認分享信息
  onShareAppMessage(e) {
    return {
      title: "***商城",
      path: "/pages/home/main",
      imageUrl: ../../圖片路徑,
      success: res => {
        showToast({
          title: "分享成功！",
          icon: "success"
        });
      },
      fail: res => {
        showToast({
          title: "分享失敗！"
        });
      }
    };
  }
複製代碼

九、關於v-show使用的相關問題

1. v-show作到的只是切換css樣式屬性顯隱
2. 對元素不支持
3. 對v-else不支持

在實際開發之中，很常常碰到一種狀況就是經過v-show來控制組件顯隱失效的問題，特別是直接對公共組件進行使用的時候，實際上已經直接建立了組件沒有達到預期的效果。

eg:

<template>
    <components v-show='show'></components>
</template>
複製代碼

這種時候，即便show是true組件也一樣會被建立出來，沒有辦法經過該變量來響應對應的顯示隱藏狀態。

最簡單粗暴的解決辦法就是用v-if來代替v-show直接銷燬組件。

十、經過npm run dev 編譯的時候，部分頁面跳轉提示不存在頁面

注意

檢查dist/app.json 是否與 src/main.json保持一致，保險方法直接copy一下main.json裏的到app.json裏便可

第一次編譯的時候發現找不到tabBar圖標，依葫蘆畫瓢把src/assets下的圖片拷貝到dist/assets便可

十一、新增頁面沒有被編譯出來

新增的頁面須要從新經過npm run build 命令來生成對應的mpvue的文件目錄，從新npm run dev才能夠

好了，差很少了，快想不出來還碰上什麼問題了~~~~ 第一次發表文章，不喜輕噴...

關注 前端公蝦米,更多前端乾貨等你喲~