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

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

news 2025/11/22 18:34:41

 关键词：鸿蒙、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 侧与原生侧的双向数据通讯

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

编程日记 2024/12/24 1:05:32

Android学习(六)-Kotlin编程语言-数据类与单例类

假设我们要创建一个表示书籍的数据类 Book&#xff0c;包含书名和作者两个字段。在 Java 中&#xff0c;代码如下&#xff1a; public class Book { String title; String author; public Book(String title, String author) { this.title title; this.author author; } Ove…...

编程日记 2024/12/24 1:01:29

CV-OCR经典论文解读|An Empirical Study of Scaling Law for OCR/OCR 缩放定律的实证研究

论文标题 An Empirical Study of Scaling Law for OCR OCR 缩放定律的实证研究 论文链接&#xff1a; An Empirical Study of Scaling Law for OCR论文下载 论文作者 Miao Rang, Zhenni Bi, Chuanjian Liu, Yunhe Wang, Kai Han 内容简介 本论文在光学字符识别&#xf…...

编程日记 2024/12/24 1:00:28

力扣274. H 指数

给你一个整数数组 citations &#xff0c;其中 citations[i] 表示研究者的第 i 篇论文被引用的次数。计算并返回该研究者的 h 指数。 根据维基百科上 h 指数的定义&#xff1a;h 代表“高引用次数” &#xff0c;一名科研人员的 h 指数 是指他&#xff08;她&#xff09;至少发…...

编程日记 2024/12/24 0:58:25

挑战一个月基本掌握C++（第五天）了解运算符，循环，判断

一 运算符 运算符是一种告诉编译器执行特定的数学或逻辑操作的符号。C 内置了丰富的运算符&#xff0c;并提供了以下类型的运算符&#xff1a; 算术运算符关系运算符逻辑运算符位运算符赋值运算符杂项运算符 1.1 算术运算符 假设变量 A 的值为 10&#xff0c;变量 B 的值为…...

编程日记 2024/12/24 0:57:24

Python的sklearn中的RandomForestRegressor使用详解

文章目录 Python的sklearn中的RandomForestRegressor使用详解一、引言二、RandomForestRegressor简介1、随机森林回归原理2、RandomForestRegressor的主要参数 三、构建和训练模型1、数据准备2、数据划分3、模型训练 四、模型评估1、预测2、评估指标 五、特征重要性分析六、可视…...

编程日记 2024/12/24 0:53:20

ReactPress 1.6.0：重塑博客体验，引领内容创新

ReactPress 是一个基于Next.js的博客&CMS系统&#xff0c; Github项目地址&#xff1a;https://github.com/fecommunity/reactpress 欢迎Star。 体验地址&#xff1a;http://blog.gaoredu.com/ 今天&#xff0c;我们自豪地宣布ReactPress 1.6.0版本的正式发布&#xff0c;…...

编程日记 2024/12/24 0:50:17

人脸生成3d模型 Era3D

从单视图图像进行3D重建是计算机视觉和图形学中的一项基本任务&#xff0c;因为它在游戏设计、虚拟现实和机器人技术中具有潜在的应用价值。早期的研究主要依赖于直接在体素上进行3D回归&#xff0c;这往往会导致过于平滑的结果&#xff0c;并且由于3D训练数据的限制&#xff0…...

编程日记 2024/12/24 0:41:09

kubeadm搭建k8s集群

前置环境&#xff1a; 准备三台虚拟机 192.168.1.104&#xff08;用来做k8s的mater节点&#xff09; 192.168.1.105&#xff08;节点node2&#xff09; 192.168.1.109&#xff08;节点node3&#xff09; 关闭防火墙 systemctl stop firewalld systemctl disable firewalld安装…...

编程日记 2024/12/24 0:40:08

centOS系统进程管理基础知识

进程的概念与属性 1.进程是系统中正在执行的代码片段&#xff0c;也可以称为一个程序。 2.操作系统通过分配进程编号&#xff08;PID&#xff09;来管理进程。 3.进程属性包括PID、PPID、UID、GID、状态、优先级、终端名和资源占用等。 PS命令与进程查看 1.PS命令用于查看进程…...

编程日记 2024/12/24 0:30:59

STM32中ADC模数转换器

一、ADC简介 ADC模拟-数字转换器 ADC可以将引脚连续变化的模拟电压转换为内存中存储的数字变量&#xff0c;建立模拟电路到数字电路的桥梁 12位逐次逼近型ADC&#xff0c;1us转换时间 输入电压范围&#xff1a; 0~3.3V&#xff0c;转换结果范围&#xff1a;0~4095 18个输入…...

编程日记 2024/12/24 0:27:56

初学stm32 --- 外部中断

目录 STM32 IO 口中断基础知识 相关库函数&#xff1a; 使用 IO 口外部中断的一般步骤 STM32 IO 口中断基础知识 STM32 的每个 IO 都可以作为外部中断的中断输入口。STM32F103 的中断控制器支持 19 个外部中断/事件请求。每个中断设有状态位&#xff0c;每个中断/事件都有独立…...

编程日记 2024/12/24 0:26:54

wordpress调用指定分类ID下 相同标签的内容

要在WordPress中调用分类ID为1、3、7的分类下&#xff0c;具有相同标签的前10个内容&#xff0c;可以使用自定义的WordPress查询(WP_Query)。以下是实现此功能的步骤和示例代码&#xff1a; 步骤&#xff1a; 确定共同标签&#xff1a; 首先&#xff0c;你需要确定分类1、3、…...

编程日记 2024/12/24 0:25:54

SQL语法基础知识总结

一、引言 在当今数字化时代&#xff0c;数据的存储和管理至关重要。SQL&#xff08;Structured Query Language&#xff09;&#xff0c;即结构化查询语言&#xff0c;是用于管理关系型数据库的强大工具。无论是开发 Web 应用、进行数据分析还是处理企业级数据&#xff0c;掌握…...

编程日记 2024/12/24 0:24:52

css 实现呼吸灯效果

先看效果&#xff1a; 动画的结果就想实在呼吸,完整的代码如下&#xff1a; <template><div class"container"><div class"long-breath"></div></div> </template><style lang"less"> html, body{h…...

编程日记 2024/12/24 0:23:51

IMX6ULL开发板如何关掉自带的QT的GUI界面和poky的界面的方法

重要说明&#xff1a;其实最后发现根本没必要去关掉自带的QT的GUI界面&#xff0c;直接把屏幕先刷黑就可以看到测试效果了&#xff0c;把屏蔽先刷黑的代码见博文&#xff1a; https://blog.csdn.net/wenhao_ir/article/details/144594705 不过&#xff0c;既然花了时间摸索如何…...

编程日记 2024/12/24 0:21:49

几种广泛使用的 C++ 编译器

C 编译器有很多种&#xff0c;它们在不同的操作系统和开发环境中提供服务。以下是几种广泛使用的 C 编译器&#xff1a; 1. GCC (GNU Compiler Collection) 平台&#xff1a;跨平台&#xff08;Linux, macOS, Windows&#xff09;特点&#xff1a;GCC 是一个自由软件编译器套…...

编程日记 2024/12/24 0:19:47

《Vue进阶教程》第十六课：深入完善响应式系统之单例模式

往期内容&#xff1a; 《Vue进阶教程》第五课&#xff1a;ref()函数详解(重点) 《Vue进阶教程》第六课&#xff1a;computed()函数详解(上) 《Vue进阶教程》第七课&#xff1a;computed()函数详解(下) 《Vue进阶教程》第八课&#xff1a;watch()函数的基本使用 《Vue进阶教…...

编程日记 2024/12/24 0:17:45

C语言版解法力扣题：将整数按权重排序

1.题目描述 我们将整数 x 的 权重 定义为按照下述规则将 x 变成 1 所需要的步数&#xff1a; 如果 x 是偶数&#xff0c;那么 x x / 2 如果 x 是奇数&#xff0c;那么 x 3 * x 1 比方说&#xff0c;x3 的权重为 7 。因为 3 需要 7 步变成 1 &#xff08;3 --> 10 -->…...

编程日记 2024/12/24 0:14:42

Unity ECS和OOP优劣对比

OOP的优劣 面向对象编程&#xff08;OOP, Object-Oriented Programming&#xff09;是一种通过对象及其交互来组织代码的编程范式&#xff0c;广泛应用于软件开发中。以下是OOP的优缺点&#xff1a; 优点 代码可重用性 继承机制&#xff1a;通过继承&#xff0c;子类可以复用…...

编程日记 2024/12/24 0:11:38

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

编程新知 2025/10/16 13:22:06

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2025/11/20 1:58:08

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2025/11/16 23:25:52

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

编程新知 2025/11/22 12:47:06

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2025/11/18 10:05:03

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

编程新知 2025/10/4 21:24:40

VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

编程新知 2025/11/16 21:57:15

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

编程新知 2025/10/3 0:42:17

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

编程新知 2025/10/17 2:32:49

抽象类和接口（全）

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

编程新知 2025/11/17 8:04:50