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

不如摸鱼去
318 阅读4分钟

大家好，我是不如摸鱼去，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 组件库的快速启动模板 starter.wot-ui.cn/

开发工具:

环境信息：

  • node.js v22.17.1

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

运行

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

配置 DevEco-Studio 路径

配置调试证书

运行到手机

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

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

打包

创建App

我们访问developer.huawei.com/consumer/cn… APP ID，这一步我们在申请调试证书时应该已经做过。

申请发布证书

参考教程 developer.huawei.com/consumer/cn… 申请发布证书并保存下来。

生成证书请求文件

申请发布证书时需要证书请求文件，我们参考教程 developer.huawei.com/consumer/cn… 在 DevEco Studio 中生成证书请求文件并保存。

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

配置打包证书

我们在 hbuilderx 中配置打包证书，参考教程：uniapp.dcloud.net.cn/tutorial/ha…

打包

按照下图操作即可打包出 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，为跨平台开发提供新路径。

参考资源

欢迎评论区沟通、讨论👇👇

avatar
文章
阅读
粉丝