跳到主要内容

入门教程

duxapp 通过框架和模块组合,实现了鸿蒙端的支持,现在 duxui 这个 ui 库已经基本兼容了鸿蒙端。

信息

在 windows 上仍然存在问题,请使用其他系统进行调试,例如 Mac

开始之前

打开 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 选择器、动画效果等,你可以去查看开发进度

查看 开发进度 章节了解细节