uni-app跨端開發微信小程序時頁面棧超過10層時小程序像卡死一樣假性不能點擊無法跳轉的解決方案
制作的小程序當點擊彈出層超過10層時就會在頁面怎么點也沒有反應效果,就像手機卡死一樣。(我一開始以為寫的程序有死循環卡死了,怎么也檢查不出來)
但是微信小程序中有特別說明:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html
wx.navigateTo(Object object)
保留當前頁面,跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。
使用 wx.navigateBack 可以返回到原頁面。小程序中頁面棧最多十層。
如何查看頁面棧數量
如果你用navigateTo做鏈接跳轉,就會很快的成為10層以上。所以使用時一定要注意。
redirectTo、navigateBack、switchTab、reLaunch 這四個的使用環境是不一樣的。
通過執行getCurrentPages()這個函數可以查看當前小程序中頁面棧的數量。
最后參考了資料與別人的想法。
封裝一個名叫linkJump的方法,然后頁面上的鏈接跳轉時全部要通過這個方法。這也就意味著:之前頁面上使用<navigator>標簽跳轉的地方要全部換成js事件,否則就無法走linkJump方法了
/* url: 要跳轉的鏈接,例如:pages/find/index?id=15 */
/* callback: 回調方法,做些特殊的事情 */
function linkJump ({ url, callback }) {
if (!url) { return }
let newUrl = url
if (url[0] === '/') { /* 過濾首位的/ */
newUrl = url.substring(1)
}
const pathname = newUrl.split('?')[0]
const tabBarUrl = ['pages/index/index', 'pages/find/index', 'pages/user/index', 'pages/cart/index'] /* Tab頁中的路徑,請根據自己項目實際情況進行修改 */
const page = getCurrentPages()
const index = page.findIndex(item => item.route === pathname)
/* 如果是Tab中的鏈接,直接跳轉 */
if (tabBarUrl.includes(pathname)) {
uni.switchTab({
url: url,
success: () => {
callback && callback()
}
})
return
}
if (index !== -1) { /* 在頁面棧中找到時 */
const step = page.length - 1 - index
if (step === 0) {
uni.redirectTo({
url: url,
success: () => {
callback && callback()
}
})
} else {
callback && callback()
uni.navigateBack({ delta: step })
}
return
}
/* 否則就直接跳轉 */
uni.navigateTo({
url: url,
success: () => {
callback && callback()
}
})
}
//使用方式
linkJump({
url: '/pages/merchant/info?id=' + this.locationId + '¤t=0', /* 商家信息頁的url */
callback: () => {
this.$store.commit('setLinkJumpInfo', { location_id: this.locationId, current: 0 }) /* vuex中保存信息,用于在info頁面接收并做出相應的處理。除此之外,還可以使用微信小程序自身的存儲功能,比如:wx.getStorage() */
}
})
源碼地址:https://github.com/yilingsj/uni-app-demo/tree/dev-pagestack-20201002
網上參考地址:http://www.yilingsj.com/xwzj/2020-10-02/uni-app-pagestack.html
- 相關閱讀
- 支持win7的node.js版本
- 深山行者旅行社網站管理系統 v1.4
- 四川省中國青年旅行社有限公司高新分社
- 發出億萬中國人的心聲,釣魚島事件以來最愛國的視頻
- 字體放大效果,字體[大][中][小]
- 深山留言板系統(七夕情人節專用) v3.7
- 支持IE與firefox(火狐)的css寫省略號方法
- 深山留言板系統 v3.5
您發布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權益;
二、不得發布國家法律、法規明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
三、本站對您所發布內容擁有處置權。
- 更多>>同類信息
- uni-app開發表單input組件的一些規則說明自己預留使用
- uni-app:使用uni.downloadFile下載word或pdf文件并保存到手機
- 小程序中利用addPhoneContact將聯系人的信息添加到手機通訊錄支持保存聯系人頭像
- 微信小程序打開客服提示:該小程序提供的服務出現故障,請稍后重試
- 微信小程序客服會話只能過button讓用戶主動觸發
- uni-app開發微信小程序使用button的open-type為contact調用微信客服不能用view或者js調用