鸿蒙版Taro 搭建开发环境_鸿蒙ide执行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.14.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_modulesnpm 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、小程序标签的类名相互转换

鸿蒙版Taro 搭建开发环境_鸿蒙ide执行taro项目