支付宝小程序中嵌入H5页面并且实现通信

场景：在小程序开发中（无论是支付宝、微信、Uniapp等）经常会遇到在小程序中使用或者跳转一些自己的公司开发过的，或三方地址，在小程序中的开发文档中大家可以看到，知识有一些基本的内部跳转方式，但通过仅有的跳转方式无法满足我们的跳转外部页面的需求，这个时候我们就可以使使用webView

<view class="page">
  <web-view src="https://render.alipay.com/p/s/web-view/index" onMessage="onmessage"></web-view>
</view>

大家可以看到，web-view 中主要的一个属性就是src

web-view通过src中填写不同的三方地址近而展示对应的页面

那么在小程序中使用web-view会有那些注意事项呢，下面以支付宝小程序为例

• 不支持个人小程序使用，仅支持企业小程序。

• 每个页面只能有一个 web-view，会自动铺满整个页面并覆盖其它组件。

• 不支持多个页面 web-view 间通讯。不支持横屏以及全屏展示。

• 调试请以真机效果为准。

其中最重要的一点便是个人小程序并不支持使用，并且在开发中使用web-view还要到相应的小程序管理平台，做对应的域名配置，再开发工具大家可以点击 详情-选中最下面的忽略webview域名合法校验

 注意事项：

• 包含中文等特殊字符的 URL，请先使用 encodeURL() 编码。

• 主文档 URL、iframe 里的主文档 URL，以及后续跳转的主文档 URL，其域名均需要加入 H5 域名白名单，否则无法访问。

• H5 域名白名单维护方法请参见 配置 H5 域名 。不支持添加阿里（天猫、淘宝等）域名，且域名总数量不超过 20 个。

• H5 域名白名单变更后需要小程序发版，新的白名单仅对新版小程序生效。

以上就是webview简单的使用方法

那么下面在来说一下H5与小程序之间如何实现通信呢

大家可以看到上面代码中 web-view标签上有一个onMessage属性，这个属性就是用来接收H5发送过来的短信的

那么如何在H5中向小程序发送信息呢：

<script type="text/javascript" src="https://appx/web-view.min.js"></script>
<!-- 如该 H5 页面需要同时在非支付宝客户端内使用，为避免该请求404，可参考以下写法 -->
<!-- 请尽量在 html 头部执行以下脚本 -->
<script>
  if (navigator.userAgent.indexOf('AliApp') > -1) {
    document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
  }
</script>
<script>
  my.navigateTo({url: '../get-user-info/get-user-info'});
  // 网页向小程序 postMessage 消息
  my.postMessage({name:"测试web-view"});
  // 接收来自小程序的消息。
  my.onMessage = function(e) {
    console.log(e); // {'sendToWebView': '1'}
  }
  // 判断是否运行在小程序环境里
  my.getEnv(function(res) {
    console.log(res.miniprogram) // true
  });
  my.startShare();
</script>

这里需要注意的是 https://appx/web-view.min.js一定要使用链接地址的形式去引入，支付宝并未提供改文件下载到本地的方式

my.postMessage 信息发送后，小程序页面接收信息时，会执行 onMessage 配置的方法：

// 小程序页面对应的 page.js 声明 test 方法，
// 由于 page.axml 里的 web-view 组件设置了 onMessage="test",
// 当页面里执行完 my.postMessage 后，test 方法会被执行
Page({
  onLoad(e){
    this.webViewContext = my.createWebViewContext('web-view-1');    
  },
  test(e){
    my.alert({
      content:JSON.stringify(e.detail),
    });  
    this.webViewContext.postMessage({'sendToWebView': '1'});
  },
});

上面的代码中在 test函数中就可以取到H5发送过来的信息了

当然在有些情况下我们可能也会通过小程序向H5发送通信

大家可以看到在上述的代码中，页面加载的时候我使用了web-view 组件控制 my.createWebViewContext

my.createWebViewContext 是通过创建 webviewContext 提供从小程序向 web-view 发送消息的能力的 API。创建并返回  web-view 上下文 webViewContext 对象。

注意：此功能也仅限制于企业小程序，个人小程序中同样无法使用

要创建的 web-view 所对应的 ID 属性。

将创建好的id名称绑定到web-view标签上即可

<!-- .axml -->
<view>
  <web-view id="web-view-1" src="..." onMessage="test"></web-view>
</view>

都配置好后即可通过以下方法向H5发送信息了

   // 向H5发送消息
  this.webViewContext.postMessage({'sendToWebView': '1'});

在H5中拖过以下方法接受消息即可

my.onMessage = function(e) {
  console.log(e); //{'sendToWebView': '1'}
}

这就是小程序中web-view的简单使用了