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

鸿蒙next web组件和h5 交互实战来了

前言导读

鸿蒙next web组件这个专题之前一直想讲一下 苦于没有时间,周末把代码研究的差不多了,所以就趁着现在这个时间节点分享给大家。也希望能对各位读者网友工作和学习有帮助,废话不多说我们正式开始。

效果图
  • 默认页面 上面H5 下面ArkUI

在这里插入图片描述

  • 在H5输入框输入需要传递的参数 点击按钮发送到ArkUI 展示

在这里插入图片描述

  • 在ArkU输入框输入需要传递的参数 点击按钮发送到H5端 展示

在这里插入图片描述

  • 最终效果 H5调用ArkUI ArkUI调用H5完成流程

在这里插入图片描述

具体实现
  • H5调 ArkUI
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上面展示

  • ArkUI 端代码实现
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')})}
}
  • ArkUI 调用H5
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}")`)})
  • H5 端接收

window.fromNative = (text) => {document.getElementById('concat_tip').innerHTML = text
}

最后总结:

鸿蒙这边web组件和安卓的webview 以及ios的 wkwebview 比较像官方也给出了接口原生 ArkUI和H5能互相交互。文章案例中也给出具体的用法,各位可以查阅。如果有什么疑问也可以留言, 如果需要学习更多鸿蒙的知识可以瓜子你好我B站教程

课程地址

B站课程地址:www.bilibili.com/cheese/play…

项目内容:

团队介绍

团队介绍:作者: 坚果派-徐庆 坚果派由坚果等人创建,团队由12位华为HDE以及若干热爱鸿蒙的开发者和其他领域的三十余位万粉博主运营。专注于分享 HarmonyOS/OpenHarmony,ArkUI-X,元服务,仓颉,团队成员聚集在北京,上海,南京,深圳,广州,宁夏等地,目前已开发鸿蒙 原生应用,三方库60+,欢迎进行课程,项目等合作。

相关文章:

鸿蒙next web组件和h5 交互实战来了

前言导读 鸿蒙next web组件这个专题之前一直想讲一下 苦于没有时间&#xff0c;周末把代码研究的差不多了&#xff0c;所以就趁着现在这个时间节点分享给大家。也希望能对各位读者网友工作和学习有帮助&#xff0c;废话不多说我们正式开始。 效果图 默认页面 上面H5 下面ArkU…...

甘特图介绍

甘特图&#xff08;Gantt chart&#xff09;是一种常用于项目管理和计划安排的图表类型&#xff0c;它以图形的方式展示项目的任务、活动或工作流的时间线。甘特图得名于它的发明者亨利劳伦斯甘特&#xff08;Henry Laurence Gantt&#xff09;&#xff0c;他在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-上下采样

文章目录 一&#xff0c;简介二、下采样&#xff08;Downsampling&#xff09;三、上采样&#xff08;Upsampling&#xff09;四、代码实现1.图像读取2.下采样3.上采样4.拉普拉斯金字塔 五、应用 一&#xff0c;简介 高斯金字塔是图像处理、计算机视觉和信号处理中常用的一项技…...

pip install、yum install和conda install三者技术区分

pip install、yum install和conda install在安装系统环境时可以从以下几个方面进行区分选择&#xff1a; 一、适用范围 pip install 主要用于安装 Python 包。适用于 Python 项目中特定的库和工具的安装。如果你的项目是纯 Python 开发&#xff0c;并且需要安装各种 Python 库&…...

【C++指南】作用域限定符 :: 使用详解

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;《C指南》 期待您的关注 目录 引言 1. 访问全局变量 2. 命名空间中的成员访问 3. 类的静态成员访问 4. 嵌套命名空间/类中的…...

项目实训:CSS基本布局理解——WEB开发系列38

对CSS学习已经接近尾声&#xff0c;下面你可以对以下两道“小卡拉米”测试进行测试下CSS理解程度。 题 1&#xff1a;基于栅格布局的现代博客首页设计 题目要求&#xff1a; 创建一个博客首页布局&#xff0c;包含一个顶部导航栏、一个主要的内容区域&#xff08;左侧为博客文…...

springBoot整合easyexcel实现导入、导出功能

本次使用的框架是springboot&#xff0c;使用mybatisplus操作表&#xff0c;使用easyexcel实现表格的导入与导出。 操作步骤 1、导入依赖&#xff1a;&#xff08;pom.xml&#xff09; <!-- 查看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&#xff09;shell模块2&#xff09;command模块3&#xff09;script模块4&#xff09;file模块5&#xff09;copy模块6&#xff09;yum模块7&#xff09;yum-repository模块8&#xff09;service模块9&#…...

清理Go/Rust编译时产生的缓存

Go Mac 1T的磁盘频频空间高级&#xff0c;发现是/Users/yourname/Library/Caches/go-build 目录占用了大量空间。 此目录保存来自 Go 构建系统的缓存构建工件。 如果目录太大&#xff0c;请运行go clean -cache。 运行go clean -fuzzcache以删除模糊缓存。 当时直接手工清理了…...

【linux】 ls命令

ls 命令是 Linux 和 Unix 系统中用于列出目录内容的命令。它显示指定目录下的文件和子目录列表。如果不指定目录&#xff0c;ls 默认显示当前目录下的内容。 基本用法 ls [选项] [文件或目录...] 无选项&#xff1a;简单地列出当前目录下的文件和目录。文件或目录&#xff1…...

STM32的寄存器深度解析

目录 一、STM32 寄存器概述 二、寄存器的定义与作用 三、寄存器分类 1.内核寄存器 2.外设寄存器 四、重要寄存器详解 1.GPIO 相关寄存器 2.定时器相关寄存器 3.中断相关寄存器 4.RCC 相关寄存器 五、寄存器操作方法 1.直接操作寄存器 2.使用库函数操作寄存器 六…...

win11 运行vmware workstation 虚拟机很卡,解决办法

本身win11的hyper V和vmare workstation有兼容性问题&#xff0c;正常来说&#xff0c;不能二者共存 需要在win11上流畅运行vmare虚拟机&#xff0c;需要在win11用管理员权限打开power shell 然后在里面运行命令: bcdedit /set hypervisorlaunchtype off powercfg /powerthr…...

C语言 | Leetcode C语言题解之第404题左叶子之和

题目&#xff1a; 题解&#xff1a; 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

点击下载&#xff1a;jeesite5.8.1-db2-sql.rar 提取码: yqev...

微信小程序页面制作——婚礼邀请函(含代码)

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

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

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

网站指纹识别

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