因為業(yè)務(wù)上有需求，在開發(fā)小程序的時候有些頁面要使用web-view組件嵌套H5頁面
有個頁面內(nèi)有個表單，在表單內(nèi)容還為填寫完成的時候，監(jiān)聽用戶點擊左上角返回事件，彈出一個提示框，因為H5頁面在小程序中的層級很高，所以彈出提示框只能在H5頁面內(nèi)完成，因此要在H5頁面內(nèi)檢測小程序的返回事件，其實也就是監(jiān)聽url地址的改變事件
所以在H5頁面剛載入的時候，要往window的history對象中加入一條歷史記錄，可用以下函數(shù)完成
const pushHistory = (str = 'title', url = '#') => {
let state = {
title: str,
url: url,
};
window.history.pushState(state, state.title, state.url);
};這個函數(shù)可以往history對象中添加一條歷史記錄
所以在頁面剛載入的時候調(diào)用這個函數(shù)以添加一條歷史記錄
pushHistory(document.title, location.href);并且在頁面剛載入的時候要給window添加一個popstate頁面url改變事件文章來源：http://www.zghlxwxcb.cn/news/detail-509664.html
window.addEventListener('popstate', async function(e) {
// 為了避免只調(diào)用一次，再次調(diào)用一次
pushHistory(document.title, location.href);
// 加入業(yè)務(wù)邏輯
if(xxx) {
// 調(diào)用微信的返回事件(前提要引入微信的SDK)
wx.miniProgram.navigateBack();
} else {
// 取消返回，阻止默認(rèn)返回行為
history.pushState(null, null, location.href);
}
})這時候去小程序模擬器運行一下就完成了。文章來源地址http://www.zghlxwxcb.cn/news/detail-509664.html
到了這里，關(guān)于小程序內(nèi)嵌H5頁面監(jiān)聽小程序的返回事件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
