Uni-App跨端实战：微信小程序WebView与H5通信全流程解析（01）

前言

在uniapp开发过程中，uniapp编译出的平台的小程序、APP中，都需要使用webview组件进行内嵌H5。

内嵌H5有哪些好处：

通过web-view内嵌，APP和小程序可以直接复用这些H5资源，避免了重复开发。
无需升级原生代码就能展示新的H5内容，支持动态更新功能

当然H5页面也可调用原生API，这就涉及到内嵌H5与webview通信。对于uniapp可以编译出多平台的代码，每个平台的webview通信都会有所差别。

如图所示：

本文主要讲解和实践微信小程序的webview与h5的双向通信。

1. 前置工作

因为是uniapp开发的，按照 $uni-app webview官方文档$ H5可以使用window.postMessage，但经过实践，这个方法并没办法发送数据.

1.1 引入uni.webview

所以我们使用的都是使用uni.webView.postMessage，需要说明的是不管你的H5是uniapp编译、还是非uniapp编译，都需要额外引入一个js(uni.webview.1.5.6.js)才能支持，需要1.5.6版本才支持鸿蒙系统。

特别需要注意的是：引入的文件提供的全局变量是uni，如果你的H5是uni-app编译出的，会与原有的uni冲突，会导致覆盖掉你引入的js变量。可以直接修改引入的全局变量，例如将其修改为webUni

解决方案：修改全局uni的名称

可以直接在index.html中引入：

html 复制代码

// 微信sdk
<script src='https://res2.wx.qq.com/open/js/jweixin-1.6.0.js'></script>
// 支付宝sdk
<script src='https://appx/web-view.min.js'></script>
// uni sdk
<script type="text/javascript" src="/static/uni.webview.1.5.6.js"></script>
<script>
  document.addEventListener('UniAppJSBridgeReady', function () {
    window.webUni = webUni.webView
    webUni.getEnv(function (res) {
      console.log('当前环境：' + JSON.stringify(res));
    });
  });
</script>

1.2 引入对应小程序的sdk

如果不引入，通过uni.getEnv获取的环境一直为h5,引入后才能判断环境。

经过实践，uniapp编译的H5和非uniapp编译的H5用法一致。

2. 微信小程序webview通信概述

uniapp编译出的微信小程序weiview通信，参考微信小程序webview组件官方文档，webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。

可以用一个图简述下通信的过程：

下面我们具体实践下。

3. 微信小程序->H5

从微信小程序发送参数给H5，通过url传参数给H5，并且参数需要encodeURIComponent,参数的长度是有限制的，如果需要带过多参数，建议通过接口保存和获取。

例如：可以约定一个随机值，关联对应的传递参数，H5通过query接收到这个随机值，通过接口去获取对应的参数，完成相应的操作。

具体代码如下：

js 复制代码

  <web-view :src="url" @message="bindMessage" @load="bindLoad"></web-view>

4. H5->微信小程序

H5发送到微信小程序的参数，web-view网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。wx.miniProgram.postMessage：

js 复制代码

webUni.postMessage({
    data: {
      name: 'jack',
      age: 20,
      title: '复制'
    }
 })

如果H5直接发送数据，微信小程序是不会实时接收到数据，需要在特定的时机触发，例如分享。

发送完成，点击微信小程序开发者工具分享，此时数据通过message接收到，接收的数据是一个数组，需要取第一个，不同的小程序取值不同。

5. 总结

最后总结一下：微信小程序webview通信，是有一些限制，小程序通过url传参给H5，H5通过postMessage发送给小程序，小程序接收数据是要在特定的时机才能获取。

如果错误，请指正O^O!