鸿蒙端H5容器化建设——JSB通信机制建设

1. 背景

2023年鸿蒙开发者大会上，华为宣布为了应对国外技术封锁的潜在风险，2024年的HarmonyOS NEXT版本中将不再兼容Android，并推出鸿蒙系统以及其自研的开发框架，形成开发生态闭环。同时，在更高维度上华为希望将鸿蒙系统拓展应用到手机、智能穿戴、车机、家居等一系列物联网设备上，形成万物互联的品牌生态闭环。

基于以上背景，鸿蒙端上APP的适配问题是开发者不得不面对的问题，适配也将从原生和跨端两个方面进行。鸿蒙原生ArkTs包含的内容可以对标Android原生，既多又杂，可以参考官方文档；跨端则涉及H5、RN、Flutter的鸿蒙化适配。由于目前产品的跨端重心在H5，因此本文将主要介绍鸿蒙端H5容器化的适配工作，同时简述鸿蒙系统框架以及开发模式。

2. 鸿蒙系统架构

在这里插入图片描述
HarmonyOS整体遵从分层设计，从下向上依次为：内核层、系统服务层、框架层和应用层。可以看出，已经了抛离AOSP和JVM，去除了对Android依赖。

内核层

采用多内核设计，提供进程/线程管理、内存管理、文件系统、网络管理和外设管理等基础内核能力。驱动子系统HDF提供统一外设访问能力和驱动开发管理框架。

系统服务层

包括适用于各类设备的基础能力以及面向特定设备的专有能力，每个子系统内部支持按功能粒度裁剪。

框架层

为应用开发提供Java/C/C++/JS等多语言的用户程序框架，以及各种软硬件服务对外开放的多语言框架API。

应用层

支持基于框架层实现业务功能开发，支持跨设备调度与分发，为用户提供一致、高效的应用体验。

3. 鸿蒙开发模式

开发工具DevEco-Studio

开发工具下载地址：HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者，和Android Studio的功能和设计大体一致，工程结构也有诸多相似之处。但是仅处于起步阶段，各种问题还需要完善和解决，诸如模拟器H5页面无法交互、以及各种调试问题等。

开发语言与UI框架

ArkTs是华为基于TypeScript的自研开发语言。ArkUI 是一套声明式开发框架，它具备简洁自然的 UI 信息语法、丰富的 UI 组件、多维状态管理，以及实时多维度预览等能力，只需使用一套ArkTS API，就能在多个HarmonyOS设备上提供生动而流畅的用户界面体验，帮助开发者提升应用开发效率。

编译模式

ArkCompiler利用ArkTS的静态类型信息，进行类型推导并生成对象描述和内联缓存，加速运行时对字节码的解释执行；AOT（Ahead-of-Time）Compiler利用静态类型信息直接将字节码编译生成优化机器码，让应用启动即可运行高性能代码，提升应用启动和运行性能。

APP包结构

APP由一个或多个HAP（Harmony Ability Package）包以及描述APP属性的pack.info文件组成。HAP是Abiltiy类型的模块编译后的产物，而Library类型的模块编译后的产物为HAR（静态共享包）或者HSP（动态共享包），两者都是为了实现代码和资源的共享。HAR中的代码和资源跟随使用方编译，多个使用方会存在多份拷贝，而HSP中的代码和资源可以独立编译，运行时在同一进程中仅有一份，从而避免包膨胀问题。

4. 适配工作

原生业务

目前项目中，Native原始业务与H5跨端业务并存，基于Native的业务在新的鸿蒙系统上将无法运行，为了兼顾用户体验问题，只能使用ArkTS进行重写。这将是一个繁杂且漫长的适配工程，需要明确App核心功能，在初期版本上优先适配核心业务能力。

H5业务

鸿蒙提供了H5页面运行所需的Web容器，H5页面是可以百分百复用的。但是H5侧依赖Native能力的各种API需要额外做定制和适配，从而实现真正的H5容器化SDK，这将是优先级极高的适配工作。其中，H5与Native之间的通信机制建设则是重中之重的适配内容。

5. H5容器化建设——JSB通信机制建设

ArkTS侧与H5的通信机制是首先要解决的问题，有了JSB的桥，才有后续Native能力支撑的可能。JSB通信总体可以分为四个步骤来进行：
在这里插入图片描述

5.1 JSBridge初始化

在初始化阶段，需要通过webviewControll.runJavaScript()将JSBridge初始化脚本注入H5执行。脚本代码如下所示。其中callID用来标识H5回调；JSBridgeCallback方法用来执行H5侧回调；window.ohosCallNative对象给H5侧提供调用函数。

export const code = `const JSBridgeMap = {};let callID = 0;// 执行H5回调函数function JSBridgeCallback (id, params) {JSBridgeMap[id](params);JSBridgeMap[id] = null;delete JSBridgeMap[id];}// 在window中声明callNative方法供H5调用window.ohosCallNative = {callNative(method, params, callback) {const id = callID++;const paramsObj = {callID: id,data: params || null}JSBridgeMap[id] = callback || (() => {});JSBridgeHandle.call(method, JSON.stringify(paramsObj));}}
`;

5.2 JS代理注入

通过Web组件的javaScriptProxy属性，将JSBridgeHandle对象注册到H5侧的window上，作为H5调用原生的通道。

// JsBridge.ets
export default class JsBridge {controller: WebView.WebviewController;constructor(controller: WebView.WebviewController) {this.controller = controller;}/*** 注入JavaScript对象到window对象中  */get javaScriptProxy(): JavaScriptItem {return {object: {call: this.call},name: "JSBridgeHandle",methodList: ['call'],controller: this.controller} as JavaScriptItem;}initJsBridge(): void {this.controller.runJavaScript(code);}
}// PageDemo.ets
@Entry
@Component
struct PageDemo {webController: WebView.WebviewController = new WebView.WebviewController();private jsBridge: JSBridge = new JSBridge(this.webController);build() {Column() {Web({src: $rawfile('MainPage.html'),controller: this.webController}).javaScriptAccess(true).javaScriptProxy(this.jsBridge.javaScriptProxy).onPageBegin(() => {this.jsBridge.initJsBridge();})...}...}
}/*** javaScriptProxy object type.*/
export interface callType {call: (func: string, params: string) => void
}export interface JavaScriptItem {object: callType,name: string,methodList: Array<string>,controller: WebviewController
}

5.3 H5侧入口与回调

H5侧调用ohosCallNative对象中的callNative方法，传递func、params以及callback回调。在callNative中保存callback回调，并调用JSBridgeHandle的call方法。call方法作为H5调用原生侧接口的统一入口，在该方法中根据H5调用的方法名，匹配到对应的接口后调用，调用结束后通过this.callback()方法，将调用结果回传到H5。

// JsBridge.ets
export default class JsBridge {/*** 将ArkTS侧数据传递给call方法*/call = (func: string, params: string): void => {const paramsObject: ParamsItem = JSON.parse(params);let result: Promise<string> = new Promise((resolve) => resolve(''));switch (func) {case 'funName':result = "result from ArkTS";break;default:break;}result.then((data: string) => {this.callback(paramsObject?.callID, data);})}/*** 将ArkTS侧数据传递到H5*/callback = (id: number, data: string): void => {this.controller.runJavaScript(`JSBridgeCallback("${id}", ${JSON.stringify(data)})`);}
}/*** Function params object.*/
export interface ParamsItem {callID: number
}

5.4 H5侧主动发起调用ArkTS

实现了上述桥接逻辑后，在H5侧只需要调用ohosCallNative方法，将函数名以及回调函数传递到ArkTS。

  window.ohosCallNative.callNative('funName', {}, (data) => {...});

6. 总结

本文概述了鸿蒙系统的架构以及开发模式，并且指出鸿蒙的适配工作任重而道远。其中，Native侧的迁移适配需要大量的时间和成本；而H5作为天然的跨端生态，尤其是在业务中本来就有很重的业务承载，那么H5容器化是首先要去适配的。ArkTS与H5的JSB通信机制则是本文的重点描述内容，剩下的H5容器所需的Native能力，则需要一点一点去补齐。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/231742.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

智能优化算法应用：基于黑猩猩算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于黑猩猩算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于黑猩猩算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于黑猩猩算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.黑猩猩算法4.实验参数设定5.算法结果6.参考文…
阅读更多...
音视频学习(二十一)——rtmp收流(tcp方式)

音视频学习(二十一)——rtmp收流(tcp方式)

前言 本文主要介绍rtmp协议收流流程&#xff0c;在linux上搭建rtmp服务器&#xff0c;通过自研的rtmp收流库发起取流请求&#xff0c;使用ffmpegqt实现视频流的解码与播放。 关于rtmp协议基础介绍可查看&#xff1a;https://blog.csdn.net/www_dong/article/details/13102607…
阅读更多...
【机器学习】卷积神经网络(CNN)的特征数计算

【机器学习】卷积神经网络(CNN)的特征数计算

文章目录 基本步骤示例图解过程 基本步骤 在卷积神经网络&#xff08;CNN&#xff09;中&#xff0c;计算最后的特征数通常涉及到以下步骤&#xff1a; 确定输入尺寸&#xff1a; 首先&#xff0c;你需要知道输入数据的尺寸。对于图像数据&#xff0c;这通常是 (batch_size, c…
阅读更多...
Webpack安装及使用

Webpack安装及使用

win系统 全局安装Webpack及使用 前提&#xff1a;使用Webpack必须安装node环境&#xff0c;建议使用nvm管理node版本。 1&#xff1a;查看自己电脑是否安装了node 2&#xff1a;npm install webpack版本号 -g 3&#xff1a;npm install webpack-cli -g -g:表示全局安装 4&…
阅读更多...
龙芯loongarch64服务器编译安装gcc-8.3.0

龙芯loongarch64服务器编译安装gcc-8.3.0

前言 当前电脑的gcc版本为8.3.0，但是在编译其他依赖包的时候，出现各种奇怪的问题，会莫名其妙的中断编译。本地文章讲解如何自编译安装gcc，替换系统自带的gcc。 环境准备 下载页面：龙芯开源社区网站 - LoongArch GCC 8.3 交叉工具链 - 源码下载源码包名称如：loongson-gnu…
阅读更多...
2023-12-18 最大二叉树、合并二叉树、二叉搜索树中的搜索、验证二叉搜索树

2023-12-18 最大二叉树、合并二叉树、二叉搜索树中的搜索、验证二叉搜索树

654. 最大二叉树 核心&#xff1a;记住递归三部曲&#xff0c;一般传入的参数的都是题目给好的了&#xff01;把构造树类似于前序遍历一样就可&#xff01;就是注意单层递归的逻辑&#xff01; # Definition for a binary tree node. # class TreeNode: # def __init__(se…
阅读更多...
强化产品联动：网关V7独家解决方案的三重优势

强化产品联动：网关V7独家解决方案的三重优势

客户背景 某央企单位汇聚了众多业内优秀的工程师和科研人员&#xff0c;拥有先进的研发设施和丰富的研发经验&#xff0c;专注于为全球汽车行业提供创新和实用的解决方案。其研发成果不仅在国内市场上得到了广泛应用&#xff0c;也在国际市场上赢得了广泛的认可和赞誉。 客户需…
阅读更多...
jconsole与jvisualvm

jconsole与jvisualvm

jconsole 环境变量配置好后 直接输入在cmd 输入jconsole 即可 jvisualvm cmd 输入jvisualvm jvisualvm 能干什么 监控内存泄露&#xff0c;跟踪垃圾回收&#xff0c;执行时内存、cpu 分析&#xff0c;线程分析… 运行&#xff1a;正在运行的 休眠&#xff1a;sleep 等待…
阅读更多...
接口测试的工具（3）----postman+node.js+newman

接口测试的工具（3）----postman+node.js+newman

1.安装newman&#xff1a;输入命令之后 一定注意 什么都不要操作 静静的等待结束就行了。 2.安装失败的对此尝试不行 在用下面的方法 解压一下就行了 3.验证是否成功 多次尝试是可以在线安装成功的
阅读更多...
Unity中Shader URP最简Shader框架（ShaderGraph 转 URP Shader）

Unity中Shader URP最简Shader框架（ShaderGraph 转 URP Shader）

文章目录 前言一、 我们先了解一下 Shader Graph 怎么操作1、了解一下 Shader Graph 的面板信息2、修改Shader路径3、鼠标中键 或 Alt 鼠标左键 移动画布4、鼠标右键 打开创建节点菜单5、把ShaderGraph节点转化为 Shader 代码6、可以看出 URP 和 BuildIn RP 大体框架一致 二、…
阅读更多...
隐私计算介绍

隐私计算介绍

这里只对隐私计算做一些概念性的浅显介绍&#xff0c;作为入门了解即可 目录 隐私计算概述隐私计算概念隐私计算背景国外各个国家和地区纷纷出台了围绕数据使用和保护的公共政策国内近年来也出台了数据安全、隐私和使用相关的政策法规 隐私计算技术发展 隐私计算技术安全多方计…
阅读更多...
C# WPF上位机开发（usb设备访问）

C# WPF上位机开发（usb设备访问）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 目前很多嵌入式设备都支持usb访问&#xff0c;特别是很多mcu都支持高速usb访问。和232、485下个比较&#xff0c;usb的访问速度和它们基本不在一个…
阅读更多...
unittest自动化测试框架讲解以及实战

unittest自动化测试框架讲解以及实战

为什么要学习unittest 按照测试阶段来划分&#xff0c;可以将测试分为单元测试、集成测试、系统测试和验收测试。单元测试是指对软件中的最小可测试单元在与程序其他部分相隔离的情况下进行检查和验证的工作&#xff0c;通常指函数或者类&#xff0c;一般是开发完成的。 单元…
阅读更多...
工业数据的特殊性和安全防护体系探索思考

工业数据的特殊性和安全防护体系探索思考

随着工业互联网的发展&#xff0c;工业企业在生产运营管理过程中会产生各式各样数据&#xff0c;主要有研发设计数据、用户数据、生产运营数据、物流供应链数据等等&#xff0c;这样就形成了工业大数据&#xff0c;这些数据需要依赖企业的网络环境和应用系统进行内外部流通才能…
阅读更多...
【Python】—— NumPy基础及取值操作

【Python】—— NumPy基础及取值操作

NumPy基础及取值操作 第1关&#xff1a;ndarray对象第2关&#xff1a;形状操作第3关&#xff1a;基础操作第4关&#xff1a;随机数生成第5关&#xff1a;索引与切片 第1关&#xff1a;ndarray对象 任务描述 本关任务&#xff1a;根据本关所学知识&#xff0c;补全代码编辑器中…
阅读更多...
react基于antd二次封装spin组件

react基于antd二次封装spin组件

目录 react基于antd二次封装spin组件组件使用组件效果 react基于antd二次封装spin组件 组件 import { Spin } from antd; import propTypes from "prop-types"; import React from react; import styleId from "styled-components"; // 使用 父div必须加…
阅读更多...
【爬虫课堂】如何高效使用短效代理IP进行网络爬虫

【爬虫课堂】如何高效使用短效代理IP进行网络爬虫

目录 一、前言 二、代理IP的基本知识 三、短效代理IP的优势 四、高效使用短效代理IP的技巧 1. 多源获取代理IP 2. 质量筛选代理IP 3. 使用代理池 4. 定时更换代理IP 5. 失败重试机制 6. 监控和自动化 五、示例代码 六、结语 一、前言 网络爬虫是一种自动化程序&am…
阅读更多...
MongoDB中的关系

MongoDB中的关系

本文主要介绍MongoDB中的关系。 目录 MongoDB的关系嵌入关系引用关系 MongoDB的关系 MongoDB是一个非关系型数据库&#xff0c;它使用了键值对的方式来存储数据。因此&#xff0c;MongoDB没有像传统关系型数据库中那样的表、行和列的概念。相反&#xff0c;MongoDB中的关系是通…
阅读更多...
LLM之RAG实战（五）| 高级RAG 01：使用小块检索，小块所属的大块喂给LLM，可以提高RAG性能

LLM之RAG实战（五）| 高级RAG 01：使用小块检索，小块所属的大块喂给LLM，可以提高RAG性能

RAG&#xff08;Retrieval Augmented Generation&#xff0c;检索增强生成&#xff09;系统从给定的知识库中检索相关信息&#xff0c;从而使其能够生成事实信息、上下文相关信息和特定领域的信息。然而&#xff0c;在有效检索相关信息和生成高质量响应方面&#xff0c;RAG面临…
阅读更多...
【网络安全】-Linux操作系统—CentOS安装、配置

【网络安全】-Linux操作系统—CentOS安装、配置

文章目录 准备工作下载CentOS创建启动盘确保硬件兼容 安装CentOS启动安装程序分区硬盘网络和主机名设置开始安装完成安装 初次登录和配置更新系统安装额外的软件仓库安装网络工具配置防火墙设置SELinux安装文本编辑器配置SSH服务 总结 CentOS是一个基于Red Hat Enterprise Linu…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023