Feature/ohos doc and vl requires

build-profile.json5

@@ -25,6 +25,18 @@
     ]
   },
   "modules": [
+    {
+      "name": "entry_c",
+      "srcPath": "./framework/examples/ohos-c-demo",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    },
     {
       "name": "entry_har",
       "srcPath": "./framework/examples/ohos-har-demo",
@@ -52,6 +64,6 @@
     {
       "name": "hippy",
       "srcPath": "./framework/ohos"
-    },
+    }
   ]
 }

docs/README.md

@@ -4,7 +4,7 @@
 
 更新时间：2025-2-14
 
-SDK介绍：Hippy 是 TDF 腾讯端框架（Tencent Device-oriented Framework）下的开源跨平台应用开发解决方案。Hippy 可以理解为一个精简版的浏览器，从底层做了大量工作，抹平了 iOS 和 Android 双端差异，提供了接近 Web 的开发体验，目前上层支持了 React 和 Vue 两套界面框架，前端开发人员可以通过它，将前端代码转换为终端的原生指令，进行原生终端 App 的开发。同时，Hippy 从底层进行了大量优化，在启动速度、渲染性能、动画速度、内存占用、包体积等方面都提供了业内顶尖的性能表现。
+SDK介绍：Hippy 是 TDF 腾讯端框架（Tencent Device-oriented Framework）下的开源跨平台应用开发解决方案。Hippy 可以理解为一个精简版的浏览器，从底层做了大量工作，抹平了 iOS、Android、Ohos 三端差异，提供了接近 Web 的开发体验，目前上层支持了 React 和 Vue 两套界面框架，前端开发人员可以通过它，将前端代码转换为终端的原生指令，进行原生终端 App 的开发。同时，Hippy 从底层进行了大量优化，在启动速度、渲染性能、动画速度、内存占用、包体积等方面都提供了业内顶尖的性能表现。
 
 更新日志：[Change log](https://github.com/Tencent/Hippy/releases)
 
@@ -27,7 +27,7 @@ SDK介绍：Hippy 是 TDF 腾讯端框架（Tencent Device-oriented Framework）
 
 ## 一次开发，多端运行
 
-使用 Hippy 框架开发后，代码可以同时运行在 Android、iOS、 Web等多个平台。
+使用 Hippy 框架开发后，代码可以同时运行在 Android、iOS、Ohos、Web等多个平台。
 
 ## 出色的性能表现
 
@@ -72,7 +72,7 @@ DOM Manager 从 Java/OC 抽离到 C++，作为中间枢纽，除了接收处理
 
 ### 渲染层
 
-* Native Renderer：使用 Android/iOS 原生组件进行渲染, 详见 [Android](architecture/render/android/native-render)、[iOS](architecture/render/ios/native-render)。
+* Native Renderer：使用 Android/iOS/Ohos 原生组件进行渲染, 详见 [Android](architecture/render/android/native-render)、[iOS](architecture/render/ios/native-render)、[Ohos](architecture/render/ohos/native-render)。
 * Voltron Renderer：使用 Flutter 渲染, 详见 [Voltron](architecture/render/voltron/voltron-render)。
 * Web Renderer：使用 WebView 渲染（Web 同构）, 详见 [Web](architecture/render/web/web-render)。
 

docs/_coverpage.md

@@ -10,7 +10,7 @@
 
 * 支持 React 和 Vue 两种语法
 * 平滑迁移到 Web
-* iOS 增量 1MB，Android 增量最小 2.5MB
+* iOS 增量 1MB，Android 增量最小 2.5MB，Ohos 增量 1.9MB
 
 [GitHub](//github.com/Tencent/Hippy)
 [快速开始](/README.md)

docs/architecture/_sidebar.md

@@ -4,6 +4,7 @@
 * [HippyCore 架构](architecture/core.md)
 * [Android 渲染原理](architecture/render/android/native-render.md)
 * [iOS 渲染原理](architecture/render/ios/native-render.md)
+* [Ohos 渲染原理](architecture/render/ohos/native-render.md)
 * [Voltron/Flutter 渲染原理](architecture/render/voltron/voltron-render.md)
 * [Web 渲染原理](architecture/render/web/web-render.md)
 * [排版盒模型](architecture/layout.md)

docs/architecture/introduction.md

@@ -19,7 +19,7 @@ DOM Manager 从 Java/OC 抽离到 C++，作为中间枢纽，除了接收处理
 
 ## 渲染层
 
-* Native Renderer：使用 Android/iOS 原生组件进行渲染, 详见 [Android](architecture/render/android/native-render)、[iOS](architecture/render/ios/native-render)。
+* Native Renderer：使用 Android/iOS/Ohos 原生组件进行渲染, 详见 [Android](architecture/render/android/native-render)、[iOS](architecture/render/ios/native-render)、[Ohos](architecture/render/ohos/native-render)。
 * Voltron Renderer：使用 Flutter 渲染, 详见 [Voltron](architecture/render/voltron/voltron-render)。
 * Web Renderer：使用 WebView 渲染（Web 同构）, 详见 [Web](architecture/render/web/web-render)。
 

docs/architecture/render/ohos/native-render.md

@@ -0,0 +1,36 @@
+# Ohos Native Renderer
+
+---
+
+Hippy 渲染器对接了 Ohos 的 ArkUI。ArkUI 提供了声明式 [TS API](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/arkui-api-V13) 和过程式 [C API](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/_ark_u_i___native_module.md)，TS API 开发方便，但性能不如 C API。
+Hippy 内部使用 C API 实现 UI 组件的绘制，同时支持业务通过 TS API 来实现自定义组件，也支持通过 C API 来实现自定义组件。
+
+Hippy Ohos 整体架构：
+
+![image](../../../assets/img/ohos_hippy_arch.png)
+
+其中渲染系统，分两部分：
+- C++渲染器：负责几乎所有组件渲染和流程管理。
+- TS渲染器：负责业务接入根组件、自定义组件、Web组件。（Web组件没有C接口）
+
+## 自定义组件
+
+支持两种语言实现自定义组件，TS和C，TS自定义组件开发方便，C自定义组件性能更好。一般页面内少量组件自定义，建议使用TS自定义组件，性能够用，对于极端性能场景，比如自定义Image、Text等基础组件，使用C自定义组件可以获得更好的性能。
+
+
+TS 语言实现自定义组件原理图：
+
+![image](../../../assets/img/ohos_custom_ts_comp.png)
+
+C 语言实现自定义组件原理图：
+
+![image](../../../assets/img/ohos_custom_c_comp.png)
+
+## TS 语言和 C 组件
+
+迁移老业务页面时，有的业务会在native侧直接操作hippy的组件来实现一些联动。
+设计一套通用的跨语言操作接口给业务调用。接口对齐前端，从而减少业务理解成本。
+
+正常前端操作、业务Native侵入操作、鸿蒙兼容方法对比图：
+
+![image](../../../assets/img/ohos_ts_op_c_comp.png)

docs/development/_sidebar.md

@@ -9,6 +9,7 @@
   - [Android 3.x SDK升级指引](development/android-3.0-upgrade-guidelines.md)
   - [iOS 3.x SDK集成指引](development/ios-3.0-integration-guidelines.md)
   - [iOS 3.x SDK升级指引](development/ios-3.0-upgrade-guidelines.md)
+  - [Ohos SDK集成指引](development/ohos-integration-guidelines.md)
   - [Voltron/Flutter集成指引](development/voltron-flutter-integration-guidelines.md)
 - [自定义组件](development/native-component.md)
 - [自定义模块](development/native-module.md)

docs/development/debug.md

@@ -61,6 +61,24 @@ Hippy 中运行的 JS 代码可以来源于本地文件(local file)，或者远
    }
    ```
 
+3. **Ohos**：
+
+   ```typescript
+        // 初始化 hippy 引擎
+        let initParams = new EngineInitParams(this.libHippy!, this.abilityContext!, this.getUIContext())
+        // 可选：是否设置为 debug 模式，默认为 false。设置 true 为调试模式，所有 jsbundle 都将从 debug server 上下载
+        initParams.debugMode = true;
+        initParams.debugServerHost = "192.168.76.25:38989"; // 这里请设置正确 JS Server 的 IP
+   ```
+
+Hippy鸿蒙版本支持 [JSVM](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/jsvm-introduction-V5) 和 V8 两个JS引擎，JSVM 性能更好所以默认使用JSVM，不过可以自由切换。
+鸿蒙调试目前只适配好了V8，适配JSVM还在开发中，所以调试时需要切换到V8并打开调试代码。
+调试切换到V8的方法，两步：
+- Hippy/driver/js/CMakeLists.txt 里：打开 set(JS_ENGINE "V8") 注释 set(JS_ENGINE "JSH") 
+- Hippy/framework/ohos/build-profile.json5 里 debug 配置下：   "arguments": "-DENABLE_INSPECTOR=false"，改为true。  （这个是为了打开 ENABLE_INSPECTOR 宏，让调试功能生效）
+
+另外，鸿蒙调试目前只支持网络调试（手机和JS Server在一个网络内，通过网络下载JS Bundle调试），数据线调试还在开发中。
+
 # 前端环境准备
 
 1. 安装新一代调试工具： `npm i -D @hippy/debug-server-next@latest`
@@ -178,6 +196,10 @@ Android 使用了 [adb](//developer.android.com/studio/command-line/adb) 的端
 7. 回到手机上，[粘贴 bundleUrl](development/debug.md#config-bundle) 并启动调试
 8. 当 JS 源码文件发生改动时，如已开启 HMR 或 Live-Reload，编译结束后会自动刷新；否则需要按 `Command + R` 或 `Command + D` 键调起 Reload 面板刷新
 
+## Ohos
+
+鸿蒙调试目前只支持网络调试（手机和JS Server在一个网络内，通过网络下载JS Bundle调试），数据线调试还在开发中。
+
 # Elements 可视化审查
 
 > Android SDK 最低支持版本 2.9.0<br/>

docs/development/demo.md

@@ -17,7 +17,7 @@ Demo的Native工程代码位于framework/examples目录，前端工程代码位
 
 ### macOS开发环境
 
-可以在macOS上开发iOS，Android应用，请求根据需要进行环境配置。
+可以在macOS上开发iOS、Android、Ohos应用，请求根据需要进行环境配置。
 
 首先，通过Homebrew包管理工具安装git, git-lfs, node(v16) and npm(v7)
 
@@ -46,6 +46,11 @@ brew install git git-lfs node@16 cmake
 
     通过android开发者平台下载安装[NDK](https://developer.android.com/ndk?hl=en)
 
+#### 编译Ohos Demo环境准备
+
+1. DevEco Studio
+   通过Ohos开发者平台下载安装[DevEco Studio](https://developer.huawei.com/consumer/cn/download/)
+
 ### Windows开发环境
 
 可以Windows上开发Android应用，请安装以下依赖。
@@ -66,6 +71,7 @@ brew install git git-lfs node@16 cmake
 
     通过指引安装[nodejs和npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)，建议使用Node v16，NPM v7版本
 
+也可以Windows上开发Ohos应用，请安装DevEco Studio、Git、Node和NPM。
 
 ## 代码拉取
 
@@ -94,6 +100,12 @@ open HippyDemo.xcworkspace
 2. 使用 USB 线连接 Android 设备，并确保设备 USB 调试模式已经开启（电脑 Terminal 执行 `adb devices` 检查手机连接状态）。
 3. Android Studio 执行项目构建，并安装 APK运行。
 
+### 编译运行Ohos Demo
+
+1. 使用 DevEco Studio 打开根目录 `Ohos Project` 项目。
+2. 使用 USB 线连接 Ohos 设备，并确保设备 USB 调试模式已经开启。
+3. DevEco Studio 选择 Application `entry` 执行项目构建，并安装到手机运行。
+
 ### 效果预览
 
 Demo运行起来后，可见Demo首页类似

docs/development/native-adapter.md

@@ -1,6 +1,6 @@
 # 终端能力适配
 
-可以把 Native 的一些基础能力接口，抽象为 Adapter，方便业务注入实现。支持 Android、iOS、Flutter、Web(同构) 等平台。
+可以把 Native 的一些基础能力接口，抽象为 Adapter，方便业务注入实现。支持 Android、iOS、Ohos、Flutter、Web(同构) 等平台。
 <br/>
 
 # Android
@@ -168,6 +168,27 @@ HIPPY_EXPORT_MODULE() // 全局注册该模块至Hippy
 
 
 
+<br/>
+<br/>
+<br/>
+
+
+# Ohos
+
+---
+
+Ohos App 开发中存在很多第三方基础库。
+
+Hippy SDK 将所有基础能力接口化，抽象为 Adapter，方便业务注入实现，同时大多数基础能力我们也默认实现了一个最简单的方案。
+
+Hippy SDK 现在所提供的 Adapter 包括：
+
+- `HippyHttpAdapter`：Http 请求 Adapter。
+- `HippyExceptionHandlerAdapter`：引擎和 JS 异常处理 Adapter。
+- `HippyStorageAdapter`：数据库（KEY-VALUE）Adapter。
+- `HippyExecutorSupplierAdapter`：线程池 Adapter。
+- `HippyEngineMonitorAdapter`：Hippy 引擎状态监控 Adapter。
+
 <br/>
 <br/>
 <br/>

docs/development/native-component.md

@@ -1,6 +1,6 @@
 # 自定义组件
 
-App 开发中有可能使用到大量的UI组件，Hippy SDK 已包括其中常用的部分，如`View`、`Text`、`Image` 等，但这极有可能无法满足你的需求，这就需要对 UI 组件进行扩展封装。支持 Android、iOS、Flutter、Web(同构) 等平台。
+App 开发中有可能使用到大量的UI组件，Hippy SDK 已包括其中常用的部分，如`View`、`Text`、`Image` 等，但这极有可能无法满足你的需求，这就需要对 UI 组件进行扩展封装。支持 Android、iOS、Ohos、Flutter、Web(同构) 等平台。
 
 <br/>
 <br/>
@@ -313,6 +313,109 @@ HIPPY_EXPORT_METHOD(focus:(nonnull NSNumber *)reactTag callback:(HippyPromiseRes
 到此，一个简单的`NativeRenderMyViewManager`与`NativeRenderMyView`创建完成。
 
 
+# Ohos
+
+---
+
+## TS 组件扩展
+
+我们将以`ExampleViewA`为例，从头介绍如何扩展组件。
+详细代码参考 [Demo](https://github.com/Tencent/Hippy/tree/main/framework/examples/ohos-demo/src/main/ets/hippy_extend)
+
+扩展组件包括：
+
+1. 扩展 `HippyCustomComponentView`，实现组件View `ExampleViewA`，以及组件的属性处理函数 `setProp` 和方法调用函数 `call`
+2. 实现组件 `ExampleComponentA`
+3. 实现 `Builder` 函数关联组件View和组件，并配置到 `ModuleLoadParams` 参数
+4. 注册组件View `ExampleViewA`
+
+因为鸿蒙ArkUI是声明式组装组件的，`ExampleViewA` 相当于组件的数据模型，`ExampleComponentA` 是实际的声明式组件，通过 `Builder` 函数来构建组件，通过`@ObjectLink` 装饰器来绑定数据。
+
+## 实现组件View
+
+```typescript
+@Observed
+export class ExampleViewA extends HippyCustomComponentView {
+  constructor(ctx: NativeRenderContext) {
+    super(ctx)
+  }
+
+  setProp(propKey: string, propValue: HippyAny): boolean {
+    return super.setProp(propKey, propValue)
+  }
+
+  call(method: string, params: Array<HippyAny>, callback: HippyRenderCallback | null): void {
+
+  }
+}
+```
+
+## 实现组件
+
+```typescript
+@Component
+export struct ExampleComponentA {
+  @ObjectLink renderView: ExampleViewA
+  @ObjectLink children: HippyObservedArray<HippyRenderBaseView>
+
+  build() {
+    Stack() {
+      Text("This is a custom component A.")
+      ForEach(this.children, (item: HippyRenderBaseView) => {
+        buildHippyRenderView(item, null)
+      }, (item: HippyRenderBaseView) => item.tag + '')
+    }
+    .applyRenderViewBaseAttr(this.renderView)
+  }
+}
+
+```
+
+## 实现 `Builder` 函数并配置
+
+实现：
+
+```typescript
+@Builder
+export function buildCustomRenderView($$: HippyRenderBaseView) {
+  if ($$ instanceof ExampleViewA) {
+    ExampleComponentA({ renderView: $$ as ExampleViewA, children: $$.children })
+  }
+}
+```
+
+配置：
+
+```typescript
+loadParams.wrappedCustomRenderViewBuilder = wrapBuilder(buildCustomRenderView)
+```
+
+## 注册组件View
+
+继承 `HippyAPIProvider` 接口并注册自定义组件View：
+
+```typescript
+export class ExampleAPIProvider implements HippyAPIProvider {
+  getCustomRenderViewCreatorMap(): Map<string, HRRenderViewCreator> | null {
+    let registerMap: Map<string, HRRenderViewCreator> =
+      new Map()
+    registerMap.set("ExampleViewA",
+      (ctx): HippyRenderBaseView => new ExampleViewA(ctx))
+    return registerMap
+  }
+}
+```
+
+配置 `ExampleAPIProvider` 到 `EngineInitParams` 参数:
+
+```typescript
+params.providers = new Array(new ExampleAPIProvider())
+```
+
+## C 组件扩展
+
+详细代码参考 [Demo](https://github.com/Tencent/Hippy/tree/main/framework/examples/ohos-demo/src/main/cpp/hippy_extend)
+
 
 # Voltron