Uni-App跨端实战:支付宝小程序WebView与H5通信全流程解析(02)

前言

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

内嵌H5有哪些好处:

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

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

如图所示:

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


相关系列文章:

Uni-App跨端实战:微信小程序WebView与H5通信全流程解析(01)

Uni-App跨端实战:支付宝小程序WebView与H5通信全流程解析(02)

Uni-App跨端实战:APP的WebView与H5通信全流程解析(03)

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,有两种方式:

  1. 通过url传参数给H5,并且参数需要encodeURIComponent,参数的长度是有限制的
  2. 可以通过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!

相关推荐
两个西柚呀3 小时前
未在props中声明的属性
前端·javascript·vue.js
子伟-H55 小时前
App开发框架调研对比
前端
桃子不吃李子5 小时前
axios的二次封装
前端·学习·axios
SteveJrong5 小时前
面试题 - JavaScript
前端·javascript·面试·ecmascript·基础·找工作·红宝书
阿金要当大魔王~~6 小时前
uniapp 页面标签 传值 ————— uniapp 定义 接口
前端·javascript·uni-app·1024程序员节
全栈软件开发6 小时前
uniapp三端影视源码苹果cms自动采集电影视频网站源码前端源码带VIP
前端·uni-app·影视源码
chxii6 小时前
10.4FormData :前端文件上传与表单数据处理的核心工具
前端
AntBlack7 小时前
不当韭菜 : 好像真有点效果 ,想藏起来自己用了
前端·后端·python
楊无好7 小时前
react中props的使用
前端·react.js·前端框架
一个处女座的程序猿O(∩_∩)O7 小时前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js