评论

小程序内嵌H5页面跳转至小程序页面,再返回到H5页面不刷新问题解决方案

内嵌H5跳转到小程序页面,再返回H5后,数据刷新问题

需求:类似常见的电商页面,从首页跳转至H5页面,在H5页面展示商品列表,点击某个商品进入小程序商品详情页

1.小程序->2.h5->3.小程序

问题是从3返回到2时,H5页面自带的监听页面可见的函数无效,如图所示:

//监听页面显示隐藏
document.addEventListener(visibilitychange, this.isShow);

无法触发此类函数,类似的还有pageshow等等。

想在页面解决该问题,不通过即时通信的话,就只有两种方案

  1. 刷新webview所在的小程序页面,在onshow时更新webview
  2. 触发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组件,页面重新显示后,再增加改组件,这样就解决了这个问题。

最后一次编辑于  07-17  (未经腾讯允许,不得转载)
点赞 1
收藏
评论