1、打开uniapp 文档地址

uni-app 开发鸿蒙应用
DevEco-Studio 5.0.3.400 以上 下载地址
鸿蒙系统版本 API 12 以上 (DevEco-Studio有内置鸿蒙模拟器)
HBuilderX-alpha-4.22 以上
Windows系统如使用模拟器则需要开启以下功能
打开控制面板 - 程序与功能 - 开启以下功能
Hyper-V
Windows 虚拟机监控程序平台
虚拟机平台
注意: 需要win10专业版或win11专业版才能开启以上功能,家庭版需先升级成专业版或企业版

2、进行HBuilder X 的配置

打开HBuilderX,点击上方菜单 - 工具 - 设置 - 源码视图 - 用户设置
在这里插入图片描述
把路径填你自己的 DevEco-Studio 启动路径(即:安装的位置。如:我的启动路径是D:\Huawei\DevEco Studio\bin\devecostudio64.exe所以填D:\Huawei\DevEco Studio就可以。)

"harmony.devTools.path" : "D:/Huawei/DevEco Studio"

在这里插入图片描述

3、配置鸿蒙离线SDK(sdk由uniapp提供)

  1. 下载 uni-app 鸿蒙离线SDK template-1.3.4.tgz 下载地址

  2. 解压刚下载的压缩包(如果有多个uni-app项目要编译到鸿蒙,那么鸿蒙离线sdk需要放置多份,每个uni-app的manifest中配置不同的离线sdk地址,否则会冲突,鸿蒙设备上目前没有基座概念
    因为这个原因,这里我创建了一个单独的文件夹单独存放离线sdk(D:\Backup\Documents\HBuilderProjects\uniharmonysdk)然后再在这里把解压出来的package重命名为自己的项目名,这样就可以每有一个新项目就复制sdk中package然后重命名就可以了。
    在这里插入图片描述

  3. 将解压重命名后的模板工程在 DevEco-Studio 中打开在这里插入图片描述

  4. 等待 Sync 结束,点击运行按钮可以将工程运行在真机或者模拟器中(如未配置签名信息可能需要先行配置)
    在DevEco Studio中登录华为账户
    在这里插入图片描述
    新建模拟器
    在这里插入图片描述

  5. 配置签名
    在这里插入图片描述
    测试用自己的账户生成签名就行
    在这里插入图片描述

4、前期准备完成,就差最后一哆嗦了

HBuilderX 新建一个空白的 uniapp 项目,选vue3(我选的是 uni-ui模板)
在这里插入图片描述
创建好后,在 manifest.json 文件中配置鸿蒙离线SDK路径(就是上面3-2中的路径)

"app-harmony": {
	  "projectPath": "D:\\Backup\\Documents\\HBuilderProjects\\uniharmonysdk\\UniHarmony"
	},

在这里插入图片描述
到这里就配置完成了,下一步运行
在这里插入图片描述
自动失败不要怕,我们来手动启动
在这里插入图片描述
3-3中打开的DevEco Studio直接运行
在这里插入图片描述
我还在里面加了点uni-ui组件也是正常展示的
到这整个配置运行就结束了

Logo

前往低代码交流专区

更多推荐