小程序内嵌H5页面跳转至小程序页面，再返回到H5页面不刷新问题
2021-10-18 本文已影响0人
菜蚴菜
问题描述：从小程序首页跳转至H5页面（通过webview嵌套），在H5页面点击返回小程序首页，点击小程序首页的返回按钮返回H5页面，发现页面不更新(以下解决方案按照这个最简场景进行，实际业务请根据实现方案自行调整)
解决方案一
通过更改webview嵌入的url，配合v:if实现H5页面的重载
//web.js
onShow() {
this.url = `${要跳转的地址}`;
}
onHide() {
this.url = '';
}
//web.wxml
<view>
<web-view v:if=""{{url}}" " src="{{url}}" ></web-view>
</view>
缺点：会刷新整个webview
改进方案
根据进入webview页面不同的场景，更改url中的参数，让该url对应的H5页面通过监听参数值的变化来做出相应的响应
小程序相关页面代码
//小程序首页地址（自定义）
/pages/index/index
//web.wxml
<view>
<web-view src="{{url}}" ></web-view>
</view>
// web.js
Page({
data: {
url:'', //H5页面地址
//判断页面是否触发了onload，如果有的话说明是跳转进来的，
//如果没有的话说明是通过页面自带返回按钮进来的
onload:false,
},
onLoad(options) {
console.log('调用了webview页面的onLoad')
this.setData({
onload:true
})
},
onHide(){
console.log('调用了webview页面的hide')
this.setData({
onload:false
})
},
onShow(){
console.log('调用了webview页面的show')
let onload=this.data.onload
if(onload){
//正常进入页面的情况，在url中拼接flag=1
this.setData({
url:`${要跳转的地址}/?flag=1`//我这里假设原本链接中无参数
})
}else{
//通过页面自带返回，进入页面的情况，在url中拼接flag=2
this.setData({
url:`${要跳转的地址}/?flag=2`
})
}
},
})
H5页面代码
//index.vue
<template>
<div id="app">
//flag是需要实际调用的，不然触发不了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监听到flag的变化，此处使用存放在sessionStorage来标识变化之前的flag值
let formToSession = sessionStorage.getItem('flag')
if (formToSession == 1 && flag== 2) {
console.log('在这个时间节点刷新页面')
} else if (formToSession == 2 && flag== 1) {
//当webview嵌入的url发生变化时会生成对应的webview history，
//无法通过回退一下就返回小程序页面，此时需要H5页面配合。检测到点击了返回时，H5页面直接跳转
console.log('在这个时间节点跳回小程序')
wx.miniProgram.navigateBack()
}
//相应的逻辑处理完成以后，更新sessionStorage中的值
sessionStorage.setItem('flag', flag)
return flag
},
},
},
mounted() {},
methods: {
//跳转到小程序首页
toApplet() {
wx.miniProgram.navigateTo({ url: '/pages/index/index' })
},
},
}
</script>
