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

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

news 2025/7/8 2:12:57

 关键词：鸿蒙、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

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2025/7/7 9:01:16

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

编程新知 2025/6/18 5:34:10

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/6/15 19:02:54

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/6/17 4:52:56

（二）TensorRT-LLM | 模型导出（v0.20.0rc3）

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

编程新知 2025/7/2 15:02:24

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2025/7/4 11:10:06

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/6/26 20:21:28

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/6/17 10:29:06

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

编程新知 2025/7/5 1:17:25

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/7/6 13:29:31