入门教程
duxapp
通过框架和模块组合,实现了鸿蒙端的支持,现在 duxui 这个 ui 库已经基本兼容了鸿蒙端。
在 windows 上仍然存在问题,请使用其他系统进行调试,例如 Mac
开始之前
-
下载并安装 最新版 DevEco Studio https://developer.huawei.com/consumer/cn/download
-
安装模拟器
打开 DevEco Studio,找到 Device Mange 下载并创建一个模拟器,详情可以参考下面的文档
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-emulator-create-V5
- 启动模拟器
每次调试的时候需要先手动启动模拟器
快速体验
你可以快速初始化一个 UI 库的示例项目,你可以通过这个示例项目快速的查看到 UI 库在鸿蒙端以及其他端的效果
npx duxapp-cli create projectExample duxuiExample
创建项目后,进入项目运行以下命令
yarn dev:harmony --app=duxuiExample
编译完成后,使用 DevEco Studio 打开 dist/harmony 目录,这个目录就是一个原生鸿蒙项目
打开项目后,右上角工具栏区域,选择已经开启的虚拟机,并且点击右侧的运行按钮(三角符号),开始编译,编译后,会自动在虚拟机上启动这个 app
准备开发
在新手教程中,你已经创建了一个全新模块,并且添加了 duxui
模块的依赖,要兼容鸿蒙,还需要添加 duxappHarmony
模块作为依赖,在添加依赖之前你需要安 装
# 安装duxappHarmony
yarn duxapp app add duxappHarmony
安装模块之后修改模块配置文件 src/moduleName/app.json
, 在 dependencies
中添加 duxappHarmony
{
"name": "moduleName",
"description": "模块介绍",
"version": "1.0.0",
"dependencies": [
"duxapp",
"duxui",
"duxappHarmony"
]
}
修改文件后,执行下面的命令,完成一个初始化的过程,这会安装编译鸿蒙需要的依赖和命令行
yarn app --app=moduleName
添加配置文件
在之前的入门教程中我们已经创建了 index.js
配置文件, RN配置需要在同一个目录下创建 duxapp.harmony.js
文件,内容如下,
configs/modeName/duxapp.harmony.js
const config = {
appid: 'cn.duxapp.modulename',
appName: 'APP名称',
versionCode: 1,
versionName: '1.0.0',
}
module.exports = config
由于包名限制条件,你的包名只能由小写字母组成,并不能像模块名称那样,使用驼峰命名
开始打包
接下来就能执行打包命令了
yarn dev:harmony --app=moduleName
编译完成后,使用 DevEco Studio 打开 dist/harmony
目录,这个目录就是一个原生鸿蒙项目
打开项目后,右上角工具栏区域,选择已经开启的虚拟机,并且点击右侧的运行按钮(三角符号),开始编译,编译后,会自动在虚拟机上启动这个 app
每次修改完文件编译完成后,需要再点一次运行,鸿蒙没有热重载这个功能
兼容性
在开发鸿蒙的时候,需要注意的问题稍微有点多,例如鸿蒙上的 Flex 布局,和 Web 标准有一定的出入,需要做一些处理才能兼容多个端
查看 兼容性 章节了解细节
开发进度
鸿蒙端的 duxui 组件库,仍然有一些功能是不完善的,例如 Pikcer 选择器、动画效果等,你可以去查看开发进度
查看 开发进度 章节了解细节