鸿蒙版Taro 搭建开发环境

? 请输入项目介绍 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

九、参考资料

十、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、小程序标签的类名相互转换