通過一個月的小程序開發(fā)，記錄下一點點小心得······
先給各位大佬請安了~~~~~~
1、wx.previewImage預覽圖片 關閉后會再次觸發(fā)onShow方法：
在全局變量里定義一個全局變量開關來控制，調(diào)用預覽圖片的時候將其取反不再觸發(fā)onShow的事件
data(){
return {
isShow:true
}
},
onShow(){
if(this.isShow){
...處理事件
}
else{
this.isShow = true;
return;
}
}
調(diào)用wx.previewImage()方法前 ，this.isShow = false;
思路就是用一個全局變量巧妙的阻止預覽圖片后再次執(zhí)行，可以看出wx.previewImage()是跳到一個新的頁面進行圖片預覽，關閉后又返回了上一個頁面，從而導致了onShow再次觸發(fā)。
2、mpvue中路由參數(shù)獲取
在接收頁面在頁面生命周期函數(shù)的onShow或者onLoad函數(shù)里通過 this.$root.$mp.query.參數(shù)名 進行獲取
3、mpvue中路由跳轉傳參
(1)、通過
wx.navigateTo({
url: '/test/test?params='+paramsStr
})
因為url的限制，當需要傳遞的參數(shù)過多的時候會出現(xiàn)被截取過濾丟失的情況，所以在這種情況下需要通過encodeURIComponent()把所有的參數(shù)字符串編碼后進行傳遞，在接收頁面在頁面生命周期函數(shù)的onShow或者onLoad函數(shù)里通過this.$root.$mp.query.params獲取到上一個頁面?zhèn)鬟f的參數(shù)。再將該參數(shù)通過decodeURIComponent()方法進行解碼處理，即可得到對應的參數(shù)hash值。
這里順帶把參數(shù)字符串拆分成對象的方法貼出來，方便大家直接使用。
// 請求參數(shù)序列化
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)
//到這里就可以拿到上一個頁面?zhèn)鬟f的多個參數(shù)了~奈斯~
}
PS:如果想要傳遞對象數(shù)據(jù)，則需要通過JSON.stringify()對數(shù)據(jù)進行處理一下
（2）、通過數(shù)據(jù)緩存進行數(shù)據(jù)的頁面?zhèn)鬟f
//傳遞
try{
wx.setStorage({
key:'',
data:{...},
success:()=>{
//緩存成功 ..進行跳轉
wx.navigatorTo({
url:'/pages/test/main'
})
}
})
}
catch(e){}
//接收
在onShow或者onLoad頁面生命函數(shù)里通過
wx.getStorage({
key:'',
success:()=>{
//接收成功
//進行數(shù)據(jù)頁面初始化
}
})
或者
wx.getStorageSync('key')
獲取到參數(shù)進行數(shù)據(jù)頁面初始化
4、頁面數(shù)據(jù)在unLoad之后沒有被初始化
通過在main.js里通過Vue.mixin對數(shù)據(jù)進行恢復初始化
Vue.mixin({
onUnload() {
if (typeof this.$options.data === 'function') {
try {
Object.assign(this.$data, this.$options.data());
} catch (e) {
console.log(e)
}
}
}
})
5、如何檢查小程序版本更新進行更新版本？
官方文檔傳送門=> https://developers.weixin.qq.com/miniprogram/dev/api/wx.getUpdateManager.html
基本上官方文檔的公共方法我都會做一層封裝，包括wx.showToast等方法均會進行一個處理
檢查版本更新也是一樣 這邊也是參考網(wǎng)上的結合自己封裝的代碼進行一個整合
/* 小程序監(jiān)聽更新信息 */
export function checkUpdateVersion() {
//創(chuàng)建 UpdateManager 實例
const updateManager = wx.getUpdateManager();
//檢測小程序版本更新
updateManager.onCheckForUpdate((res) => {
// 請求完新版本信息的回調(diào)
if (res.hasUpdate) {
//監(jiān)聽小程序有版本更新事件
updateManager.onUpdateReady(() => {
showConfirm({
title: '更新提示',
content: '新版本已經(jīng)準備好，是否重啟應用？',
ok(res) {
// 新的版本下載完畢，調(diào)用 applyUpdate 應用新版本并重啟
updateManager.applyUpdate();
}
})
})
//監(jiān)聽小程序更新失敗事件
updateManager.onUpdateFailed(() => {
// 新版本下載失敗
showConfirm({
title: '已經(jīng)有新版本咯~',
content: '請在微信 “發(fā)現(xiàn)-小程序” 頁刪除當前小程序，重新通過小程序名稱搜索打開使用最新版本',
})
})
}
})
}
6、小程序獲取頁面棧信息和參數(shù)
官網(wǎng)提供了
getCurrentPages()來獲取當前小程序打開的頁面的所有頁面棧信息，文檔是這么寫的，
打印出來該結果，可以清晰的看到頁面棧的相關信息，包括頁面路徑以及頁面參數(shù)
當我們打開多個對象的時候，這個頁面結果也會有多條。
在實際開發(fā)中，我會碰到這樣一個場景，在用戶未登陸的情況下會記錄下當前用戶操作的頁面，自動跳轉登陸頁，待用戶登陸成功后自動跳回上一個未登陸的頁面，這個時候就需要通過這個API進行操作處理了。
通過處理，分享一個可以獲取當前所有打開的頁面的任一頁面的棧信息。
/*
獲取頁面棧信息和參數(shù)
參數(shù) 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動態(tài)設置樣式Style
通過Mpvue官網(wǎng)，我們知道
這時候當我們需要動態(tài)設置一系列樣式給Dom渲染的時候，就出現(xiàn)了問題，所以需要多一步對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中，這是不被支持的，所以我們需要通過上面的函數(shù)多一層轉換，轉成樣式字符串才可以。
//更改如下
computed:{
styleObject(){
return styles({
backgroundColor:'#fff',
color:'#000'
})
}
}
8、mpvue中設置默認轉發(fā)分享信息
同樣在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不支持
在實際開發(fā)之中，很經(jīng)常碰到一種情況就是通過v-show來控制組件顯隱失效的問題，特別是直接對公共組件進行使用的時候，實際上已經(jīng)直接創(chuàng)建了組件沒有達到預期的效果。
eg:
<template>
<components v-show='show'></components>
</template>
這種時候，即使show是true組件也同樣會被創(chuàng)建出來，沒有辦法通過該變量來響應對應的顯示隱藏狀態(tài)。
最簡單粗暴的解決辦法就是用v-if來代替v-show直接銷毀組件。
10、通過npm run dev 編譯的時候，部分頁面跳轉提示不存在頁面
注意
檢查dist/app.json 是否與 src/main.json保持一致，保險方法直接copy一下main.json里的到app.json里即可
第一次編譯的時候發(fā)現(xiàn)找不到tabBar圖標，依葫蘆畫瓢把src/assets下的圖片拷貝到dist/assets即可
11、新增頁面沒有被編譯出來
新增的頁面需要重新通過npm run build 命令來生成對應的mpvue的文件目錄，重新npm run dev才可以
好了，差不多了，快想不出來還碰上什么問題了~~~~
第一次發(fā)表文章，不喜輕噴...
