問題描述：從小程序首頁跳轉(zhuǎn)至H5頁面（通過webview嵌套），在H5頁面點擊返回小程序首頁钓试，點擊小程序首頁的返回按鈕返回H5頁面，發(fā)現(xiàn)頁面不更新(以下解決方案按照這個最簡場景進行耙替，實際業(yè)務(wù)請根據(jù)實現(xiàn)方案自行調(diào)整)
解決方案一
通過更改webview嵌入的url亚侠，配合v:if實現(xiàn)H5頁面的重載
//web.js
onShow() {
this.url = `${要跳轉(zhuǎn)的地址}`;
}
onHide() {
this.url = '';
}
//web.wxml
<view>
<web-view v:if=""{{url}}" " src="{{url}}" ></web-view>
</view>
缺點：會刷新整個webview
改進方案
根據(jù)進入webview頁面不同的場景曹体，更改url中的參數(shù)俗扇，讓該url對應的H5頁面通過監(jiān)聽參數(shù)值的變化來做出相應的響應
小程序相關(guān)頁面代碼
//小程序首頁地址（自定義）
/pages/index/index
//web.wxml
<view>
<web-view src="{{url}}" ></web-view>
</view>
// web.js
Page({
data: {
url:'', //H5頁面地址
//判斷頁面是否觸發(fā)了onload，如果有的話說明是跳轉(zhuǎn)進來的箕别，
//如果沒有的話說明是通過頁面自帶返回按鈕進來的
onload:false,
},
onLoad(options) {
console.log('調(diào)用了webview頁面的onLoad')
this.setData({
onload:true
})
},
onHide(){
console.log('調(diào)用了webview頁面的hide')
this.setData({
onload:false
})
},
onShow(){
console.log('調(diào)用了webview頁面的show')
let onload=this.data.onload
if(onload){
//正常進入頁面的情況铜幽，在url中拼接flag=1
this.setData({
url:`${要跳轉(zhuǎn)的地址}/?flag=1`//我這里假設(shè)原本鏈接中無參數(shù)
})
}else{
//通過頁面自帶返回，進入頁面的情況串稀，在url中拼接flag=2
this.setData({
url:`${要跳轉(zhuǎn)的地址}/?flag=2`
})
}
},
})
H5頁面代碼
//index.vue
<template>
<div id="app">
//flag是需要實際調(diào)用的除抛，不然觸發(fā)不了computed的get，可以visibility:hidden
//或者opacity：0放置在不影響頁面的位置
flag:{{ flag}}
<div @click="toApplet">回到小程序</div>
</div>
</template>
<script>
export default {
name: 'App',
computed: {
flag: {
get: function () {
let search = window.location.search
let flag= search.split('=')[1]
//因為無法使用watch監(jiān)聽到flag的變化母截，此處使用存放在sessionStorage來標識變化之前的flag值
let formToSession = sessionStorage.getItem('flag')
if (formToSession == 1 && flag== 2) {
console.log('在這個時間節(jié)點刷新頁面')
} else if (formToSession == 2 && flag== 1) {
//當webview嵌入的url發(fā)生變化時會生成對應的webview history到忽，
//無法通過回退一下就返回小程序頁面，此時需要H5頁面配合清寇。檢測到點擊了返回時喘漏，H5頁面直接跳轉(zhuǎn)
console.log('在這個時間節(jié)點跳回小程序')
wx.miniProgram.navigateBack()
}
//相應的邏輯處理完成以后，更新sessionStorage中的值
sessionStorage.setItem('flag', flag)
return flag
},
},
},
mounted() {},
methods: {
//跳轉(zhuǎn)到小程序首頁
toApplet() {
wx.miniProgram.navigateTo({ url: '/pages/index/index' })
},
},
}
</script>
