uni-app 也能开发纯血鸿蒙 App？使用 wot-starter 这样快速上手！

大家好，我是不如摸鱼去，wot-ui 的“主理人”，欢迎来到我的 uni-app 分享专栏。

wot-ui 是当下最流行的 uni-app vue3 组件库之一。

2024年，华为原生鸿蒙 HarmonyOS NEXT（5.0）正式发布，随后 uni-app 宣布了对原生鸿蒙的支持。如今 HarmonyOS 6 都发布了，uni-app 对纯血鸿蒙的支持如何了？我们今天来探索使用 wot-starter 构建支持 HarmonyOS NEXT 的 App。

项目环境

我选择使用我们团队维护的 wot-starter 作为起手项目，VSCode 作为主要开发工具，HbuilderX 和 DevEco Studio 作为调试和打包工具。

技术栈：

wot-starter: 基于 vitesse-uni-app 深度整合 Wot UI 组件库的快速启动模板 https://starter.wot-ui.cn/

开发工具:

HbuilderX: uni-app 专属开发工具 https://www.dcloud.io/hbuilderx.html
DevEco Studio: 开发 HarmonyOS 应用及元服务的集成开发环境（IDE）https://developer.huawei.com/consumer/cn/deveco-studio/
VSCode: 大家的最爱 https://code.visualstudio.com/

环境信息：

node.js v22.17.1

所有的开发工具我们可以安装最新的版本。

运行

如果手上有 HarmonyOS NEXT 系统的手机可以将手机的开发者模式打开连接到电脑上，如果没有则可以安装鸿蒙模拟器，参考文档 https://uniapp.dcloud.net.cn/tutorial/harmony/runbuild.html#connectvirtually 进行安装启动

配置 DevEco-Studio 路径

配置调试证书

运行到手机

选择运行设备 or 模拟器后点击运行，在编译代码构建运行包的时候，有三个缓存使用策略可供选择：

根据变化差量更新缓存：正常使用缓存来避免重复操作，提高构建效率。
强制使用缓存，跳过编译：如果没有修改代码，只想重新运行起来，则可以使用这种方式，此时若 HBuilderX 检查到已经有构建好的运行包存在，则直接安装运行，否则按正常方式构建再运行。
清空缓存：每次升级 HBuilderX 之后，新旧版本的鸿蒙工程目录可能不完全兼容，为避免旧版本的干扰，首次运行的时候可以选择这个选项。另外，如果运行时出现结果不符合预期的奇怪情况，可以尝试使用这种方式重新构建运行，以消除缓存错乱带来的干扰。

打包

创建App

我们访问https://developer.huawei.com/consumer/cn/service/josp/agc/index.html#/harmonyOSDevPlatform/172249065903274453，注册账号并新建一个 APP ID，这一步我们在申请调试证书时应该已经做过。

申请发布证书

参考教程 https://developer.huawei.com/consumer/cn/doc/app/agc-help-add-releasecert-0000001946273961 申请发布证书并保存下来。

生成证书请求文件

申请发布证书时需要证书请求文件，我们参考教程 https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ide-signing#section462703710326 在 DevEco Studio 中生成证书请求文件并保存。

注意填写的内容和生成的证书文件都需要妥善保管

配置打包证书

我们在 hbuilderx 中配置打包证书，参考教程：https://uniapp.dcloud.net.cn/tutorial/harmony/runbuild.html#signing-configs

打包

按照下图操作即可打包出 app 文件。

运行效果

运行效果如下图，与 iOS、安卓应用基本一致。

注意点

在运行到原生鸿蒙的过程中，有一些点需要注意下:

harmony os 条件编译不可以使用APP-PLUS，可以使用APP
plus API 大部分不可用
manifest.json 中配置的证书信息，主要是 app-harmony 对应的内容要手动同步到manifest.config.ts下，不然下次运行就没了。
自行探索...

CI/CD

目前是依赖 HbuilderX 和 DevEco Studio 做 APP 构建的，HbuilderX CLI 也可以打包鸿蒙应用，我期望可以脱离 HbuilderX，使用 app-harmony 产物加 DevEco Studio 做 CI/CD，类似原来安卓离线打包一样的流程，目前还在探索中。

总结

我们今天验证了通过 wot-starter 模板开发纯血鸿蒙（HarmonyOS NEXT）应用。技术栈基于 wot-ui 组件库与 vitesse-uni-app，结合VSCode、HBuilderX及DevEco Studio实现开发调试。流程涵盖环境配置、证书申请、真机/模拟器运行及打包发布，运行效果与安卓/iOS一致。需注意：条件编译禁用APP-PLUS（改用APP），plus API大部分不可用。当前构建依赖HBuilderX，未来探索通过app-harmony产物结合DevEco Studio实现CI/CD，为跨平台开发提供新路径。