需求:类似常见的电商页面,从首页跳转至H5页面,在H5页面展示商品列表,点击某个商品进入小程序商品详情页
1.小程序->2.h5->3.小程序
问题是从3返回到2时,H5页面自带的监听页面可见的函数无效,如图所示:
//监听页面显示隐藏
document.addEventListener(visibilitychange, this.isShow);
无法触发此类函数,类似的还有pageshow等等。
想在页面解决该问题,不通过即时通信的话,就只有两种方案
- 刷新webview所在的小程序页面,在onshow时更新webview
- 触发H5显示隐藏的监听
由于尝试了各种监听事件均无效,因此放弃了方案2,如果有什么好办法欢迎留言。
方案一具体实现:
回退可以触发onshow函数,定义一个变量,如时间戳,加在webview的url后边,url发生改变,H5页面重新加载,可以达到更新页面的目的。
onShow() {
this.version = (new Date()).valueOf();
this.url = www.baidu.com+this.version;
}
但是这种做法有个很严重的问题,改变url 会增加webview的history,在webview所在页面,点击后退,会返回之前的H5页面,用户可以多次点击才能回到首页。
因此想到了在这个页面onhide的时候,移除webview组件,页面重新显示后,再增加改组件,这样就解决了这个问题。
onhide 将URl 赋值空的时候
页面会报错.
wx:if 这个方法试了 不行 webview加载不出来了,请问一下还有其他方案吗
现在给URL赋值为空再重新赋值也没用了 不知道是不是基础库的问题 我以前用这个方法行 现在不行了
我的个人解决方案,只刷新当前h5,不刷新整个webview
1、h5跳转到小程序的时候,在h5页面显示一个遮盖层,遮盖层绑定点击刷新的事件,然后跳转到小程序。
2、当从小程序返回到h5的时候,只需要点击屏幕一下就可以主动刷新当前页面了
请问,小程序嵌入h5页面,h5页面和h5页面之间的跳转如何让返回的时候刷新页面?h5与h5页面是通过wx.miniProgram.navigateTo(),通过一个小程序页面做中转的页面,但是js是写在h5页面上的.