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

前言

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

内嵌H5有哪些好处:

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

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

如图所示:

本文主要讲解和实践APP的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 复制代码
// 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>

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

2. APP的webview通信概述

uniapp编译出的APP的weiview通信,参考APP的webview组件官方文档

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

下面我们具体实践下。

3. APP->H5

从APP发送参数给H5,有两种方式:

  1. 通过url传参数给H5,并且参数需要encodeURIComponent,参数的长度是有限制的,如果需要带过多参数,
  2. 通过getAppWebview获取webview对象,使用evalJS执行函数传递参数,鸿蒙参考

注意:vue2通过this.$scope.$getAppWebview()来获取当前页面的webview对象。vue3通过获取当前页面路由实例,包含$getAppWebview方法。

$getAppWebview这个方法也不是直接获取到webview实例,需要在children中获取,根据官网描述,还需要有个setTimout的延迟。如果我们需要将App的token发送给H5,那么需要在H5的window上挂载一个方法,例如: window.getToken,那么Android和IOS系统发送token给H5的代码。

具体代码如下:

方式一:

js 复制代码
  <web-view :src="url" @message="bindMessage" @load="bindLoad" id="webview"></web-view>

方式二:

js 复制代码
// vue2写法
const currentWebview = this.$scope.$getAppWebview() 
setTimeout(function() {
  wv = currentWebview.children()[0]
  wv.evalJS(`getToken('${token}')`);
}, 1000); //如果是页面初始化调用时,需要延时一下

// vue3写法

const pages = getCurrentPages();
const index = pages.length - 1;

// 获取到当前页面的webView实例
const currentWebview = pages[index].$getAppWebview();
setTimeout(() => {
  // 取到真正的webview
  const webView = currentWebview.children()[0];
  // 通过evalJS执行H5中的getToken方法,并将token作为参数传递
  webView.evalJS(`getToken('${token}')`);
});

// 鸿蒙系统
const webview = uni.createWebviewContext('webview', context);
const token = 'token_xxx';
webview.evalJs(`getToken('${token}')`);

H5接收:

js 复制代码
// 在window上挂载getToken方法,等待被执行,然后获取Token
window.getToken = function(token) {
   // 被App执行后,就可以获取来自App的token
   console.log(token)
}

4. H5->APP

H5发送到APP的参数,使用webUni.postMessage

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

如果H5直接发送数据,APP是实时接收到数据,数据是一个数组,取第一个数据

5. 总结

最后总结一下: APP的webview通信,APP发送到H5需要考虑不用系统获取webview实例的方式,通过执行H5挂载在window对象上的方法传递数据。H5还是通过postMessage发送消息实现。

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

相关推荐
Zhencode1 天前
vue之异步更新队列
前端·javascript·vue.js
九年义务漏网鲨鱼1 天前
从零学习 Agentic RL(四)—— 超越 ReAct 的线性束缚:深入解析 Tree-of-Thoughts (ToT)
前端·学习·react.js
Jay丶1 天前
Next.js 与 SEO:让搜索引擎爱上你的网站 💘
前端·javascript·react.js
狗头大军之江苏分军1 天前
请不要在感情里丢掉你的“我”
前端·后端
路光.1 天前
一.React相关面试真题
前端·react.js·前端框架
玉宇夕落1 天前
🌌用CSS3打造“星球大战”片头:前端是代码界的导演,让文字在星空中翻滚
前端·javascript
gustt1 天前
CSS3 动画实战:打造星球大战开场动画
前端·css
colorFocus1 天前
Promise与async/await的接口串联和并联
前端·javascript
流星稍逝1 天前
前端解决两数计算精度确实问题
前端
stringwu1 天前
Flutter 中的 MVVM 架构实现指南
前端·flutter