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.依次输入进行验证

git

git -v

在这里插入图片描述

在这里插入图片描述

1.2 Java JDK17 下载与安装

• 下载地址: Java Downloads | Oracle
• 图文参考教程:

1.打开链接进入下面页面

在这里插入图片描述

2.这里直接解压文件

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

5.如图所示

在这里插入图片描述

6.复制路径

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

9.输入%JAVA_HOME%\bin

在这里插入图片描述

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

java

javac

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

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

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

在这里插入图片描述

然后输入下面的代码

git clone -b oh-3.27.4-dev https://gitcode.com/openharmony-tpc/flutter_flutter.git

2.输入代码

在这里插入图片描述

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

在这里插入图片描述

4.复制路径

在这里插入图片描述

5.添加路径

在这里插入图片描述

6.检查 Flutter 版本: * 打开新的终端窗口，执行： flutter --version

在这里插入图片描述

. 7.诊断 Flutter 环境: * 执行以下命令检查环境是否配置正确： flutter doctor -v

在这里插入图片描述

三、创建并编译项目

3.1 创建项目

在您希望存放项目的目录下，打开终端并执行以下命令（将 <projectName> 替换为您的项目名）： 输入命令

flutter create --platforms ohos <projectName>

1.进入终端

在这里插入图片描述

2.执行命令

在这里插入图片描述

3.2 构建 App

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

在这里插入图片描述

2.输入指令

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 在鸿蒙平台的开发体验将持续优化。

🌐 加入社区

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

技术因分享而进步，生态因共建而繁荣。 —— 晚霞的不甘 · 与您共赴鸿蒙跨平台开发之旅