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

鸿蒙Flutter开发

发布于 2024-11-6 16:44

浏览

0收藏

配置鸿蒙环境

下载安装 DevEco

配置IDE

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

创建鸿蒙项目

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

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

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

点击 Finish 完成项目创建。

安装 Taro 4.x

yarn global add @tarojs/cli
1.

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

➜  ~ taro --version
👽 Taro v4.0.7

4.0.7
1.
2.
3.
4.

初始化项目

taro init taro-ohos
1.

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

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

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

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

安装鸿蒙插件

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

修改编译配置

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


import path from 'path'

...

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

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

修改 package.json

在 scripts 处添加以下配置

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

运行 Taro 项目

yarn run dev:harmony
1.

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

<summary>build started… 点击查看完整输出
</summary>

yarn run v1.22.22
$ npm run build:harmony -- --watch

> taro-ohos@1.0.0 build:harmony
> taro build --type harmony --watch

👽 Taro v4.0.7

watching for file changes...

build started...
✓ 7 modules transformed.
rendering chunks (6)...

开始 ohpm install 脚本执行...

install completed in 0s 36ms
执行 ohpm install 脚本成功。

../MyApplication/entry/src/main/ets/app.scss.xss.js                 0.10 kB │ gzip: 0.10 kB │ map: 0.10 kB
../MyApplication/entry/src/main/ets/index.scss.xss.js               0.10 kB │ gzip: 0.10 kB │ map: 0.10 kB
../MyApplication/entry/src/main/ets/app_comp.js                     0.27 kB │ gzip: 0.21 kB │ map: 0.70 kB
../MyApplication/entry/src/main/ets/pages/index/index_taro_comp.js  0.40 kB │ gzip: 0.27 kB │ map: 0.11 kB
../MyApplication/entry/src/main/ets/app_taro_comp.js                0.83 kB │ gzip: 0.46 kB │ map: 0.13 kB
../MyApplication/entry/src/main/ets/pages/index/index_comp.js       0.89 kB │ gzip: 0.42 kB │ map: 0.99 kB
../MyApplication/entry/src/main/ets/app.ets                         2.21 kB │ gzip: 0.86 kB
../MyApplication/entry/src/main/ets/render.ets                      5.76 kB │ gzip: 1.23 kB
../MyApplication/entry/src/main/ets/pages/index/index.ets           9.04 kB │ gzip: 2.44 kB
built in 2489ms.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.