鸿蒙Taro实战：01-搭建开发环境

配置鸿蒙环境

下载安装 DevEco

配置IDE

打开 Prefreences, OpenHarmony SDK, 勾选 API Version 12

创建鸿蒙项目

打开 DevEco，点击 右上角Create Project， 在 Application 处选择 Empty Ablity, 点击 Next, 进入配置页，根据需求调整内容，这里使用默认配置，

1. Project name: MyApplication,
2. Bundle name: com.example.myapplication,
3. Save location 选择需要创建的目录，这里使用 MyApplication 目录 （~/projects/MyApplication)
4. Compatible SDK, 选择 4.0.0
5. Module name: entry

注意，上面当前 Taro 支持的 SDK 版本为 4.0.0

点击 Finish 完成项目创建。

安装 Taro 4.x

1yarn global add @tarojs/cli

安装成功后检查 taro 是否生效

1➜  ~ taro --version
2👽 Taro v4.0.7
3
44.0.7

初始化项目

1taro init taro-ohos

按照提示输入，这里使用以下配置

1? 请输入项目介绍 taro ohos
2? 请选择框架 React
3? 是否需要使用 TypeScript ？ Yes
4? 请选择 CSS 预处理器（Sass/Less/Stylus） Sass
5? 请选择包管理工具 yarn
6? 请选择编译工具 Vite
7? 请选择模板源 Gitee（最快）
8✔ 拉取远程模板仓库成功！
9? 请选择模板 默认模板

等待项目创建成功，直到输出以下提示：

1Done in 44.95s.
2✔ 安装项目依赖成功
3创建项目 taro-ohos 成功！
4请进入项目目录 taro-ohos 开始工作吧！😝

安装鸿蒙插件

1yarn add @tarojs/plugin-platform-harmony-ets
2yarn add path

修改编译配置

找到 config/index.ts 文件, 在 plugin 处添加 @tarojs/plugin-platform-harmony-ets, 在 rn 下方添加 harmony 配置：

1
2import path from 'path'
3
4...
5
6   ...
7    plugins: [
8      '@tarojs/plugin-platform-harmony-ets'
9    ],
10    ...
11    rn: {...},
12    harmony: {
13        // 将编译方式设置为使用 Vite 编译
14        compiler: 'vite',
15        // 【必填】鸿蒙主应用的绝对路径，例如：
16        projectPath: path.resolve(process.cwd(), '../MyApplication'),
17        // 【可选】HAP 的名称，默认为 'entry'
18        hapName: 'entry',
19        // 【可选】modules 的入口名称，默认为 'default'
20        name: 'default',
21    }

注意这里要把 projectPath 设置成 Deveco 创建的鸿蒙项目目录

修改 package.json

在 scripts 处添加以下配置

1"scripts": {
2    ...
3    "build:harmony": "taro build --type harmony",
4    "dev:harmony": "npm run build:harmony -- --watch"
5}

运行 Taro 项目

1yarn run dev:harmony

控制台输出以下内容，显示构建成功：

1yarn run v1.22.22
2$ npm run build:harmony -- --watch
3
4> taro-ohos@1.0.0 build:harmony
5> taro build --type harmony --watch
6
7👽 Taro v4.0.7
8
9watching for file changes...
10
11build started...
12✓ 7 modules transformed.
13rendering chunks (6)...
14
15开始 ohpm install 脚本执行...
16
17install completed in 0s 36ms
18执行 ohpm install 脚本成功。
19
20../MyApplication/entry/src/main/ets/app.scss.xss.js                 0.10 kB │ gzip: 0.10 kB │ map: 0.10 kB
21../MyApplication/entry/src/main/ets/index.scss.xss.js               0.10 kB │ gzip: 0.10 kB │ map: 0.10 kB
22../MyApplication/entry/src/main/ets/app_comp.js                     0.27 kB │ gzip: 0.21 kB │ map: 0.70 kB
23../MyApplication/entry/src/main/ets/pages/index/index_taro_comp.js  0.40 kB │ gzip: 0.27 kB │ map: 0.11 kB
24../MyApplication/entry/src/main/ets/app_taro_comp.js                0.83 kB │ gzip: 0.46 kB │ map: 0.13 kB
25../MyApplication/entry/src/main/ets/pages/index/index_comp.js       0.89 kB │ gzip: 0.42 kB │ map: 0.99 kB
26../MyApplication/entry/src/main/ets/app.ets                         2.21 kB │ gzip: 0.86 kB
27../MyApplication/entry/src/main/ets/render.ets                      5.76 kB │ gzip: 1.23 kB
28../MyApplication/entry/src/main/ets/pages/index/index.ets           9.04 kB │ gzip: 2.44 kB
29built in 2489ms.

Taro 会将编译好的文件输出至鸿蒙项目目录

运行鸿蒙

1. 配置应用签名

打开 File -> Project Structure..., 点击 Siging Configs, Sign In, 例如华为账号，点击右下角 Apply, OK, 完成签名

2. 运行

在 DevEcho 中，点击运行按钮，待控制台执行完成，查看设备上，页面中将输出以下内容

1  首页
2
3Hello world!

注意事项

运动 Taro 时报错 throw new Error(不存在编译平台 ${platform})，config/index.ts文件中没有添加 @tarojs/plugin-platform-harmony-ets

参考资料

• 鸿蒙 & OpenHarmony