鸿蒙版Taro 搭建开发环境
鸿蒙版Taro 搭建开发环境
一、配置鸿蒙环境
下载安装 DevEco
建议使用最新版本的 IDE，当前为 5.0.5Release 版本。
二、创建鸿蒙项目
打开 DevEco，点击右上角的 Create Project，在 Application 处选择 Empty Ability，点击 Next，进入配置页面，根据需求调整内容，这里使用默认配置：
-
Project name：
tarooh -
Bundle name：
com.nutpi.taro -
Save location：选择需要创建的目录，例如
~/test/tarooh -
Module name：
entry
注意，当前 Taro 支持的 SDK 版本为 4.1.1。
点击 Finish 完成项目创建。
三、安装 Taro 4.1
npm install -g @tarojs/cli
安装成功后，检查 taro 是否生效：
taro --version
预期输出：
👽 Taro v4.1.1 4.1.1
初始化项目
taro init taro-ohos
按照提示输入以下配置：
注意：当前仅支持使用 Vite 编译鸿蒙应用，所以在配置时请注意选择。
? 请输入项目介绍 taro ohos ? 请选择框架 React ? 是否需要使用 TypeScript？Yes ? 请选择 CSS 预处理器（Sass/Less/Stylus）Sass ? 请选择包管理工具 yarn ? 请选择编译工具 Vite ? 请选择模板源 Gitee（最快） ✔ 拉取远程模板仓库成功！ ? 请选择模板 默认模板
等待项目创建成功，直到输出以下提示：
Done in 44.95s. ✔ 安装项目依赖成功 创建项目 taro-ohos 成功！ 请进入项目目录 taro-ohos 开始工作吧！😝
四、安装鸿蒙插件
cd taro-ohos
然后使用 npm 安装：
npm i @tarojs/plugin-platform-harmony-cpp
或者使用 pnpm 安装：
pnpm i @tarojs/plugin-platform-harmony-cpp
五、修改编译配置
找到 config/index.ts 文件，在 plugin 处添加 @tarojs/plugin-platform-harmony-cpp，并在 rn 下方添加 harmony 配置：
import os from 'os'
import path from 'path'
const config = {// ...plugins: [['@tarojs/plugin-platform-harmony-cpp', {
}]],harmony: {// compiler: 'vite',projectPath: path.join(os.homedir(), '/Desktop/test/tarooh'),hapName: 'entry',},// ...
}
注意：将 projectPath 设置为 DevEco 创建的鸿蒙项目目录。
六、编译鸿蒙应用
# 编译鸿蒙应用 taro build --type harmony_cpp # 编译鸿蒙原生组件 taro build native-components --type harmony_cpp
如果需要同时编译鸿蒙应用和原生组件，可以在页面配置中添加 entryOption: false 表示该页面是组件，并通过 componentName 指定组件导出名：
export default {navigationBarTitleText: 'Hello World',
+ componentName: 'MyComponent',
+ entryOption: false,
}
Taro 会将编译好的文件输出至鸿蒙项目目录。
七、运行鸿蒙应用
1.配置应用签名
打开 File -> Project Structure...，点击 Signing Configs，点击 Sign In，登录华为账号，点击右下角 Apply，然后点击 OK，完成签名配置。
{"name": "entry","version": "1.0.0","description": "Please describe the basic information.","main": "","author": "","license": "","dependencies": {"@taro-oh/library": "file:../static/@taro-oh/library-4.1.1.har"},"devDependencies": {}
}
2.运行应用
在 DevEco 中，点击运行按钮。
八、常见问题解答（FAQ）
1.不存在编译平台 ${platform}
若运行 Taro 时出现 throw new Error('不存在编译平台 ${platform}') 错误，可能是因为 config/index.ts 文件中未添加 @tarojs/plugin-platform-harmony-cpp 插件。
2.EPERM: operation not permitted
遇到权限问题时，可执行以下命令：
mkdir -p ~/.npm-global/lib/node_modules npm config set prefix '~/.npm-global' npm install -g @tarojs/cli
九、参考资料
-
鸿蒙 & OpenHarmony | Taro 文档
-
Taro 项目仓库
-
Taro 官方文档
-
Taro UI 项目仓库
-
Taro UI 官方文档
-
plugin-platform-harmony-cpp
-
taro-oh
十、Taro 仓库概览
以下是 Taro 的主要 NPM 包及其功能：
| 路径 | 描述 |
|---|---|
@tarojs/cli | CLI 工具 |
@tarojs/service | 插件化内核 |
@tarojs/taro-loader | Webpack loaders |
@tarojs/helper | 工具库，主要供 CLI、编译时使用 |
@tarojs/runner-utils | 工具库，主要供小程序、H5 的编译工具使用 |
@tarojs/shared | 工具库，主要供运行时使用 |
@tarojs/taro | 暴露各端所需要的 Taro 对象 |
@tarojs/api | 和各端相关的 Taro API |
babel-preset-taro | Babel preset |
eslint-config-taro | ESLint 规则 |
postcss-pxtransform | PostCSS 插件，转换 px 为各端的自适应尺寸单位 |
postcss-html-transform | PostCSS 插件，用于 HTML、小程序标签的类名相互转换 |