微信小程序阻止小程序返回的兩種方法
本次項(xiàng)目為uniapp開(kāi)發(fā)，原生小程序也可以參考這兩個(gè)方法。
方法1：
wx.enableAlertBeforeUnload
onLoad中聲明
wx.enableAlertBeforeUnload({
message: '請(qǐng)您填寫(xiě)數(shù)據(jù)',
success:()=>{}
})
優(yōu)點(diǎn)：簡(jiǎn)單方便
缺點(diǎn)：無(wú)法自定義樣式、按鈕文字及樣式
方法2：
page-container
這是一個(gè)類(lèi)似彈框的組件，具體參數(shù)可以去官網(wǎng)查看。
返回操作包括：頂部導(dǎo)航、右滑手勢(shì)、安卓物理返回鍵和調(diào)用 navigateBack 接口
優(yōu)點(diǎn)：可以自定義返回框
<template>
<view>
<text>測(cè)試阻止返回的頁(yè)面</text>
<!-- 阻止返回 -->
//注意一定要用v-if 才可以，不然即使showPage1設(shè)置為false，第二次也會(huì)直接返回
<view class="" v-if="showPage1">
<page-container :show="showPage1" :overlay="false" @beforeleave="beforeleave('showPage1')"></page-container>
</view>
</view>
</template>
//數(shù)據(jù)及方法
data(){
return {
showPage1: true //一開(kāi)始設(shè)置為顯示
}
},
methods: {
beforeleave(){
this.showPage1 = false //這個(gè)很重要，一定要先把彈框刪除掉
uni.showModal({
title: `確定要退出嗎`,
success: (e)=>{
if(e.confirm) {
//判斷是上一個(gè)頁(yè)面進(jìn)入(返回)，還是直接進(jìn)入這個(gè)頁(yè)面(回首頁(yè))
let pages = getCurrentPages()
if(pages.length == 1){
uni.switchTab({
url: '/pages/index/index'
})
}else {
uni.navigateBack(1)
}
}else {
//點(diǎn)取消，生成新的彈框
this.showPage1 = true
}
},
})
}
}后語(yǔ)：對(duì)于page-container原理的個(gè)人理解
網(wǎng)上、官網(wǎng)上很多人只提到了這種方法可以解決阻止返回問(wèn)題，卻沒(méi)有很好的說(shuō)明，導(dǎo)致很多朋友在使用時(shí)并沒(méi)有達(dá)到預(yù)期效果。下面這個(gè)簡(jiǎn)單理解希望可以幫助到大家。
可以簡(jiǎn)單理解為在頁(yè)面生成page-container時(shí)會(huì)通知小程序需要監(jiān)聽(tīng)用戶(hù)返回操作，并且阻止返回一次。
當(dāng)用戶(hù)做了返回操作后，小程序執(zhí)行了阻止返回，然后移除了監(jiān)聽(tīng)，所以接著再做一次返回操作就直接返回了。
所以要達(dá)到不點(diǎn)擊確定返回，下一次做返回操作時(shí)依舊要阻止，就可以在每次返回點(diǎn)取消時(shí)候，移除page-container，再重新生成一個(gè)page-container，這時(shí)就又會(huì)重新通知小程序監(jiān)聽(tīng)返回一次，所以上文用的是v-if。
總結(jié)
到此這篇關(guān)于微信小程序阻止小程序返回的兩種方法的文章就介紹到這了,更多相關(guān)阻止小程序返回內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的區(qū)別和應(yīng)用場(chǎng)景簡(jiǎn)述
隨著web2.0的彪悍發(fā)展，以及瀏覽器端所承載的工作越來(lái)越大（在不是很影響性能的情況下，開(kāi)發(fā)者都習(xí)慣把能用瀏覽器做的事兒都讓瀏覽器做，以減輕服務(wù)器的壓力和帶寬費(fèi)用等）。2010-04-04
這篇文章主要介紹了微信瀏覽器下拉黑邊解決方案 wScroollFix,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
微信JS-SDK實(shí)現(xiàn)微信會(huì)員卡功能(給用戶(hù)微信卡包里發(fā)送會(huì)員卡)
這篇文章主要介紹了微信JS-SDK實(shí)現(xiàn)微信會(huì)員卡功能(給用戶(hù)微信卡包里發(fā)送會(huì)員卡)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
提高網(wǎng)站性能之 如何對(duì)待JavaScript
在一個(gè)頁(yè)面中，每一個(gè)外部JavaScript 及CSS文件都會(huì)導(dǎo)致一個(gè)額外的HTTP請(qǐng)求。所以，如何合理的合并JavaScript 文件及CSS文件也是前端工程師應(yīng)該考慮的。2009-10-10
QRCode.js二維碼生成并能長(zhǎng)按識(shí)別
這篇文章主要為大家詳細(xì)介紹了QRCode.js二維碼生成并能長(zhǎng)按識(shí)別，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
JavaScript 變量,數(shù)據(jù)類(lèi)型基礎(chǔ)實(shí)例詳解【變量、字符串、數(shù)組、對(duì)象等】
這篇文章主要介紹了JavaScript 變量,數(shù)據(jù)類(lèi)型基礎(chǔ),結(jié)合實(shí)例形式詳細(xì)分析了JavaScript變量聲明、字符串、數(shù)組、對(duì)象等基本使用方法與操作注意事項(xiàng),需要的朋友可以參考下2020-01-01
js實(shí)現(xiàn)數(shù)字每三位加逗號(hào)的方法
這篇文章主要介紹了js實(shí)現(xiàn)數(shù)字每三位加逗號(hào)的方法,以實(shí)例形式講述了js實(shí)現(xiàn)數(shù)字每三位加逗號(hào)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
使用腳本控制網(wǎng)頁(yè)Table的顯示隱藏(全代碼)_AX
使用腳本控制網(wǎng)頁(yè)Table的顯示隱藏(全代碼)_AX...2006-12-12
原生js通過(guò)一行代碼實(shí)現(xiàn)簡(jiǎn)易輪播圖
這篇文章主要介紹了原生js一行代碼實(shí)現(xiàn)簡(jiǎn)易輪播圖功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-06-06
前端處理二進(jìn)制流文件導(dǎo)出為excel表代碼示例
這篇文章主要給大家介紹了關(guān)于前端處理二進(jìn)制流文件導(dǎo)出為excel表的相關(guān)資料,后臺(tái)管理系統(tǒng),常會(huì)出現(xiàn)導(dǎo)出excel表格功能,需要的朋友可以參考下2023-08-08