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


🌐 加入社区

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

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


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

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

相关推荐
MakeZero13 分钟前
Flutter那些事-交互式组件
flutter
shankss26 分钟前
pull_to_refresh_simple
flutter
shankss26 分钟前
Flutter 下拉刷新库新特性:智能预加载 (enableSmartPreload) 详解
flutter
敲敲敲敲暴你脑袋3 小时前
写个添加注释的vscode插件
javascript·typescript·visual studio code
golang学习记4 小时前
GitLens 十大神技:彻底改变你在 VS Code 中的 Git 工作流
前端·后端·visual studio code
青青家的小灰灰4 小时前
迈向全栈新时代:SSR/SSG 原理、Next.js 架构与 React Server Components (RSC) 实战
前端·javascript·react.js
青青家的小灰灰4 小时前
透视 React 内核:Diff 算法、合成事件与并发特性的深度解析
前端·javascript·react.js
小霖家的混江龙5 小时前
从 0 到 1 实现一个 useState
前端·javascript·react.js
晓得迷路了6 小时前
栗子前端技术周刊第 118 期 - Oxfmt Beta、Angular GitHub stars、React 基金会...
前端·javascript·react.js
AAA阿giao20 小时前
从零构建一个现代登录页:深入解析 Tailwind CSS + Vite + Lucide React 的完整技术栈
前端·css·react.js