评论

小程序内嵌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组件,页面重新显示后,再增加改组件,这样就解决了这个问题。

点赞 2
收藏
评论

2 个评论

  • 3.
    3.
    2019-12-03

    onhide 将URl 赋值空的时候

    页面会报错.

    2019-12-03
    赞同
    回复 2
    • ๑瑶&玲๑
      ๑瑶&玲๑
      03-10
      请问还有什么办法呢,我也遇见了这个问题
      03-10
      回复
    • 3.
      3.
      03-10回复๑瑶&玲๑
      url添加时间戳 h5去监听
      03-10
      回复
  • 开开
    开开
    2019-11-26

    请问,小程序嵌入h5页面,h5页面和h5页面之间的跳转如何让返回的时候刷新页面?h5与h5页面是通过wx.miniProgram.navigateTo(),通过一个小程序页面做中转的页面,但是js是写在h5页面上的.

    2019-11-26
    赞同
    回复
登录 后发表内容