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

Sneaker_vincent發表於2019-02-27
Vue筆記

通過一個月的小程式開發，記錄下一點點小心得······

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

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

1、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再次觸發。

2、mpvue中路由引數獲取

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

3、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')
複製程式碼

獲取到引數進行資料頁面初始化

4、頁面資料在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)
      }
    }
  }
})
複製程式碼

5、如何檢查小程式版本更新進行更新版本？

官方文件傳送門=> 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: '請在微信 “發現-小程式” 頁刪除當前小程式，重新通過小程式名稱搜尋開啟使用最新版本',
                })
            })
        }
    })
}
複製程式碼

6、小程式獲取頁面棧資訊和引數

官網提供了 getCurrentPages()來獲取當前小程式開啟的頁面的所有頁面棧資訊，文件是這麼寫的，

記一次mpvue開發完整小程式相關筆記
列印出來該結果，可以清晰的看到頁面棧的相關資訊，包括頁面路徑以及頁面引數

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

當我們開啟多個物件的時候，這個頁面結果也會有多條。 在實際開發中，我會碰到這樣一個場景，在使用者未登陸的情況下會記錄下當前使用者操作的頁面，自動跳轉登陸頁，待使用者登陸成功後自動跳回上一個未登陸的頁面，這個時候就需要通過這個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;
}
複製程式碼

7、mpvue動態設定樣式Style

通過Mpvue官網，我們知道

記一次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'
        })
    }
}
複製程式碼

8、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: "分享失敗！"
        });
      }
    };
  }
複製程式碼

9、關於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直接銷燬元件。

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

注意

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

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

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

新增的頁面需要重新通過npm run build 命令來生成對應的mpvue的檔案目錄，重新npm run dev才可以

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

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

相關文章