使用Taro4.0开发鸿蒙APP（一）

使用Taro4.0开发鸿蒙APP（一）

---

前言

如何使用Taro4.0开发鸿蒙APP
参考文档Taro4.0，ARK-TS入门

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、环境配置

安装node v18.1.0以上版本
Taro v4.0.0-beta.117
DevEco Studio 5.0.3.402(尚未公布，如想尝鲜需申请白名单白名单申请地址)

二、初始化项目

1.创建Taro项目

确认Taro 版本为v4.0.0-beta.117

执行 taro init myApp 创建项目 编译工具选择Vite 其他选项默认即可

然后执行 cd myApp , npm install

安装适配鸿蒙插件 npm i @tarojs/plugin-platform-harmony-ets@beta

安装完依赖后配置 ./config/index.ts 文件，配置如下

plugins: ['@tarojs/plugin-platform-harmony-ets'],
harmony: {
   // 将编译方式设置为使用 Vite 编译
   compiler: 'vite',
   // 【必填】鸿蒙主应用的绝对路径，例如：
   projectPath: path.resolve(process.cwd(), '../MyApplication'),
   // 【可选】HAP 的名称，默认为 'entry'
   hapName: 'entry',
   // 【可选】modules 的入口名称，默认为 'default'
   name: 'default',
 },

如有path 未引入报错需手动引入path
const path = require(‘path’)

在package.json中添加启动鸿蒙的命令

“build:harmony”: “taro build --type harmony”,
“dev:harmony”: “npm run build:harmony – --watch”

2.创建鸿蒙项目

打开Dev studio 选择 create project 选择默认模版即可，点击 next
创建项目路径与taro 项目中 ./config/index.ts指定鸿蒙输出路径一致

鸿蒙项目初始化成功

3.启动Taro 鸿蒙开发模式

在Taro终端执行 npm run dev:harmony

如无报错信息则启动成功打开 Devstudio 启动APP

4.启动鸿蒙APP报错及解决方案

启动时先创建模拟器使用模拟器启动

1.启动报错如下
解决方法：尝试重启Dev statudio 重启Taro项目

2.重启后报错变成如下图

解决方法：修改./entry/src/main/module.json5文件中的srcEntry属性为./ets/app.ets

3. 找不到node 包
   
   解决方法：在Devstudio的terminal中执行 ohpm install @types/node
   
   4.找不到react
   解决方法：将./entry/src/main/ets/npm下的react 移到 oh_modules/@types中
   
   5.如出现以下报错 修改 ./hvgor/hvigor-config.json5 中的stacktarce为true 然后 点击图2 clean project 后尝试重启
   
   

5.解决完以上问题 尝试启动成功 Taro的页面出现在鸿蒙APP中