鸿蒙next web组件和h5 交互实战来了
前言导读
鸿蒙next web组件这个专题之前一直想讲一下 苦于没有时间,周末把代码研究的差不多了,所以就趁着现在这个时间节点分享给大家。也希望能对各位读者网友工作和学习有帮助,废话不多说我们正式开始。
效果图
具体实现
H5端代码简单实现
<!-- MainPage.html -->
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" type="text/css" href="./css/main.css"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>testApp</title>
</head>
<script>window.ohosCallNative.callNative('getProportion', {}, (data) => {document.getElementsByTagName("html")[0].style.fontSize = data + 'px';})
</script>
<body>
<div class="container"><div class="selectConcat"><div class="flex-input"><input type="tel" id="phone" placeholder="请输入你要传输的数据" oninput="changeVal(event)" value=""/></div></div><div class="bottom-tip" onclick="towebview()">发送数据给鸿蒙原生端</div><div class="select_tips"><div id="phone_tip">来自鸿蒙原生的数据</div><div id="concat_tip"></div></div></div>
<script src="./js/mainPage.js"></script>
</body>
</html>
调用ArkUI原生方法
function towebview() {let input = event.target.value;const tel = document.getElementById('phone').value;window.ohosCallNative.callNative('changeTel', { tel: tel });
}
添加js和ArkUI交互
Web({src: $rawfile('MainPage.html'),controller: this.webController
}).javaScriptAccess(true).javaScriptProxy(this.jsBridge.javaScriptProxy).height('50%').onPageBegin(() => {this.jsBridge.initJsBridge();})
调用原生ArkUI 方法
get javaScriptProxy(): JavaScriptItem {let result: JavaScriptItem = {object: {call: this.call},name: 'JSBridgeHandle',methodList: ['call'],controller: this.controller}return result;
}call = (func: string, params: string): void => {const paramsObject: ParamsItem = JSON.parse(params);let result: Promise<string> = new Promise((resolve) => resolve(''));switch (func) {case 'chooseContact':result = this.chooseContact();break;case 'changeTel':result = this.changeTel(paramsObject);break;case 'changeAmount':result = this.changeAmount();break;case 'getProportion':result = this.getProportion();break;default:break;}result.then((data: string) => {this.callback(paramsObject?.callID, data);})
}/*** Change tel function.*/
changeTel = (params: ParamsItem): Promise<string> => {Logger.info('手机号', JSON.stringify(params));const tel: string = params.data.tel ?? '';Logger.error("tel -- > "+tel)AppStorage.set<string>('tel', tel);return new Promise((resolve) => {resolve('success');})
}
我们通过JavaScriptItem 中的call 接收到H5那边调用 ArkUI 这边方法 拿到传过来的数据然后从存储再 AppStorage然后我们在UI上面展示
import { webview } from '@kit.ArkWeb';
import { display } from '@kit.ArkUI';
import { promptAction } from '@kit.ArkUI';
import JSBridge from '../common/utils/JsBridge';
import { CommonConstants } from '../common/constant/CommonConstant';
import Logger from '../common/utils/Logger';@Extend(TextInput) function inputStyle(){.placeholderColor($r('app.color.placeholder_color')).height(45).fontSize(18).backgroundColor($r('app.color.background')).width('80%').padding({left:0}).margin({top:12})
}
//线条样式
@Extend(Line) function lineStyle(){.width('100%').height(1).backgroundColor($r('app.color.line_color'))
}
//黑色字体样式
@Extend(Text) function blackTextStyle(size?:number ,height?:number){.fontColor($r('app.color.black_text_color')).fontSize(18).fontWeight(FontWeight.Medium)
}@Entry
@Component
struct SelectContact {@StorageLink('isClick') isClick: boolean = false;@StorageLink('tel') phoneNumber: string = '';@StorageLink('proportion') proportion: number = 0;@State towebstr:string='';@State chargeTip: Resource = $r('app.string.recharge_button');webController: webview.WebviewController = new webview.WebviewController();private jsBridge: JSBridge = new JSBridge(this.webController,this.towebstr,"获取到的数据");aboutToAppear() {display.getAllDisplays((err, displayClass: display.Display[]) => {if (err.code) {Logger.error('SelectContact Page', 'Failed to obtain all the display objects. Code: ' + JSON.stringify(err));return;}this.proportion = displayClass[0].densityDPI / CommonConstants.COMMON_VALUE;Logger.info('Succeeded in obtaining all the display objects. Data: ' + JSON.stringify(displayClass));});}build() {Column() {Web({src: $rawfile('MainPage.html'),controller: this.webController}).javaScriptAccess(true).javaScriptProxy(this.jsBridge.javaScriptProxy).height('50%').onPageBegin(() => {this.jsBridge.initJsBridge();})Row(){Text('原生').blackTextStyle()TextInput({placeholder:'请输入要传递给H5的数据'}).maxLength(12).type(InputType.Normal).inputStyle().onChange((value:string)=>{this.towebstr=value;}).margin({left:20})}.justifyContent(FlexAlign.SpaceBetween).width('100%').margin({top:8})Line().lineStyle().margin({left:80})Button('发送数据给网页').width(CommonConstants.FULL_SIZE).height($r('app.float.button_height')).margin({ bottom: $r('app.float.button_margin_bottom'),top:20 }).onClick(() => {Logger.error("towebstr " +this.towebstr)this.jsBridge.chooseContact();this.webController.runJavaScript(`window.fromNative("${this.towebstr}")`)})Row(){Text('来自H5的数据').fontSize(15).fontColor(Color.Gray)Text(this.phoneNumber).fontSize(20).fontColor(Color.Red)}.justifyContent(FlexAlign.Center).margin({top:20})}.width(CommonConstants.FULL_SIZE).height(CommonConstants.FULL_SIZE).backgroundColor($r('app.color.page_color')).padding({left: $r('app.float.margin_left_normal'),right: $r('app.float.margin_right_normal')})}
}
Button('发送数据给网页').width(CommonConstants.FULL_SIZE).height($r('app.float.button_height')).margin({ bottom: $r('app.float.button_margin_bottom'),top:20 }).onClick(() => {Logger.error("towebstr " +this.towebstr)this.jsBridge.chooseContact();this.webController.runJavaScript(`window.fromNative("${this.towebstr}")`)})
window.fromNative = (text) => {document.getElementById('concat_tip').innerHTML = text
}
最后总结:
鸿蒙这边web组件和安卓的webview 以及ios的 wkwebview 比较像官方也给出了接口原生 ArkUI和H5能互相交互。文章案例中也给出具体的用法,各位可以查阅。如果有什么疑问也可以留言, 如果需要学习更多鸿蒙的知识可以瓜子你好我B站教程
课程地址
B站课程地址:www.bilibili.com/cheese/play…
项目内容:
-
1 常用布局组件的学习
-
2 网络请求工具类封装
-
3 arkui 生命周期启动流程
-
4 日志工具类的封装
-
5 自定义组合组件的封装
-
6 路由导航跳转的使用
-
7 本地地数据的缓存 以及缓存工具类的封装
-
8 欢迎页面的实现
-
9 登录案例和自动登录效果实现
-
10 请求网络数据分页上拉加载 下拉刷新的实现
-
11 list数据懒加载实现
-
12 webview组件的使用
团队介绍
团队介绍:作者: 坚果派-徐庆 坚果派由坚果等人创建,团队由12位华为HDE以及若干热爱鸿蒙的开发者和其他领域的三十余位万粉博主运营。专注于分享 HarmonyOS/OpenHarmony,ArkUI-X,元服务,仓颉,团队成员聚集在北京,上海,南京,深圳,广州,宁夏等地,目前已开发鸿蒙 原生应用,三方库60+,欢迎进行课程,项目等合作。
相关文章:

鸿蒙next web组件和h5 交互实战来了
前言导读 鸿蒙next web组件这个专题之前一直想讲一下 苦于没有时间,周末把代码研究的差不多了,所以就趁着现在这个时间节点分享给大家。也希望能对各位读者网友工作和学习有帮助,废话不多说我们正式开始。 效果图 默认页面 上面H5 下面ArkU…...
甘特图介绍
甘特图(Gantt chart)是一种常用于项目管理和计划安排的图表类型,它以图形的方式展示项目的任务、活动或工作流的时间线。甘特图得名于它的发明者亨利劳伦斯甘特(Henry Laurence Gantt),他在20世纪初开发了这…...

第十一章 【后端】商品分类管理微服务(11.1)——创建父工程
第十一章 【后端】商品分类管理微服务 11.1 创建父工程 项目名称:EasyTradeManagerSystem:Easy 表示简单易用,Trade 表示交易,Manager 表示管理,System 表示系统,强调系统在商品交易管理方面的便捷性,简称 etms。 新建工程 yumi-etms yumi-etms 作为所有模块的父工程,…...
c语言中的“二级指针”与“指针数组”
二级指针 int main() { int a10; int *pa&a; //pa是一级指针 int **ppa&pa; //ppa就是二级指针变量 *说明ppa是指针变量。ppa指向pa的类型是int* rerurn 0; } 二级指针就是用来存放一级指针变量的地址。 *ppa其实访问的就是pa。**ppa其实也就是*pa…...

IDA f5 无法生成伪代码 too big function 的原因之一以及解决方法
IDA 提示 0x00xxxxx: too big function 其中可能的原因可能是因为 c的异常 try catch 导致函数跳转太远导致的 找到地址 B64778 在 jmp ___CxxFrameHandler3上按 “e” 将函数的结尾定在这里 然后再按 f5 函数就已经成功生成了...
OpenCV-上下采样
文章目录 一,简介二、下采样(Downsampling)三、上采样(Upsampling)四、代码实现1.图像读取2.下采样3.上采样4.拉普拉斯金字塔 五、应用 一,简介 高斯金字塔是图像处理、计算机视觉和信号处理中常用的一项技…...
pip install、yum install和conda install三者技术区分
pip install、yum install和conda install在安装系统环境时可以从以下几个方面进行区分选择: 一、适用范围 pip install 主要用于安装 Python 包。适用于 Python 项目中特定的库和工具的安装。如果你的项目是纯 Python 开发,并且需要安装各种 Python 库&…...

【C++指南】作用域限定符 :: 使用详解
💓 博客主页:倔强的石头的CSDN主页 📝Gitee主页:倔强的石头的gitee主页 ⏩ 文章专栏:《C指南》 期待您的关注 目录 引言 1. 访问全局变量 2. 命名空间中的成员访问 3. 类的静态成员访问 4. 嵌套命名空间/类中的…...

项目实训:CSS基本布局理解——WEB开发系列38
对CSS学习已经接近尾声,下面你可以对以下两道“小卡拉米”测试进行测试下CSS理解程度。 题 1:基于栅格布局的现代博客首页设计 题目要求: 创建一个博客首页布局,包含一个顶部导航栏、一个主要的内容区域(左侧为博客文…...
springBoot整合easyexcel实现导入、导出功能
本次使用的框架是springboot,使用mybatisplus操作表,使用easyexcel实现表格的导入与导出。 操作步骤 1、导入依赖:(pom.xml) <!-- 查看excel的maven仓库 https://mvnrepository.com/artifact/com.alibaba/easyex…...
代码随想录训练营第35天|逆序背包
46. 携带研究材料 #include <iostream> #include <vector> using namespace std; int main(){int m,n;cin>>m>>n;vector<int> weights(m,0), values(m,0),dp(n1,0);for(int i0; i<m; i){cin>>weights[i];}for(int i0; i<m; i){cin…...

Centos7环境下Hive的安装
Centos7环境下Hive的安装 前言一、安装Hive1.1 下载并解压1.2 配置环境变量1.3 修改配置1. hive-env.sh2. hive-site.xml 1.4 拷贝数据库驱动1.5 初始化元数据库报错 1.6 安装MySQL1.7 启动 二、HiveServer2/beeline2.1 修改Hadoop配置2.2 修改Hive配置2.2 启动hiveserver22.3 …...

??Ansible——ad-hoc
文章目录 一、ad-hoc介绍二、ad-hoc的使用1、语法2、ad-hoc常用模块1)shell模块2)command模块3)script模块4)file模块5)copy模块6)yum模块7)yum-repository模块8)service模块9&#…...

清理Go/Rust编译时产生的缓存
Go Mac 1T的磁盘频频空间高级,发现是/Users/yourname/Library/Caches/go-build 目录占用了大量空间。 此目录保存来自 Go 构建系统的缓存构建工件。 如果目录太大,请运行go clean -cache。 运行go clean -fuzzcache以删除模糊缓存。 当时直接手工清理了…...
【linux】 ls命令
ls 命令是 Linux 和 Unix 系统中用于列出目录内容的命令。它显示指定目录下的文件和子目录列表。如果不指定目录,ls 默认显示当前目录下的内容。 基本用法 ls [选项] [文件或目录...] 无选项:简单地列出当前目录下的文件和目录。文件或目录࿱…...

STM32的寄存器深度解析
目录 一、STM32 寄存器概述 二、寄存器的定义与作用 三、寄存器分类 1.内核寄存器 2.外设寄存器 四、重要寄存器详解 1.GPIO 相关寄存器 2.定时器相关寄存器 3.中断相关寄存器 4.RCC 相关寄存器 五、寄存器操作方法 1.直接操作寄存器 2.使用库函数操作寄存器 六…...
win11 运行vmware workstation 虚拟机很卡,解决办法
本身win11的hyper V和vmare workstation有兼容性问题,正常来说,不能二者共存 需要在win11上流畅运行vmare虚拟机,需要在win11用管理员权限打开power shell 然后在里面运行命令: bcdedit /set hypervisorlaunchtype off powercfg /powerthr…...

C语言 | Leetcode C语言题解之第404题左叶子之和
题目: 题解: bool isLeafNode(struct TreeNode *node) {return !node->left && !node->right; }int sumOfLeftLeaves(struct TreeNode *root) {if (!root) {return 0;}struct TreeNode **q malloc(sizeof(struct TreeNode *) * 2001);in…...
jeesite支持db2数据库初始化sql
点击下载:jeesite5.8.1-db2-sql.rar 提取码: yqev...

微信小程序页面制作——婚礼邀请函(含代码)
✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中,拉取视频流只要求udp方式,从2016开始要求新增支持tcp被动和tcp主动两种方式,udp理论上会丢包的,所以实际使用过程可能会出现画面花屏的情况,而tcp肯定不丢包,起码…...

工业安全零事故的智能守护者:一体化AI智能安防平台
前言: 通过AI视觉技术,为船厂提供全面的安全监控解决方案,涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面,能够实现对应负责人反馈机制,并最终实现数据的统计报表。提升船厂…...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式(Python 实现) 在 Python 中,你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是,.doc 是旧的 Word 格式,而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

自然语言处理——Transformer
自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效,它能挖掘数据中的时序信息以及语义信息,但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN,但是…...
06 Deep learning神经网络编程基础 激活函数 --吴恩达
深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...
基于matlab策略迭代和值迭代法的动态规划
经典的基于策略迭代和值迭代法的动态规划matlab代码,实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...
JAVA后端开发——多租户
数据隔离是多租户系统中的核心概念,确保一个租户(在这个系统中可能是一个公司或一个独立的客户)的数据对其他租户是不可见的。在 RuoYi 框架(您当前项目所使用的基础框架)中,这通常是通过在数据表中增加一个…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍: img 属性指定分区存放的 image 名称,指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件,则以 proj_name:binary_name 格式指定文件名, proj_name 为工程 名&…...

网站指纹识别
网站指纹识别 网站的最基本组成:服务器(操作系统)、中间件(web容器)、脚本语言、数据厍 为什么要了解这些?举个例子:发现了一个文件读取漏洞,我们需要读/etc/passwd,如…...