【开源鸿蒙跨平台开发先锋训练营】DAY 2 OpenHarmony版Flutter 3.27.4版本开发环境搭建
OpenHarmony版Flutter 3.27版本开发环境搭建
目录
OpenHarmony版Flutter 3.27.4版本开发环境搭建
4.3 配置 FLUTTER_STORAGE_BASE_URL 变量
本文介绍在Windows 11系统上搭建OpenHarmony版Flutter 3.27.4版本开发环境搭建的流程。
主要内容包括：环境配置、源码克隆、Flutter SDK安装等关键步骤。OpenHarmony版Flutter是Flutter框架针对HarmonyOS/OpenHarmony系统的适配版本，开发者可借此实现一套代码多平台运行（Android/iOS/HarmonyOS）。
1 概述
1.1 Flutter简介
Flutter是Google开发的跨平台UI框架，用于通过一套代码库高效构建跨平台应用。它采用Dart 编程语言驱动，支持将应用编译为原生机器代码或 JavaScript，从而实现高性能渲染和多端一致性。Flutter 的核心优势在于一次开发、多端部署，支持移动（iOS/Android）、Web、桌面（Windows/macOS/Linux）及嵌入式设备。
OpenHarmony版Flutter 是Flutter针对OpenHarmony系统的适配版本，可以让你用Flutter开发HarmonyOS/OpenHarmony应用。
1.2 开发环境
本文档基于以下开发环境进行测试：
1. 设备规格：
处理器：AMD Ryzen 5 5500U with Radeon Graphics（2.10 GHz）
内存：24.0 GB（21.8 GB 可用）
系统类型：64 位操作系统, 基于 x64 的处理器
2. Windows规格：
版本：Windows 11 专业版
版本号：23H2
1.3 前提条件
在开始搭建环境之前，请确保已经完成以下软件的安装：
1. 安装Git- 版本控制工具
参考链接：https://blog.csdn.net/m0_74451345/article/details/155858889?spm=1001.2014.3001.5502
2. 安装 DevEco Studio - HarmonyOS/OpenHarmony开发IDE
参考链接：https://blog.csdn.net/m0_74451345/article/details/155905981?spm=1001.2014.3001.5502
3. 安装 Java 17 - Java开发环境
参考链接：https://blog.csdn.net/m0_74451345/article/details/155857985?spm=1001.2014.3001.5502
请按照顺序完成以上软件的安装，特别是DevEco Studio和Java 17，必须要安装。
1.4 安装必备
在开始之前，要确保满足以下条件：
1. 已完成以上所有软件的安装
2. 已注册并实名认证华为开发者账号（用于签名和模拟器）
3. 网络连接正常（需要下载大量文件）
4. 至少10 GB可用磁盘空间（包含 SDK、Flutter、模拟器等）
2 配置HarmonyOS SDK环境
为了使 Flutter 能够找到HarmonyOS SDK和相关工具，我们需要配置一些环境变量。这些变量将告诉系统在哪里找到DevEco Studio的安装路径和SDK。
2.1 系统设置
打开电脑设置——系统——系统信息，找到“高级系统设置”点击。
在系统属性面板中，点击 “环境变量(N)...” 按钮。
打开环境变量设置界面。
2.2 配置 TOOL_HOME 变量
TOOL_HOME：指向 DevEco Studio 的安装目录，是其他环境变量的基础。
1. 在 “系统变量” 区域，点击 “新建(W)...” 按钮。
2. 填写变量信息：
变量名(N)：TOOL_HOME
变量值(V)：DevEco Studio 的实际安装路径
如何找到你的 DevEco Studio 安装路径？
默认路径通常是：C:\Users\你的用户名\AppData\Local\Huawei\DevEco Studio
或者在文件资源管理器中找到 DevEco Studio 的安装文件夹
复制完整路径，注意安装路径中不要有多余的空格
比如博主安装路径如下。
D:\HarmonyOS\DevEcoStudio
3. 点击 “确定” 按钮保存。
2.3 配置 DEVECO_SDK_HOME 变量
DEVECO_SDK_HOME：指向 SDK 的存储目录，通常位于 DevEco Studio 安装目录下的 sdk 文件夹。
1. 在 “系统变量” 区域，点击 “新建（W）…” 按钮。
2. 填写变量信息：
变量名(N)：DEVECO_SDK_HOME
变量值(V)：%TOOL_HOME%\sdk
注意：%TOOL_HOME% 会引用之前设置的 TOOL_HOME 变量值，这样如果 DevEco Studio 安装路径改变，只需要修改 TOOL_HOME 即可。
3. 点击 “确定” 按钮保存。
2.4 配置 PATH 变量
PATH 变量负责告诉系统在哪里查找可执行文件。
在这里我们需要添加 DevEco Studio 的工具路径。
1. 在“系统变量”区域，找到“Path”变量名。
2. 点击 “编辑(I)...” 按钮，打开编辑环境变量窗口。
3. 点击 “新建(N)” 按钮，依次添加以下三个路径（分别添加，每次点击“新建(N)” 按钮）：
OpenHarmony 包管理器：%TOOL_HOME%\tools\ohpm\bin
构建工具：%TOOL_HOME%\tools\hvigor\bin
Node.js 运行时：%TOOL_HOME%\tools\node
4. 点击 “确定” 按钮保存。
2.5 配置 HDC_HOME 变量
HDC_HOME：指向 HarmonyOS 设备连接工具（HDC）的路径，用于连接真机或模拟器。
1. 在 “系统变量” 区域，点击 “新建(W)...” 按钮。
2. 填写变量信息：
变量名（N）：HDC_HOME
变量值（V）：%DEVECO_SDK_HOME%\default\openharmony\toolchains
3. 点击 “确定” 按钮保存。
注意：这个路径依赖于 SDK 的下载，如果还没有下载 SDK，请先完成 DevEco Studio 的 SDK 下载步骤。
最后，依次点击所有打开的窗口的 “确定” 按钮，保存所有配置。
注意：配置环境变量后，必须关闭所有已打开的命令提示符窗口，然后重新打开，环境变量才会生效。
3 下载安装flutter SDK
（flutter SDK）OpenHarmony 版 Flutter 的源码托管在开源仓库中，我们需要使用 Git 将其克隆到本地。
3.1 设置存储位置
首先，我们要选择一个空间充足的磁盘位置将 Flutter 源码克隆到哪里。
例如博主在这里选择在D盘下创建目录Tools：
打开“文件资源管理器→进入D盘根目录→右键→新建→文件夹，命名为Tools（最终路径：D:\Tools），用于存放Flutter SDK。
D:\Tools\flutter_flutter #注意这里的flutter_flutter目录不用我们创建，会在后面克隆过程中下载创建
注意：
选择一个路径后，后续配置环境变量时会用到这个路径。
建议路径中不要包含中文字符，避免潜在问题。
确保选择的磁盘有足够的空间（至少 2 GB）。
3.2 克隆仓库至本地
打开命令提示符（CMD）或 Git Bash，此处博主在D盘选择任意文件夹右击，点击“Open Git Bash here”通过Git Bash进行后续操作。
切换到你想存放 Flutter 源码的目录，例如我刚刚创建的：
cd D:\Tools
执行克隆命令：
git clone https://gitcode.com/openharmony-tpc/flutter_flutter.git注意：
克隆过程需要几分钟，取决于网络速度，请耐心等待。
也可以使用 https://atomgit.com/openharmony-tpc/flutter_flutter 作为仓库地址。
3.3 查看可用分支
克隆完成后，进入 Flutter 目录（例如我前面创建的：D:\Tools\flutter_flutter）并查看所有分支：
cd flutter_flutter
git branch -a注意：-a 参数会显示所有分支（包括远程分支）。
3.4 查看版本标签
查看可用的版本标签（tag）：
git tag注意：标签通常对应稳定的版本，分支用于开发版本。
3.5 切换到开发分支
根据需求选择合适的分支。本文博主以oh-3.27.4-dev 分支为例：
git checkout -b oh-3.27.4-dev origin/oh-3.27.4-dev如果分支已存在：
git checkout oh-3.27.4-dev使用命令，验证当前分支状态：
git branch注意：由于之前博主使用oh-3.32.4-dev 分支在在模拟器中运行项目遇到点问题，以下截图都是关于oh-3.32.4-dev 分支的。在此说明本文档使用oh-3.27.4-dev 分支，执行结果与oh-3.32.4-dev 分支结果截图基本相符。
注意：
-b 参数会创建新分支并切换过去。
如果分支已经存在，使用 git checkout 命令即可。
当前分支前有 * 标记，如图中 “* oh-3.32.4-dev”（oh-3.27.4-dev 分支结果为：* oh-3.27.4-dev）。
4 配置Flutter环境
要使系统能够识别Flutter命令，需要配置Flutter相关的环境变量。
打开电脑设置——系统——系统信息，找到“高级系统设置”点击。
在系统属性面板中，点击 “环境变量(N)...” 按钮。
打开环境变量设置界面。
4.1 配置 PUB_CACHE 变量
PUB_CACHE ：Flutter/Dart 包的缓存目录。
1. 在 “系统变量(S)” 区域，点击 “新建(W)...” 按钮。
2. 填写变量信息：
变量名(N)：PUB_CACHE
变量值(V)：D:\PUB（自定义的路径）
3. 点击 “确定” 按钮保存。
注意：
变量值(V)中填写内容必须确保路径存在，如果不存在，系统会自动创建。
这个目录会存储下载的 Flutter 包，建议选择空间充足的磁盘。
4.2 配置 PUB_HOSTED_URL 变量
PUB_HOSTED_URL：Dart 包的镜像源地址，使用国内镜像可以加快下载速度。
1. 在 “系统变量” 区域，点击 “新建(W)...” 按钮。
2. 填写变量信息：
变量名(N)：PUB_HOSTED_URL
变量值(V)：https://pub.flutter-io.cn
3. 点击 “确定” 按钮保存。
4.3 配置 FLUTTER_STORAGE_BASE_URL 变量
FLUTTER_STORAGE_BASE_URL：Flutter 存储的镜像源地址。
1. 在 “系统变量” 区域，点击 “新建(W)...” 按钮。
2. 填写变量信息：
变量名(N)：FLUTTER_STORAGE_BASE_URL
变量值(V)：https://storage.flutter-io.cn
3. 点击 “确定” 按钮保存。
4.4 配置 PATH 变量
将之前克隆到的Flutter的 bin 目录添加到 PATH 变量中，这样可以在任何地方使用flutter命令。
1. 在 “系统变量” 区域，找到 “Path” 变量名。
2. 点击 “编辑(I)...” 按钮，打开编辑环境变量窗口。
3. 点击 “新建(N)” 按钮，添加 Flutter 的实际路径：
注意：
路径必须是 Flutter 源码目录下的 bin 文件夹，例如：
博主之前克隆到 D:\Tools\flutter_flutter 目录下，
则添加 D:\Tools\flutter_flutter\bin
4. 点击 “确定” 按钮保存。
4.5 检查Flutter版本
在电脑PowerShell或Git中执行检查Flutter版本命令：
flutter --version
4.6 诊断flutter环境
Win+R组合键后输入cmd打开命令提示符，或者打开Windows PowerShell。
运行以下命令，诊断flutter环境：
flutter doctor -v诊断环境显示结果中：Flutter、OpenHarmony至少应该显示为 [✓] 。
5 创建 Flutter 项目
环境配置好后，我们就可以创建第一个 Flutter 项目。
5.1 选择Flutter项目文件夹
首先，我们在电脑上选择一个空间充足的磁盘位置，比如博主在这里选择在D盘下创建一个名为“Flutter_HmProject”的文件夹来存放Flutter 项目。
打开Windows PowerShell后cd进入到该目录下。
cd D:\Flutter_HmProject\
接下来进行Flutter 项目创建。
项目创建有两种方式：
# 只创建 OpenHarmony 平台工程
flutter create --platforms ohos <项目名称>
# 创建多平台工程（Android、OpenHarmony等）
flutter create <项目名称>例如：博主在这里只创建OpenHarmony 平台项目
# 创建 OpenHarmony 平台Flutter 项目
flutter create --platforms ohos flutter_harmonyos--platforms ohos：明确指定生成鸿蒙工程目录。
flutter_harmonyos：项目名称。
5.2 配置HAP包
HAP（HarmonyOS Ability Package）是HarmonyOS专属的应用安装包格式。
我们需要把写的 Flutter 项目，转换成鸿蒙系统能安装运行的应用安装包。
首先创建完项目后，进入到flutter_harmonyos项目目录中：
cd <项目名称>例如：cd flutter_harmonyos
在项目D:\Flutter_HmProject\flutter_harmonyos目录执行编译命令：
flutter build hap --debug参数说明：
flutter build hap：告诉 Flutter 工具 “我要把这个 Flutter 项目，编译成鸿蒙的 HAP 安装包”；
--debug：指定编译的是调试版本，开发阶段用这个版本，方便你调试代码、看日志（开发时使用）
--release：编译发布版本（发布应用时会用/正式发布时使用）
6 使用模拟器运行Flutter项目
6.1 DevEco Studio打开项目
1. 打开 DevEco Studio。
2. 选择 “Open”。
3. 找到刚才创建的Flutter 项目目录，选择其中的 ohos 文件夹点击“ok”打开。
6.2 启动模拟器
1. 在 DevEco Studio 顶部菜单栏，找到“No Devices”下拉。
2. 点击“Device Manager”打开设备管理界面设备管理图标。
6.3 配置调试签名
按照前面配置完HAP包给出的步骤，依次进行以下操作：
在DevEco Studio打开ohos工程后配置调试签名(File -> Project Structure -> Signing Configs 勾选Automatically generate signature)
登录已经实名认证的华为开发者账号，完成后依次点击Apply、OK确认。
6.4 运行应用
点击 DevEco Studio 工具栏的运行按钮（绿色三角形图标）。
等待应用编译和运行。
应用成功运行后，我们就会在模拟器上看到 Flutter 应用的界面。
7 代码提交至 AtomGit 公开仓库
7.1 在 AtomGit 创建个人公开仓库
1. 点击 AtomGit 页面右上角 “新建” 下拉菜单，选择 “新建项目”；
2. 填写仓库基础信息：
项目名称：填写有辨识度的名称（如flutter_HmProject）；
项目路径：自定义项目路径；
项目介绍：填写你的项目介绍信息；
是否公开：选择 “公开项目”。
3. 点击 “创建项目” 按钮，完成公开仓库的建立。
7.2 准备本地工程与 Git 环境
1. 确认本地工程文件完整性：确保工程根目录包含全部文件（lib源码、ohos鸿蒙工程配置、build编译文件等）；
2. 初始化 Git 仓库（若未初始化）：
打开终端，进入工程根目录，比如我之前创建的D:\Flutter_HmProject\flutter_harmonyos项目，
cd D:\Flutter_HmProject\flutter_harmonyos
执行以下命令：
git init3. 配置 Git 用户信息/Git 全局设置（首次使用需配置）：
git config --global user.name "你的AtomGit用户名"
git config --global user.email "你的AtomGit绑定邮箱"
4. 输入以下命令，查看当前的 Git 配置信息，确认用户名和邮箱是否已经正确设置：
git config --list
7.3 本地工程关联 AtomGit 仓库
将本地工程与 AtomGit 远程仓库关联（仓库地址是你的 AtomGit 仓库地址）：
git remote add origin https://atomgit.com/你的用户名/仓库名称.git7.4 代码提交至 AtomGit 仓库
1. 将本地工程文件添加到 Git 暂存区：
git add .
2. 提交代码（填写清晰的 commit 信息）：
git commit -m "Initial commit: Flutter+鸿蒙跨平台工程初始化"（后续也可进入本地工程终端，执行修改命令：git commit --amend，将 commit 信息进行修改，修改完成保存后使用命令强制推送更新：git push -f origin main）
3. 将代码推送至 AtomGit 远程仓库：
执行推送命令（首次推送关联分支）：
git push -f origin main（提示身份验证，输入你的 AtomGit 账号 + 密码，或用访问令牌替代密码）。
7.5 验证推送结果
刷新你的 AtomGit 仓库页面，确认工程配置文件、源码、资源、调试日志等文件已全部显示，完成代码提交任务。
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
14
0- 0
已为社区贡献2条内容
所有评论(0)