鸿蒙跨端实践-ArkTS和CAPI的混合开发实现

京东云技术团队

于 2024-09-03 18:31:04 发布

阅读量1.3k

点赞数 16

文章标签： harmonyos cocoa 华为

本文链接：https://blog.youkuaiyun.com/JDDTechTalk/article/details/141868779

版权

一、背景

在动态化-鸿蒙跨端方案文章中，讲述了动态化适配鸿蒙的方案实现，当在鸿蒙系统进行UI渲染的时候，我们使用了系统的组件进行递归渲染。在iOS和Android也是借助各自系统组件进行的渲染，但是在鸿蒙系统会存在以下4个严重问题：

1. UI层级过多

以金融APP理财频道页中的一个乐高楼层中的“7天理财”文案为例，鸿蒙系统总计52层，iOS30层。层级过多会直接影响渲染性能，到达一定层级后会造成页面掉帧和卡顿。

2. 通讯流程长

在实现鸿蒙跨端方案中，JS虚拟机(V8)运行JS代码，通过JSI打通C++，再通过华为NAPI从C++打通ArkTS，跨语言通讯成本高。

3. 列表渲染性能差

长列表渲染性能是iOS、Android、Harmony系统非常重要的指标，华为也一直在推出多种方案以提升列表渲染性能。但在业界所有三方框架渲染长列表复杂业务场景(例如社区频道页面)时，在ArkUI层因设计原理导致性能问题一直无法完美解决。

4、二次布局

在对接到鸿蒙系统组件后，因为设置了相关布局属性后，系统会进行二次布局。

二、新方案实践

1.问题剖析

UI层级过多：原因在于在鸿蒙系统使用系统组件进行递归渲染的时候，需要借助自定义组件进行实现，然而和iOS和Android端的命令式组件渲染不同，比如RomaDiv对应iOS就是直接翻译为UIView即可，在鸿蒙必须增加一个包裹的容器才是一个合法的自定义组件，比如Stack容器，这样每个组件的层级就多了一层。

@Componentexport 
struct RomaDiv {
    build(){
        Stack(){
            //借助wrapBuilder实现递归
            ForEach(this.childrenTags, (childrenTag) => {
                  RomaComp