web-view和小程序间的通信
发布于 3 年前 作者 xiegang 3210 次浏览 来自 分享

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。

1 回复

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

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

回到顶部