前言
前面分别了两篇 uni-app forHarmony 的文章，大家对这个技术比较感兴趣，所以我也就联合坚果派开发者，一起针对本次实践做出一个探索，你可以在后面看到本次的实践效果。接下来开始正文吧。
应用功能
- 启动应用获取历史上的今天的数据
- 点击日期，可以弹窗选择对应时间，页面显示对应日期历史上的今天的内容
- 通过事件 ID 获取历史的今天的内容详情
- 通过关键字搜索历史上今天的数据
Harmony Next 效果
列表页 | 详情页 | 搜索页 |
|---|---|---|
具有请求数据获取列表，以及选择对应的日期，查看当天的历史事件的功能 | 通过列表页传过来的 id，获取内容详情，并显示 | 使用搜索接口，搜索符合内容的列表。 |
uniapp for Harmony
列表页 | 详情页 | 日期选择页 |
|---|---|---|
具有请求数据获取列表，以及选择对应的日期，查看当天的历史事件的功能 | 通过列表页传过来的 id，获取内容详情，并显示 | 使用日历组件，选择日期 |
开发框架（Vue）
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
开发语言（uts）
uts，全称 uni type script，是一门跨平台的、高性能的、强类型的现代编程语言。
它可以被编译为不同平台的编程语言，如：
- web 平台/小程序，编译为 JavaScript
- Android 平台，编译为 Kotlin
- iOS 平台，编译 Swift
- 鸿蒙 OS 平台，编译为 ArkTS（HBuilderX 4.22 ）
uts 采用了与 ts 基本一致的语法规范，支持绝大部分 ES6 API。
但为了跨端，uts 进行了一些约束和特定平台的增补。
过去在 js 引擎下运行支持的语法，大部分在 uts 的处理下也可以平滑的在 kotlin 和 swift 中使用。但有一些无法抹平，需要使用条件编译。
和 uni-app 的条件编译类似，uts 也支持条件编译。写在条件编译里的，可以调用平台特有的扩展语法。
功能框架图
从下面uni-app功能框架图可看出，uni-app在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。
总结
使用 uni-app 开发鸿蒙应用，和之前开发各家小程序体验接近。主要编码工作在 HBuilderX 中完成，HBuilderX 支持鸿蒙 OS 的各种语法提示；编码完成后，将项目运行到鸿蒙开发者工具 DevEco Studio，通过 DevEco 完成模拟器测试及 hap 安装包制作。
最后我们发现本次实现是对存量 uni-app 项目的开发者非常友好的 webview 方案，这套架构是业内主流的 Hybrid App 架构，即逻辑层、视图层分离架构。老版 uni-app 在 App 平台使用的是这套架构，微信等各家小程序使用的也是这套架构。使用本方案，可以帮助开发者快速将之前基于 uni-app 开发的 App、小程序、H5 等，快速发布成鸿蒙 App，快速入驻鸿蒙生态，抢先接收鸿蒙的流量红利。
展望
上面是 webview 方案，在性能等方面还不是最优解，为了能获得更好的性能，uni-app 团队也会增加对 uni-app x for Harmony 的支持。
uni-app x 目前的方案：
开发者依然基于 TS Vue 的 Web 技术栈来编写代码，编码完毕后，uni-app x 编译器通过 swc 将 TS 和 Vue 代码编译成 ArkTS/ArkUI；这个时候编译到鸿蒙开发者工具中的项目，代码已经变成了 arkTS/arkUI，那使用的就是 arkUI 原生渲染，相比 webview 的渲染，性能更高。同时业务代码转换成 arkTS，逻辑和渲染都使用鸿蒙原生，就实现了纯血的鸿蒙 App。也就是开发态基于 Web 技术栈进行，但运行时需转化为各平台原生语言。具体来讲，在 web 平台和小程序平台，会将 uni-app x 编译为 JS，这和本次体验的的 uni-app 基本是一致的。但到了 App 平台，会将 JS 和 Vue 代码，编译为对应平台的原生语言。比如在 Android 平台，我们会将 TS 编译为 Kotlin，鸿蒙平台，会将 TS 和 Vue 编译为 ArkTS 和 ArkUI。还是值得我们期待的。
约束
HBuilderX-alpha-4.22 以上[1]，我用的 4.24.
VUE 版本 3，语言用 UTS。
参考
https://cn.vuejs.org/guide/introduction.html
API 概述[2]
参考资料
[1]
HBuilderX-alpha-4.22 以上: https://www.dcloud.io/hbuilderx.html
[2]
API 概述: https://uniapp.dcloud.net.cn/api/
