Flutter for OpenHarmony 实战:[开发环境搭建与项目编译指南]

Flutter for OpenHarmony 实战:[开发环境搭建与项目编译指南]

一、基础环境搭建

配置环境之前把基础文件夹创建好

1.1 Git 下载与安装

  • 下载地址 :
    Git - Install
  • 参考教程 :
    1.打开链接
    2.按图所示

    3.按图所示别忘了勾选

    4.按图所示进行下一步

    5.按图所示进行下一步

    6.按图所示勾选中间的

    7.按图所示进行下一步

    8.按图所示勾选第一个
    9.按图所示进行下一步


10.按图所示进行下一步

11.按图所示进行下一步

12.按图所示进行下一步
13.按图所示进行下一步

14.进行安装


15.win+r打开终端输入cmd进行验证

16.依次输入进行验证

bash 复制代码
git
bash 复制代码
git -v


1.2 Java JDK17 下载与安装

1.打开链接进入下面页面
2.这里直接解压文件

3.打开解压文件把里面的东西放到jdk文件里其他的不要

4.就是把jdk-11.0.2里面的东西都移到jdk文件里面

5.如图所示

6.复制路径

7.设置里面搜索环境变量

8.输入JAVA_HOME变量值为下载jdk的文件位置

9.输入%JAVA_HOME%\bin

10.打开终端依次输入进行验证

bash 复制代码
java
bash 复制代码
javac
bash 复制代码
java -version



二、Flutter SDK 下载安装和开发环境搭建

2.1 DevEco Studio 下载安装

安装链接 :
DevEco Studio下载链接

以下为图文步骤
1.打开链接

2.打开压缩包
3.进行安装

4.修改路径一定要知道自己下到哪了

5.都选上

6.直接安装

7.重启电脑

7.打开DevAPP

8.修改参数

9.进入设置

10.下载sdk

11.如图所示

12.跟上面的操作一样

SDK环境变量配置

1.打开Dev安装位置复制路径

2.复制路径

3.打开环境变量

4.把下面的四个路径复制上去然后把红框里的换成刚才复制的路径就行了(就是Dev安装的位置)

复制代码
F:\Chengxusheji\HarmonyOS\DevEco Studio\sdk\default\openharmony\toolchains
F:\Chengxusheji\HarmonyOS\DevEco Studio\tools\ohpm\bin
F:\Chengxusheji\HarmonyOS\DevEco Studio\tools\node
F:\Chengxusheji\HarmonyOS\DevEco Studio\tools\hvigor\bin

5.另外,还需要新建DEVECO_SDK_HOME变量,路径还是Dev安装位置,但是路径后面要加上\bin

操作步骤:

  1. 右键"此电脑" -> "属性" -> "高级系统设置" -> "环境变量"。
  2. 在"系统变量"中找到 Path,点击"编辑",然后"新建",依次添加上述四个路径。

2.4 下载适配鸿蒙的 Flutter SDK

  1. 下载 SDK :
    在创建好的flutter文件夹里

    • 1.打开 终端,执行以下命令克隆 SDK 仓库


    • 然后输入下面的代码

      bash 复制代码
      git clone -b oh-3.27.4-dev https://gitcode.com/openharmony-tpc/flutter_flutter.git

    2.输入代码

    3.完成之后打开里面的bin文件夹配置环境变量

    4.复制路径

    5.添加路径

6.检查 Flutter 版本 :

* 打开新的终端窗口,执行:
bash flutter --version

. 7.诊断 Flutter 环境 :

* 执行以下命令检查环境是否配置正确:
bash flutter doctor -v

三、创建并编译项目

3.1 创建项目

在您希望存放项目的目录下,打开终端并执行以下命令(将 <projectName> 替换为您的项目名):
输入命令

bash 复制代码
flutter create --platforms ohos <projectName>

1.进入终端

2.执行命令

3.2 构建 App

进入创建的目录,使用 PowerShell 执行以下命令构建 Release 版本的 App:
1.进入powershell终端

2.输入指令

powershell 复制代码
flutter build app --release

3.3 打开项目

  1. 使用 DevEco Studio 打开项目目录。


2.打开项目

3.按图所示

4.虚拟机创建

5.修改路径

6.修改路径

7.按图所示


8.下载完成点击下一步进行镜像下载

9.自定义虚拟机名称

10.运行虚拟机

11.成功页面

四、总结

通过以上步骤,您已成功搭建一套完整的 Flutter + OpenHarmony 开发环境,并能够:

  • ✅ 创建跨平台项目
  • ✅ 编译生成 HAP 安装包
  • ✅ 在 DevEco Studio 中调试
  • ✅ 在模拟器或真机上运行

尽管当前仍需较多手动配置,但随着 OpenHarmony 生态的成熟与社区工具的完善,React Native / Flutter 在鸿蒙平台的开发体验将持续优化


🌐 加入社区

欢迎加入 开源鸿蒙跨平台开发者社区 ,获取最新资源与技术支持:

👉 开源鸿蒙跨平台开发者社区


技术因分享而进步,生态因共建而繁荣

------ 晚霞的不甘 · 与您共赴鸿蒙跨平台开发之旅

相关推荐
G皮T2 小时前
【Elasticsearch】审计日志(二):Compliance settings(合规性审计设置)
大数据·elasticsearch·搜索引擎·全文检索·kibana·审计·审计日志
-大头.2 小时前
GIT教程系列(共3篇)-----第三篇:Git高级技巧与专业配置完全指南
大数据·git·elasticsearch
熊猫钓鱼>_>2 小时前
【开源鸿蒙跨平台开发先锋训练营】[Day 3] React Native for OpenHarmony 实战:网络请求集成与高健壮性列表构建
大数据·人工智能·react native·华为·开源·harmonyos·智能体
查拉图斯特拉面条2 小时前
Git推送完全指南:从首次推送到冲突解决
大数据·git·elasticsearch
脸大是真的好~2 小时前
Git的快速使用
git
web小白成长日记2 小时前
React Router DOM 全面学习笔记:从原理到实战
笔记·学习·react.js
小白阿龙2 小时前
鸿蒙+flutter 跨平台开发——自定义单词速记APP开发实战
flutter·华为·harmonyos·鸿蒙
2401_zq136y032 小时前
Flutter for OpenHarmony:从零搭建今日资讯App(二十三)数据模型设计的艺术
flutter
编程之路从0到12 小时前
React Native之Android端Fabric 架构源码分析
android·react native·源码分析·fabric