Uni-App跨端实战：支付宝小程序WebView与H5通信全流程解析（02）

前言

在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组件官方文档，web-view 可以打开的 H5 页面的域名限于开发者维护的 H5 域名白名单（开放平台控制台 > 小程序详情页 > 开发设置 > H5 域名配置），仅支持添加开发者可控制的域名。若 web-view 提示访问受限，可参考页面访问受限解决方案。

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

从图中可以看出，微信小程序和支付宝小程序的不同，支付宝小程序没有限制，双向传递更通畅。

下面我们具体实践下。

3. 支付宝小程序->H5

从支付宝小程序发送参数给H5，有两种方式：

通过url传参数给H5，并且参数需要encodeURIComponent,参数的长度是有限制的
可以通过my.creagteWebViewContext传递更多参数

具体代码如下：

方式一：

js 复制代码

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

方式二：

js 复制代码

// 小程序发送
const aliWebviewContent = my.createWebViewContext('web-view')
aliWebviewContent.postMessage({
  name: 1
})

// h5接收
my.onMessage = function (response) {
  console.log(response);
};

4. H5->支付宝小程序

H5发送到支付宝小程序的参数，web-view 载入的 H5 页面可以使用手动引入 https://appx/web-view.min.js（此链接仅支持在支付宝客户端内访问），提供了相关的 API 使用（调试请以真机效果为准 ）。my.postMessage

js 复制代码

// H5发送
webUni.postMessage({
    data: {
      name: 'jack',
      age: 20,
      title: '复制'
    }
 })
// 小程序接收
@message="bindMessage"

如果H5直接发送数据，支付宝小程序实时接收到数据。发送完成，此时数据通过message接收到，接收的数据是一个对象。

5. 总结

最后总结一下：支付宝小程序webview通信，可以做到实时双向通信。小程序可以通过[my.createWebViewContext](https://opendocs.alipay.com/mini/api/webview-context)发送到H5，H5发送到小程序还是通过postMessage发送数据。

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