uniapp 极速上手鸿蒙开发

uniapp 团队 与版本 4.28.2024092502 起，支持鸿蒙应用开发，现在是 4.36.2024112817,同时支持鸿蒙应用和元服务开发了。

我们现在上手感受一下

环境配置

• HBuilderX 4.24+ 下载地址
• DevEco Studio
  • HBuilderX 4.24+ 要求 DevEco-Studio 5.0.3.400+，HBuilderX 4.31+ 要求 DevEco-Studio 5.0.3.800+。
  • 鸿蒙系统版本 API 12 以上 （DevEco-Studio 有内置鸿蒙模拟器）
• HBuilderX 4.31+ 构建的鸿蒙运行包不支持 x86_64 平台，会影响到 Windows 系统和部分 Mac 系统的鸿蒙模拟器无法使用，需使用真机调试

底下主要针对真机做的演示

项目要求

在创建 uniapp 项目的时候，需要选择 vue3，vue2 不支持

搭建流程

1. AGC 平台上新建项目，目的是活动 boundleName 以及调试和发布证书
2. 下载和安装 DevEco Studio
3. 使用 DevEco Studio 创建项目，然后配置 boundleName 和调试和发布证书
4. 复制证书相关的配置
5. 下载和安装 hbuilder
6. hbuilder 下载相关插件
7. hbuilder 配置 DevEco Studio 工具路径
8. hbuilder 新建 uniapp vue3 工程
9. hbuilder 配置鸿蒙应用的证书
10. hbuilder 运行项目

AGC 平台上新建项目

可以根据需求选择新建工程还是项目。 这里选择项目

下载和安装 DevEco Studio

下载和安装DevEco Studio

boundleName 和调试和发布证书

因为真机在调试时候需要使用调试证书

应用在发布的时候需要使用发布整数，因此一次性都配置获得即可

配置链接

DevEco Studio 新建项目获得证书配置信息

这个步骤主要为了得到证书的配置代码，uniapp 运行项目的时候需要用到

在使用 DevEco Studio 新建完项目后，参考链接 进行证书的配置

得到配置文件 build-profile.json5 后续复制整个代码到 uniapp 创建的项目即可

下载和安装 hbuilder

这里下载和安装

hbuilder 下载相关插件

工具-插件安装 关键是这几个 鸿蒙、vue3

hbuilder 配置 DevEco Studio 工具路径

这里配置 DevEco Studio 工具的路径 工具-设置

hbuilder 新建 uniapp vue3 工程

新建 vue3 工程

hbuilder 配置鸿蒙应用的证书

在项目根目录下配置 \harmony-configs\build-profile.json5 如果不存在，则手动新建。

然后复制、粘贴证书代码进去

hbuilder 运行项目

最后，运行项目

效果