微信小程序webview通信

本文在uniapp 框架背景下生成，其他情况仅作参考

开始

直接照着文档来即可。

小程序页面：

scss 复制代码

message(e) {
    console.log(e.detail.data)
}
<web-view src="xxx" @message="message"></web-view>

h5页面：

css 复制代码

uni.postMessage({
    data: {
        action: 'message'
    }
});

实际上在h5页面postMessage 之后发现并没有触发小程序页面的message 事件，仔细看文档发现只有在特定的时机才会触发：后退、组件销毁 、分享。

可以在h5页面多次postMessage ，最终message 事件的参数会是个按顺序生成的数组。

进行在小程序上不易处理的逻辑操作，本文的案例是根据DOM 生成图片，采用的是html2canvas 库。

完成之后或返回，或跳转其他页面，都需要调用小程序的API，这里通过weixin-webview-jssdk 实现。

通过页面的分享按钮触发，此时仍在当前页面，直接处理相关逻辑即可。

这个后退 是指包含webview 标签的这个小程序页面的后退。那么这里需要一个中间页面，在onShow时判断是要跳转到该小程序页面，还是展示数据。此时整个流程就非常清晰了，具体的细节稍微画了一下流程图来展示。

如果是h5环境，则直接展示h5页面。

如果是微信环境，跳转到中间页面，在onLoad 中立即跳转到小程序页面。

小程序页面中由webview 标签嵌套h5页面，在h5页面中获取数据之后,自动执行小程序的返回操作，此时又会回到中间页面。同时触发webview 标签的message事件，然后将数据发送给中间页面。具体的页面通信方式在下文作详细阐述。

返回到中间页面，检测到有数据存在，则不会自动跳转到小程序页面，而是展示数据。

如果直接在小程序页面返回(不是在h5中获取数据之后调用的返回)，则回到中间页面时不会有数据，则再次执行返回，回到初始页。

这个销毁 是指包含webview 标签的销毁。那么仍然需要一个中间页面，在数据生成之后，通过页面间通信的方式来通知小程序页面销毁webview 标签，具体的细节稍微画了一下流程图来展示。

如果是h5环境，则直接展示h5页面。

如果是微信环境，跳转到小程序页面。维护一个控制webview标签展示的flag，默认为true。

sql 复制代码

<web-view v-if="flag" src="xxx" @message="message"></web-view>

此时展示h5页面，生成数据之后跳转到中间页，中间页通知小程序页面数据生成了（具体的页面通信方式在下文作详细阐述.），该把flag 置为false了，然后执行返回操作。

回到小程序页面，发现flag 为false且存在数据，则webview 组件销毁，触发message 事件，执行数据处理逻辑。

与上个方法类似，由微信提供的API。

发送页面：

kotlin 复制代码

this.eventChannel = this.getOpenerEventChannel()
this.eventChannel.emit('fn', { payload: "anything" });

接收页面：

css 复制代码

uni.navigateTo({
    url: 'xxx',
    events: {
        fn: data => fn()
    }
})