uni-app forHarmony 实践

前言

前面分别了两篇 uni-app forHarmony 的文章，大家对这个技术比较感兴趣，所以我也就联合坚果派开发者，一起针对本次实践做出一个探索，你可以在后面看到本次的实践效果。接下来开始正文吧。

应用功能

1. 启动应用获取历史上的今天的数据
2. 点击日期，可以弹窗选择对应时间，页面显示对应日期历史上的今天的内容
3. 通过事件 ID 获取历史的今天的内容详情
4. 通过关键字搜索历史上今天的数据

Harmony Next 效果

uniapp for Harmony

开发框架（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/