1. 出現(xiàn)場景
在微信小程序中，可以使用webview嵌套web頁面厕氨，有些時候在web頁面填寫了表單沒有提交咐熙，當用戶點擊左上角小程序的返回時捐名，希望可以彈框提示用戶還有未保存內容，是否確定返回谜嫉，根據(jù)用戶選擇之后在確定是否返回抽莱。
2. 遇到困難
由于返回圖標是微信小程序自帶的，因此我們無法通過web頁面的路由離開鉤子(如：vue中beforeRouterLeave鉤子函數(shù))來控制頁面是否關閉骄恶，因此想要在離開頁面時在web頁面進行邏輯控制是有難度的食铐。
3. 解決辦法
使用瀏覽器的popstate事件來禁止頁面跳轉。
history.pushState(null, null, document.URL)
4. 項目實戰(zhàn)
<template>
<!-- 表單 -->
......
<!-- 此處示例使用vantUI的彈框組件 -->
<van-dialog
v-model="isBackWarnShow"
title="溫馨提示"
show-cancel-button
confirmButtonColor="#3DB754"
className="back-warn-dialog"
@confirm="handleComfirmBack"
@cancel="handleCancelBack"
>
<div>您的信息還未提交認證僧鲁，</div>
<div>確定返回嗎虐呻？</div>
</van-dialog>
</template>
<script>
export default {
data() {
return {
// 表單信息
formData: {
name: '',
age: ''
},
// 提示是否顯示
isBackWarnShow: false,
// 是否放棄提交
isQuitSubmit: false
}
},
mounted() {
history.pushState(null, null, document.URL)
// 點擊小程序返回時會觸發(fā)popstate事件
window.addEventListener('popstate', this.handlePopstate)
},
beforeDestroy() {
window.removeEventListener('popstate', this.handlePopstate)
},
// 點擊小程序返回
handlePopstate() {
if (
!this.isQuitSubmit &&
(this.formData.name ||
this.formData.age)
) {
// 表單信息未提交阻止返回
history.pushState(null, null, document.URL)
this.isBackWarnShow = true
} else {
// 返回到小程序
wx.miniProgram.navigateBack({
delta: history.length
})
}
},
handleComfirmBack() {
this.isQuitSubmit = true
this.isBackWarnShow = false
// 彈框確定后返回小程序
wx.miniProgram.navigateBack({
delta: history.length
})
},
handleCancelBack() {
// 彈框取消留在當前頁面
this.isQuitSubmit = false
this.isBackWarnShow = false
}
}
</script>
