鸿蒙Taro实战:01-搭建开发环境

简介: 本文介绍了如何使用 Taro 4.x 框架搭建鸿蒙应用开发环境。主要内容包括:下载并配置 DevEco IDE,创建鸿蒙项目,安装 Taro 4.x,初始化 Taro 项目,配置鸿蒙插件和编译配置,修改 `package.json`,运行 Taro 和鸿蒙项目。通过本文,读者可以快速上手鸿蒙应用开发。

鸿蒙Taro实战:01-搭建开发环境

配置鸿蒙环境

下载安装 DevEco

配置IDE

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

创建鸿蒙项目

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

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

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

点击 Finish 完成项目创建。

安装 Taro 4.x

yarn global add @tarojs/cli
AI 代码解读

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

➜  ~ taro --version
👽 Taro v4.0.7

4.0.7
AI 代码解读

初始化项目

taro init taro-ohos
AI 代码解读

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

? 请输入项目介绍 taro ohos
? 请选择框架 React
? 是否需要使用 TypeScript ? Yes
? 请选择 CSS 预处理器(Sass/Less/Stylus) Sass
? 请选择包管理工具 yarn
? 请选择编译工具 Vite
? 请选择模板源 Gitee(最快)
✔ 拉取远程模板仓库成功!
? 请选择模板 默认模板
AI 代码解读

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

Done in 44.95s.
✔ 安装项目依赖成功
创建项目 taro-ohos 成功!
请进入项目目录 taro-ohos 开始工作吧!😝
AI 代码解读

安装鸿蒙插件

yarn add @tarojs/plugin-platform-harmony-ets
yarn add path
AI 代码解读

修改编译配置

找到 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',
    }
AI 代码解读

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

修改 package.json

在 scripts 处添加以下配置

"scripts": {
   
    ...
    "build:harmony": "taro build --type harmony",
    "dev:harmony": "npm run build:harmony -- --watch"
}
AI 代码解读

运行 Taro 项目

yarn run dev:harmony
AI 代码解读

控制台输出以下内容,显示构建成功:



build started... 点击查看完整输出


bash 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.


Taro 会将编译好的文件输出至鸿蒙项目目录

运行鸿蒙

  1. 配置应用签名

打开 File -> Project Structure..., 点击 Siging Configs, Sign In, 例如华为账号,点击右下角 Apply, OK, 完成签名

  1. 运行

    在 DevEcho 中,点击运行按钮,待控制台执行完成,查看设备上,页面中将输出以下内容

    首页
    
    Hello world!
    
    AI 代码解读

注意事项

运动 Taro 时报错 throw new Error(不存在编译平台 ${platform}),config/index.ts文件中没有添加 @tarojs/plugin-platform-harmony-ets

参考资料

目录
打赏
0
相关文章
基于HarmonyOS 5.0 (Next)技术的渐变模糊效果技术实现【代码实战】
本文详细介绍如何在HarmonyOS 5.0(Next)中实现渐变模糊效果,涵盖从基础页面搭建到添加模糊、渐变效果的全过程,并通过代码实战展示具体操作步骤。文章首先介绍了使用`Stack`和`Image`控件设置背景并应用`foregroundBlurStyle`属性实现模糊效果,接着通过`linearGradient`属性融入渐变效果,使界面更加精致美观。此外,还展示了如何利用滑动条和手势等交互元素动态调整模糊与渐变效果,增强用户体验。最后,通过具体代码示例说明如何为图片、弹窗等控件添加渐变模糊效果,突显HarmonyOS的强大功能与灵活性。
66 17
鸿蒙HarmonyOS应用开发 | 探索 HarmonyOS Next-从开发到实战掌握 HarmonyOS Next 的分布式能力
HarmonyOS Next 是华为新一代操作系统,专注于分布式技术的深度应用与生态融合。本文通过技术特点、应用场景及实战案例,全面解析其核心技术架构与开发流程。重点介绍分布式软总线2.0、数据管理、任务调度等升级特性,并提供基于 ArkTS 的原生开发支持。通过开发跨设备协同音乐播放应用,展示分布式能力的实际应用,涵盖项目配置、主界面设计、分布式服务实现及部署调试步骤。此外,深入分析分布式数据同步原理、任务调度优化及常见问题解决方案,帮助开发者掌握 HarmonyOS Next 的核心技术和实战技巧。
137 76
鸿蒙HarmonyOS应用开发 | 探索 HarmonyOS Next-从开发到实战掌握 HarmonyOS Next 的分布式能力
鸿蒙HarmonyOS应用开发 | 「鸿蒙技术分享」HarmonyOS NEXT元服务卡片实战体验
HarmonyOS NEXT的发布对华为及整个行业都产生了深远的影响。它不仅展示了华为的技术实力,还敏锐地把握了市场需求。同时,吸引了更多的开发者和合作伙伴加入鸿蒙生态体系,共同推动鸿蒙生态的繁荣发展。
195 20
鸿蒙HarmonyOS应用开发 | 「鸿蒙技术分享」HarmonyOS NEXT元服务卡片实战体验
鸿蒙原生开发环境的创新与性能优化:从工具到跨平台支持的全方位提升
鸿蒙原生开发环境不断创新与优化,涵盖实时预览、智能代码提示、多设备调试等创新功能,显著提升开发效率和跨平台支持。通过性能优化、用户界面改进、插件支持及详细的错误提示优化,进一步增强用户体验。此外,工具还强化了团队协作、性能监控、自动化测试及社区建设,助力开发者高效工作,推动鸿蒙生态繁荣发展。
320 18
鸿蒙原生开发环境的创新与性能优化:从工具到跨平台支持的全方位提升
基于HarmonyOS 5.0(NEXT)与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
本次的.HarmonyOS Next ,ArkTS语言,HarmonyOS的元服务和DevEco Studio 开发工具,为开发者提供了构建现代化、轻量化、高性能应用的便捷方式。这些技术和工具将帮助开发者更好地适应未来的智能设备和服务提供方式。
基于HarmonyOS 5.0(NEXT)与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
HarmonyOS 5.0 (Next)应用开发实战:使用ArkTS构建开箱即用的登录页面【HarmonyOS 5.0(Next)】
### HarmonyOS 5.0(Next)应用开发实战:使用ArkTS构建开箱即用的登录页面 HarmonyOS 5.0(Next)融合了美学与科技,引入“光感美学”设计理念和多设备深度协同功能。本文通过 ArkTS 构建一个简单的登录页面,展示了模块化导入、状态管理、方法封装、声明式UI构建及事件处理等最佳实践。代码实现了一个包含用户名和密码输入框及登录按钮的界面,支持错误提示和页面跳转。
74 14
HarmonyOS 5.0 (Next)应用开发实战:使用ArkTS构建开箱即用的登录页面【HarmonyOS 5.0(Next)】
鸿蒙HarmonyOS应用开发 |鸿蒙技术分享HarmonyOS Next 深度解析:分布式能力与跨设备协作实战
鸿蒙技术分享:HarmonyOS Next 深度解析 随着万物互联时代的到来,华为发布的 HarmonyOS Next 在技术架构和生态体验上实现了重大升级。本文从技术架构、生态优势和开发实践三方面深入探讨其特点,并通过跨设备笔记应用实战案例,展示其强大的分布式能力和多设备协作功能。核心亮点包括新一代微内核架构、统一开发语言 ArkTS 和多模态交互支持。开发者可借助 DevEco Studio 4.0 快速上手,体验高效、灵活的开发过程。 239个字符
171 13
鸿蒙HarmonyOS应用开发 |鸿蒙技术分享HarmonyOS Next 深度解析:分布式能力与跨设备协作实战
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】
鸿蒙登录页面设计展示了 HarmonyOS 5.0(Next)的未来美学理念,结合科技与艺术,为用户带来视觉盛宴。该页面使用 ArkTS 开发,支持个性化定制和无缝智能设备连接。代码解析涵盖了声明式 UI、状态管理、事件处理及路由导航等关键概念,帮助开发者快速上手 HarmonyOS 应用开发。通过这段代码,开发者可以了解如何构建交互式界面并实现跨设备协同工作,推动智能生态的发展。
93 10
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
本文介绍了如何将现有 Flutter 项目适配鸿蒙系统,详细步骤包括安装 FVM、使用 FVM 安装 Flutter SDK、搭建开发环境、创建项目架构和壳工程等。
66 4
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
HarmonyOS应用开发实战:基于ArkTS的开箱即用登录页面实现【样式方式实现①】【HarmonyOS 5.0(Next)】
本文介绍了基于HarmonyOS 5.0(Next)和ArkTS实现的开箱即用登录页面。HarmonyOS 5.0是华为于2024年10月22日发布的第三代移动操作系统,具备原生智能、互联、安全及流畅特性。文章详细解析了使用ArkTS开发登录页面的代码,涵盖组件定义、界面布局、事件处理、样式设置及异步操作等内容,展示了清晰的组件结构、响应式设计与模块化编程的优势。通过这段代码,开发者可以快速上手并构建高效、美观的应用界面。
113 9

热门文章

最新文章