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


🌐 加入社区

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

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


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

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

相关推荐
发现一只大呆瓜16 小时前
React-彻底搞懂 Redux:从单向数据流到 useReducer 的终极抉择
前端·react.js·面试
发现一只大呆瓜17 小时前
React-路由监听 / 跳转 / 守卫全攻略(附实战代码)
前端·react.js·面试
悠然大月季20 小时前
git 怎么导出提交历史,文件是乱码
git·git导出历史记录·git导出历史乱码
chenshiming80221 小时前
在cursor下执行GIT回退版本
git
计算机安禾1 天前
【C语言程序设计】第39篇:预处理器与宏定义
c语言·开发语言·c++·vscode·算法·visual studio code·visual studio
Ruihong1 天前
【VuReact】轻松实现 Vue 到 React 路由适配
前端·react.js
打点计时器1 天前
Git快速上手教程
git
1104.北光c°1 天前
深入浅出 Elasticsearch:从搜索框到精准排序的架构实战
java·开发语言·elasticsearch·缓存·架构·全文检索·es
我才是一卓1 天前
linux 安装简易 git 服务端并使用
linux·运维·git