当前位置：首页 > news >正文

【HarmonyOS NEXT】Web 组件的基础用法以及 H5 侧与原生侧的双向数据通讯

news 来源：原创 2025/6/12 19:27:15

关键词：鸿蒙、ArkTs、Web组件、通讯、数据

官方文档Web组件用法介绍：文档中心

Web 组件加载沙箱中页面可参考我的另一篇文章：【HarmonyOS NEXT】如何将rawfile中文件复制到沙箱中_鸿蒙rawfile 复制到沙箱-CSDN博客

如何在鸿蒙应用中加载一个Web页面

一、加载网络地址页面

二、加载本地H5页面

实现Web组件H5层与应用层进行相互通讯

一、鸿蒙应用向H5页面发送数据

鸿蒙侧

H5侧

案例效果

二、H5页面向鸿蒙应用发送数据（附代码）

H5侧（附代码）

鸿蒙侧（附代码）

案例效果

如何在鸿蒙应用中加载一个Web页面

一、加载网络地址页面

1. 导入webview

import web_webview from '@ohos.web.webview'

2. 创建WebviewController

controller: web_webview.WebviewController = new web_webview.WebviewController();

3. 创建Web组件

Web({ src: "http://www.example.com/", controller: this.controller })

4. 在module.json5中添加网络权限

"requestPermissions": [{"name": "ohos.permission.INTERNET"}
]

案例效果：

二、加载本地H5页面

1. 在项目的 rowfile 中存放 html 代码

2. 在 Web组件中使用 $rawfile 加载本地html

Web({ src: $rawfile('webTo.html'), controller: this.controller })

实现Web组件H5层与应用层进行相互通讯

一、鸿蒙应用向H5页面发送数据

在创建的WebviewController中使用 runJavaScript() 方法可直接触发 H5 页面中的方法

鸿蒙侧

同样也可以使用模板字符串拼接参数进行传参

H5侧

案例效果

二、H5页面向鸿蒙应用发送数据（附代码）

在原生代码侧使用 javaScriptProxy 方法向 h5 的 window 对象中注册方法，此处我注册的对象名叫 JSBridge ，在该对象中写入了一个 nativeMethod 方法，h5 中直接调用 nativeMethod() 方法即可向原生发送消息。

H5侧（附代码）

h5侧直接调用 window 对象下的 JSBridge.nativeMethod 方法，第一个参数对应原生侧对应的 channelName 方法名，第二个参数为 h5 自定义参数，可带入回调方法，供原生侧完成调用的回调结果。

附代码：

<!--* @Author: liuwei* @Date: 2023-12-18 15:14:22* @LastEditors: liuwei* @LastEditTime: 2023-12-18 15:23:40* @Description:
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./icsshosdk.js"></script><style>body {padding-top: 80px;}.title {background: #eee;line-height: 60px;text-align: center;margin-bottom: 50px;}.button {cursor: pointer;line-height: 45px;color: #fff;border-radius: 10px;left: 20%;width: calc(100% - 30px);text-align: center;background: #616bff;margin: 15px;}.button:active {background: #525dff;}</style><script>document.addEventListener('webActiveReceive', (e) => {console.log("luvi > " + JSON.stringify(e.detail));let { key, data } = JSON.parse(e.detail)switch (key) {case "changeBgColor":document.getElementById("idt").style = "background: #ffecea;color: #ff7361"break;case "changeBtColor":document.querySelectorAll(".button").forEach(el => {el.style = `background: ${data}`})break;default:break;}})</script><script>function openNativePage() {let params = {name: "LoginPage",success: function (res) {console.log("luviWeb > openNativePage success. " + res)},fail: function () {console.log("luviWeb > openNativePage fail.")}}window.JSBridge.nativeMethod("openNativePage", params)}function getCity() {let params = {success: function (res) {document.getElementById("cityName").innerText = `当前城市：${res}`},fail: function () {console.log("luviWeb > getCity fail.")}}window.JSBridge.nativeMethod("getCity", params)}</script>
</head><body><div style="width: 100%;"><p class="title" id="idt">JSBridge演示</p><div><p class="button" onclick="openNativePage()">跳转原生页面</p></div><div style="margin-top: 30px;"><p style="margin-left: 15px;" id="cityName">当前城市：</p><p class="button" onclick="getCity()">获取当前定位</p></div></div>
</body></html>

鸿蒙侧（附代码）

附代码：

import { webview } from '@kit.ArkWeb';export interface IParamsCallback {name: stringkey: stringsuccess: (data?: string) => voidfail: (data?: string) => void
}@Entry
@Component
export struct MyWeb {webController: WebviewController = new webview.WebviewController()webUrl: string | Resource = "";build() {Column() {Web({ src: this.webUrl, controller: this.webController }).javaScriptProxy({object: {nativeMethod: (channelName: string, paramsCallback: IParamsCallback) => {if (!channelName || !paramsCallback) {return}switch (channelName) {case "openNativePage":paramsCallback.success()console.log("luvi > h5调用 openNativePage 方法，携带参数" + paramsCallback.name)break;case "getCity":paramsCallback.success()console.log("luvi > h5调用 getCity 方法，携带参数" + paramsCallback.name)break;default:break;}},},name: 'JSBridge',methodList: ['nativeMethod'],controller: this.webController,}).fileAccess(true).domStorageAccess(true).zoomAccess(false).width("100%").height("100%")}}
}

案例效果

【HarmonyOS NEXT】Web 组件的基础用法以及 H5 侧与原生侧的双向数据通讯

关键词：鸿蒙、ArkTs、Web组件、通讯、数据官方文档Web组件用法介绍：文档中心 Web 组件加载沙箱中页面可参考我的另一篇文章：【HarmonyOS NEXT】如何将rawfile中文件复制到沙箱中_鸿蒙rawfile 复制到沙箱-CSDN博客目录如何在鸿蒙应用中加…...

编程日记 2025/6/1 10:48:36

7-2 排序

输入一批未排序的数据，数量不超过30个，请使用选择法或者冒泡法对其排序，并按照规定的要求输出。输入格式: 先输入待排序的整形数的个数；然后输入所有的待排序的数据。输出格式: 在一行中按照由大到小的顺序输出排序好的数据…...

编程日记 2025/6/3 2:14:26

Java通过反射破坏单例模式

有个第三方工具类，不支持多例模式。但是又不能直接改第三方工具类的代码，因此可以通过反射破坏第三方工具类的单例。第三方工具类反编译如下可以看到构造函数进行了私有化，不允许外部new，只能通过newInstance进行实例化。并且…...

编程日记 2025/6/3 2:34:23

FFmpeg第一话：FFmpeg 简介与环境搭建

FFmpeg 探索之旅一、FFmpeg 简介与环境搭建二、FFmpeg 解码详解第一话：FFmpeg 简介与环境搭建 FFmpeg 探索之旅一、前言二、FFmpeg 是什么？三、简单介绍其历史背景四、为什么用 C学习 FFmpeg？（一）高性能优势&#…...

编程日记 2025/6/2 10:26:53

C++并发编程： std::atomic对指针进行操作

std::atomic 对指针进行运算的用途 std::atomic 提供了一种在多线程环境中安全地操作指针的方法。这对于实现线程安全的指针管理、动态内存分配、链表操作等场景非常有用。通过使用std::atomic对指针进行运算，可以确保指针操作的原子性和多线程安全性。常见用途 …...

编程日记 2025/6/3 10:09:17

工业大数据分析算法实战-day08

文章目录 day08模型评价聚类算法基于距离的聚类基于层次的聚类基于密度的聚类基于分布的聚类聚类结果的评价 day08 今天是第8天，昨日阐述了概率图模型和集成学习的分类，主要讲解了有向图和无向图，生成式模型和判断式模型，以及集成…...

编程日记 2025/6/1 12:42:53

在 C# 中实现的目录基础操作

前言在开发应用程序过程中，对操作系统上的文件夹存储文件和子文件夹操作是常见的需求。.NET中的Directory类提供了处理文件目录的功能。本文介绍如何读取文件夹的属性、获取文件夹的大小及文件个数、创建文件夹、遍历文件夹中的所有文件、移动文件夹和删除文件夹等…...

编程日记 2025/5/30 10:56:57

Python 标识符是啥？

Python 的标识符就是我们写代码时用来给变量、函数、类等取名字的东西。你写的 my_variable 是个标识符， 定义的 add_numbers 函数名也是个标识符， 甚至你写的 Cat 类名，也是标识符。一句话总结：标识符就是代码里给“东西”起…...

编程日记 2025/6/4 11:20:53

WEB开发：全栈工程师起步 - Python Flask +SQLite的管理系统实现

一、前言罗马不是一天建成的。每个全栈工程师都是从HELLO WORLD 起步的。之前我们分别用NODE.JS 、ASP.NET Core 这两个框架实现过基于WebServer的全栈工程师入门教程。今天我们用更简单的来实现： Python。我们将用Python来实现一个学生管理应用&#xff0…...

编程日记 2025/6/4 16:02:26

将 Matplotlib 图形转换为 PIL 图像并返回

将 Matplotlib 图形转换为 PIL 图像并返回前言完整代码Matplotlib 中 fig 和 ax 的关系示例： 问题分析常见错误及解决方案总结前言 Matplotlib 是 Python 里最流行的图表展示库，PIL (Python Imaging Library)则是一个强大的图像处理库。在开发过程中&…...

编程日记 2025/6/2 21:34:42

F5中获取客户端ip地址(client ip)

当F5设备对其原始设置上的所有IP地址使用NAT时，连接到poo成员（nodes、backend servers）的出站连接将是NAT IP地址。 pool 成员（nodes、backend servers）将无法看到真实的客户端 ip地址，因为看到的是F5上的…...

编程日记 2025/6/3 17:17:50

点焊机器人维修-ABB-KUKA-FANUC-YASKAWA

在正式启用点焊机器人之前，一项至关重要的预备步骤便是进行焊枪的全面设置操作。以FANUC机器人为例，其焊枪的设置流程涵盖了多个关键环节，如焊枪运动方向的精确规划、焊枪规格的选择以及零点标定的细致执行等。这些设置均须严格依据实际所采用…...

编程日记 2025/6/3 13:55:20

springboot448教学辅助系统(论文+源码)_kaic

摘要互联网发展至今，无论是其理论还是技术都已经成熟，而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播，搭配信息管理工具可以很好地为人们提供服务。针对信息管理混乱，出错率高，信息安全性差&#x…...

编程日记 2025/6/3 2:14:27

网络地址转换(NAT)和端口映射

1. 网络地址转换(NAT) 1.1 NAT的应用场景 （1）应用场景：允许将私有IP地址映射到公网地址，以减缓IP地址空间的消耗 ①需要连接Internet，但主机没有公网IP地址 ②更换了一个新的ISP，需要重新组织网络时&…...

编程日记 2025/6/2 5:38:02

iClent3D for Cesium 实现无人机巡检飞行效果

作者：gaogy 1、背景随着地理信息技术的发展，三维地球技术逐渐成为了许多领域中的核心工具，尤其是在城市规划、环境监测、航空航天以及军事领域。三维地图和场景的应用正在帮助人们更加直观地理解空间数据，提供更高效的决策支持。…...

编程日记 2025/6/3 13:24:44

后端- spring cache框架操作缓存数据（底层可以是redis，也可以是caffeine和ehcache）

...

编程日记 2025/6/4 16:16:30

低比特语言模型是一种利用较少比特数进行语言建模的技术

Vanilla LLM: 基础的全精度语言模型，通常在较高比特数下运作 Vanilla LLM，或称为“基础的全精度语言模型”，是指使用标准的浮点数（通常是16位或32位）进行训练和推理的语言模型。这些模型依赖于经典的神经网络结构&…...

编程日记 2025/6/2 19:07:49

ES6中的map和set

Set ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 Set本身是一个构造函数，用来生成 Set 数据结构。以下代码 const s new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x > s.add(x));for (let i of s…...

编程日记 2025/6/2 6:38:29

【WRF安装】WRF编译错误总结1：HDF5库包安装

目录 1 HDF5库包安装有误：HDF5 not set in environment. Will configure WRF for use without.HDF5的重新编译错误原因1：提示 overflow 错误1. 检查系统是否缺少依赖库或工具2. 检查和更新编译器版本3. 检查 ./configure 报错信息4. 检查系统环境变量5.…...

编程日记 2025/6/3 20:07:31

MyBatis常见面试题总结

#{} 和 ${} 的区别是什么？ 注：这道题是面试官面试我同事的。答： ${}是 Properties 文件中的变量占位符，它可以用于标签属性值和 sql 内部，属于原样文本替换，可以替换任意内容，比如${driver}…...

编程日记 2025/6/3 16:17:41

Qt生成随机数的方法

后台接口要求传个流水单号，流水号的格式是：“设备序列号”“设备MAC地址”“20位的随机数”。具体的是： “设备序列号”：就是烧录工具写入设备的序列编号，这就不多说了，读出来就行； “设备MAC地…...

编程日记 2025/6/2 21:48:12

深入探索Vue.js中的v-if指令：条件渲染的高级技巧

深入探索Vue.js中的v-if指令：条件渲染的高级技巧引言在现代Web开发中，根据条件动态地渲染或移除DOM元素是一个常见的需求。Vue.js提供了一种简洁而强大的方法来实现这一目标，即通过v-if指令来根据表达式的值来控制元素的渲染。本文将详细…...

编程日记 2025/6/1 4:21:59

【记录50】uniapp安装uview插件，样式引入失败分析及解决

SassError: Undefined variable: "$u-border-color". 表示样式变量$u-border-color没定义，实际是定义的首先确保安装了scss/sass 其次，根目录下 app.vue中是否全局引入 <style lang"scss">import /uni_modules/uview-ui/in…...

编程日记 2025/5/31 10:33:59

NTLMv2 离线爆破

攻击者（kali）：192.168.72.162 受害者（administrator）：192.168.72.163 因为 NTLM 身份验证是通过计算正确的挑战值得出的，所以如果我们能获取域用户的 NTLM 认证某一服务的 Net-NTLM v2 Hash …...

编程日记 2025/6/3 0:22:06

LabVIEW实现RFID通信

目录 1、RFID通信原理 2、硬件环境部署 3、程序架构 4、前面板设计 5、程序框图设计 6、测试验证本专栏以LabVIEW为开发平台，讲解物联网通信组网原理与开发方法，覆盖RS232、TCP、MQTT、蓝牙、Wi-Fi、NB-IoT等协议。结合实际案例，展示如何利用LabVIEW和常用模块实现物联网系…...

编程日记 2025/6/2 3:24:43

【Three.js基础学习】31.Lights Shading

前言关于灯光如何在着色器中应用！ 下面将创建三个灯光分别是点光源，环境光，方向光通过这几种光应用着色器显示对应阴影学习灯光阴影，着色器的使用添加三盏灯点光，方向光，环境光创建一个环境光在现…...

编程日记 2025/6/1 15:59:37

Oracle Database 21c Express Edition数据库和 Sqlplus客户端安装配置

目录一. 前置条件二. Win10安装配置Oracle数据库2.1 数据库获取2.2 数据库安装2.3 数据库配置确认2.4 数据库访问三. Win10配置Oracle数据库可对外访问3.1 打开文件和打印机共享3.2 开放1521端口四. 端口与地址确认4.1 查看监听器的状态4.2 Win10查看1521端口是否被监听4.3 …...

编程日记 2025/6/4 9:43:07

IDEA搭建springboot demo

如下所示创建SpringBootTest18项目，我选的maven，创建完成项目后，maven会自动下载一些依赖库到maven的repository目录中。创建的项目结构如下图所示接下来在项目中加入Framework支持，右击项目，弹出的菜单如下图所示&a…...

编程日记 2025/6/2 22:45:51

SQLite Update 语句

SQLite Update 语句 SQLite 的 UPDATE 语句用于更新数据库表中的现有记录。使用 UPDATE 语句，您可以修改一个或多个列的值。本教程将详细介绍如何使用 SQLite UPDATE 语句，包括语法、示例以及一些最佳实践。语法 SQLite UPDATE 语句的基本语法如下&a…...

编程日记 2025/6/4 15:15:43

node.js的简单示例

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，用于方便地构建快速、可扩展的网络应用。下面是一个简单的Node.js示例，它创建了一个简单的HTTP服务器，当访问服务器时，它会响应“Hello World” // 引入Node.js的HTTP模块…...

编程日记 2025/6/1 3:05:15

fpga系列 HDL：Quartus II 时序约束静态时序分析 (STA) test.out.sdc的文件结构

test.out.sdc的文件结构 ## Generated SDC file "test.out.sdc"## Copyright (C) 1991-2013 Altera Corporation ## Your use of Altera Corporations design tools, logic functions ## and other software and tools, and its AMPP partner logic ## functions,…...

编程日记 2025/6/4 17:18:39

Restaurants WebAPI（一）—— clean architecture

文章目录项目地址一、Restaurants.Domain 核心业务层1.1 Entities实体层1.2 Repositories 数据操作EF的接口二、Restaurants.Infrastructure 基础设施层2.1 Persistence 数据EF CORE配置2.2 Repositories 数据查询实现2.3 Extensions 服务注册三、Restaurants.Application用例…...

编程日记 2025/6/2 0:38:41

A Unified Framework for STAR-RIS Coefficients Optimization

文章目录 AbstractB. A Penalty-based Reformulation of (1) III. OPTIMIZING AUXILIARY VARIABLES φ \boldsymbol φ φ IN P1IV. A CASE STUDY OF P2 ON DOWNLINK STAR-RIS ASSISTED TRANSMISSION SYSTEMA. 优化 x , ρ , w , λ t x, \rho, \mathbf{w}, \lambda^t x,ρ,w…...

编程日记 2025/6/4 16:29:15

rebase ‘A‘ onto ‘master‘ 和 merge ‘master‘ into ‘A‘有什么区别

在Git版本控制系统中，rebase 和 merge 是两种不同的操作，用于合并分支。rebase A onto master 和 merge master into A 虽然最终目的都是将两个分支的更改合并在一起，但它们在处理方式和结果上有所不同。 rebase ‘A’ onto ‘master’ 含义…...

编程日记 2025/6/2 6:34:27

谷歌发布最新视频生成模型 Veo 2：视频生成AI新王牌

谷歌在当今数字化快速发展的时代，人工智能视频生成技术正不断突破创新。就在12月17日，谷歌推出了一个新的视频模型 Veo 2 。 Veo 2 Veo 2 Veo 2 可以创建各种主题和风格的高质量视频。在谷歌官方由人工评估员判断中，Veo 2 与领先模型相比取得…...

编程日记 2025/6/4 9:19:39

2025erp系统开源免费进销存系统搭建教程/功能介绍/上线即可运营软件平台源码

系统介绍基于ThinkPHP与LayUI构建的全方位进销存解决方案本系统集成了采购、销售、零售、多仓库管理、财务管理等核心功能模块，旨在为企业提供一站式进销存管理体验。借助详尽的报表分析和灵活的设置选项，企业可实现精细化管理，提升运营效…...

编程日记 2025/6/4 16:23:49

基于Docker的Minio分布式集群实践

目录 1. 说明 2. 配置表 3. 步骤 3.1 放行服务端口 3.2 docker-compose 编排 4. 入口反向代理与负载均衡配置 4.1 api入口 4.2 管理入口 5. 用例 6. 参考 1. 说明以多节点的Docker容器方式实现minio存储集群，并配以nginx反向代理及负载均衡作为访问入口。…...

编程日记 2025/6/3 5:38:47

解决node.js的req.body为空的问题

从昨晚一直在试，明明之前用的封装的axios发送请求给其他的后端（springboot）是可以的，但昨天用了新项目的后端（node.js）就不行。之前用了代理，所以浏览器发送的post请求不会被拦截，…...

编程日记 2025/6/1 0:58:16

数据结构期末算法复习：树、查找、排序

一、树 1.二叉链-定义 typedef struct BiTNode{ ElemType data;//数据域 struct BiTNode *lchild ,*rchild;//左、右孩子指针 }BiTNode , *BiTree ;2.查找值为x的结点 BTNode FindNode(BTNode b，ElemType x) { BTNode *p;if (bNULL) return NULL;else if (…...

编程日记 2025/5/31 9:25:20

复习打卡Linux篇

目录 1. Linux常用操作命令 2. vim编辑器 3. 用户权限 4. Linux系统信息查看 1. Linux常用操作命令基础操作： 命令说明history查看历史执行命令ls查看指定目录下内容ls -a查看所有文件包括隐藏文件ls -l ll查看文件详细信息，包括权限类型时间大小…...

编程日记 2025/5/31 9:01:13

OpenAI API深度解析：参数、Token、计费与多种调用方式

随着人工智能技术的飞速发展，OpenAI API已成为许多开发者和企业的得力助手。本文将深入探讨OpenAI API的参数、Token、计费方式，以及如何通过Rest API（以Postman为例）、Java API调用、工具调用等方式实现与OpenAI的交互&#xff0…...

编程日记 2025/6/2 4:27:36

Centos7 部署ZLMediakit

1、拉取代码 #国内用户推荐从同步镜像网站gitee下载 git clone --depth 1 https://gitee.com/xia-chu/ZLMediaKit cd ZLMediaKit #千万不要忘记执行这句命令 git submodule update --init 2、安装编译器 sudo yum -y install gcc 3、安装cmake sudo yum -y install cmake 4…...

编程日记 2025/5/30 16:59:24

python：用 sklearn.metrics 评价 K-Means 聚类模型

sklearn 的 metrics 模块提供的聚类模型评价指标如下： ARI 评价法（兰德系数）: adjusted_rand_score AMI 评价法（相互信息）: adjusted_mutual_info_score V-measure 评分 : completeness_score FMI 评价法 : fowlkes_m…...

编程日记 2025/5/29 23:23:16

谁说C比C++快？

看到这个问题，我我得说：这事儿没有那么简单。 1. 先把最大的误区打破 "C永远比C快" —— 某位1990年代的程序员这种说法就像"自行车永远比汽车省油"一样荒谬。我们来看个例子： // C风格 char* str (char*)malloc(100…...

编程日记 2025/6/3 1:07:30

算法刷题Day23：BM60 括号生成

题目链接描述：给出n对括号，请编写一个函数来生成所有的由n对括号组成的合法组合。例如，给出n3，解集为： “((()))”, “(()())”, “(())()”, “()()()”, “()(())” 思路： 回溯左子树不断添加‘&#…...

编程日记 2025/6/3 2:44:47

基于Redis实现令牌桶算法

基于Redis实现令牌桶算法令牌桶算法算法流程图优点缺点实现其它限流算法令牌桶算法令牌桶是一种用于分组交换和电信网络的算法。它可用于检查数据包形式的数据传输是否符合定义的带宽和突发性限制（流量不均匀或变化的衡量标准）。它还可以用作调度算…...

编程日记 2025/6/3 0:41:36

XXE练习

pikachu-XXE靶场 1.POC:攻击测试 <?xml version"1.0"?> <!DOCTYPE foo [ <!ENTITY xxe "a">]> <foo>&xxe;</foo> 2.EXP:查看文件 <?xml version"1.0"?> <!DOCTYPE foo [ <!ENTITY xxe SY…...

编程日记 2025/6/1 21:10:33

Mac上使用ln指令创建软链接、硬链接

在Mac、Linux和Unix系统中，软连接（Symbolic Link）和硬连接（Hard Link）是两种不同的文件链接方式。它们的主要区别如下： 区别： 硬连接： 不能跨文件系统。不能链接目录（为…...

编程日记 2025/6/2 0:16:16

单元测试-Unittest框架实践

文章目录 1.Unittest简介1.1 自动化测试用例编写步骤1.2 相关概念1.3 用例编写规则1.4 断言方法 2.示例2.1 业务代码2.2 编写测试用例2.3 生成报告2.3.1 方法12.3.2 方法2 1.Unittest简介 Unittest是Python自带的单元测试框架，适用于：单元测试、Web自动…...

编程日记 2025/6/1 22:29:28

JAVA没有搞头了吗？

前言今年的Java程序员群体似乎承受着前所未有的焦虑。投递简历无人问津，难得的面试机会也难以把握，即便成功入职，也往往难以长久。于是，不少程序员感叹：互联网的寒冬似乎又一次卷土重来，环境如此恶劣&…...

编程日记 2025/6/3 22:10:18

如何在鸿蒙应用中加载一个Web页面

一、加载网络地址页面

​

二、加载本地H5页面

实现Web组件H5层与应用层进行相互通讯

一、鸿蒙应用向H5页面发送数据

鸿蒙侧

H5侧

案例效果

二、H5页面向鸿蒙应用发送数据（附代码）

H5侧 （附代码）

鸿蒙侧（附代码）

案例效果

相关文章：

H5侧（附代码）