記一次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() 來獲取當前小程式開啟的頁面的所有頁面棧資訊，文件是這麼寫的，
打印出來該結果，可以清晰的看到頁面棧的相關資訊，包括頁面路徑以及頁面引數
當我們開啟多個物件的時候，這個頁面結果也會有多條。 在實際開發中，我會碰到這樣一個場景，在使用者未登陸的情況下會記錄下當前使用者操作的頁面，自動跳轉登陸頁，待使用者登陸成功後自動跳回上一個未登陸的頁面，這個時候就需要通過這個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官網，我們知道
這時候當我們需要動態設定一系列樣式給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使用的相關問題
- v-show做到的只是切換css樣式屬性顯隱
- 對元素不支援
- 對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才可以
好了，差不多了，快想不出來還碰上什麼問題了~~~~ 第一次發表文章，不喜輕噴...
