评论

H5和小程序间的通信

H5和小程序间的通信

1.h5向小程序发送消息,根据官方文档,网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。小程序页面通过 bindmessage 绑定的函数读取 post 信息。

2.微信小程序怎么向H5发送消息呢?

目前常用的方法是通过设置webview指向网页的链接(url)拼接参数,然后H5页面截取url中的参数的方式来通信。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

基于以上两种相互间的通信和传参,现在要解决H5页面A,跳转到H5页面B,在页面B中做了一些操作(这些操作会改变了页面A中的一些数据),然后返回到页面A,希望将这些改变反馈到页面A。

  1. 如果页面A跳转到页面B是使用的location.href,操作完成后完返回上一页(页面A)用的是window.history.go(-1)。这时是不会触发visibilitychange事件,可以使用pageshow事件

window.addEventListener('pageshow', (event) => {

    if (event.persisted) { // 是否从缓存读取

    }

})

2.第二种方式是使用hashchange来处理的,具体操作如下:

页面B中发送postMessage,增加标识符test,值为test_时间戳,用来告知webview,返回上一页面的时在页面A的url后拼接#test_。(建议使用时间戳,如果是固定值,hashchange之后执行一次)

webview中接收页面B发送的消息postMessage,判断是否存在test,如果有则将test的值存入全局变量。在webview的onShow中判断全局变量中是否有test,如果有,修改webview的src,增加hash参数#test_,如果没有则不增加。清除全局变量test。由于只修改了hash部分,页面不会重新刷新。

页面A中绑定hashchange事件,hashchange事件执行自定义逻辑方法,读取hash参数,调用window.history.go(-1),恢复history。

最后一次编辑于  2021-08-03  
点赞 3
收藏
评论

3 个评论

  •  
     
    2021-11-12

    返回时,pageshow和visibilitychange事件都监听不到呀


    window.addEventListener('pageshow', this.handleBfCache)

    window.addEventListener('visibilitychange', this.handleBfCache)

    this.handleBfCache事件并没有触发

    2021-11-12
    赞同
    回复 1
    • 阳光🇨🇳
      阳光🇨🇳
      2021-11-17
      哈喽,请问是怎么来调用的,可以发一下你的代码吗
      2021-11-17
      回复
  • 阿白
    阿白
    2021-08-02

    这是H5之间的通信吧

    2021-08-02
    赞同
    回复 1
    • 阳光🇨🇳
      阳光🇨🇳
      2021-08-03
      是的,我修改一下标题
      2021-08-03
      回复
  • miaomiao
    miaomiao
    2021-07-06

    你好,我现在遇到了您上面说的,就是现在我的A页面是通过webview内嵌的,然后在a标签中通过href跳转到了B页面,在B页面点击返回,使用window.history.back(-1)在安卓手机上返回失效,不会回到A页面。

    您上面说的第一种方法是在B页面监听吗?if中如果是回退则使用window.history.go(-1)?

    2021-07-06
    赞同
    回复 1
    • 阳光🇨🇳
      阳光🇨🇳
      2021-07-07
      1.  A页面通过href跳转到B页面,然后B页面点击后使用window.history.back(-1),在安卓手机中无法返回到A页面吗?
      如果是这个问题的话,B页面触发返回事件时有些问题,检查一下,B页面点击事件尽量不要绑定在a标签上,如果绑定在a标签上需要做一些处理,有些移动端浏览器存在一些差异。
      2. 上面说的第一种方法是在B页面监听吗?
      第一种方法是在A页面监听,因为返回到A页面,需要在A页面做一些处理
      2021-07-07
      回复
登录 后发表内容