flutter-3.22鸿蒙版 mac vscode harmonyos环境配置与更新

最终效果

• 配置成功， mac和windows仅配置路径不同，方法相同。
  

sdk和engine最新地址说明

SDK: 
gitcode分支：
https://gitcode.com/openharmony-sig/flutter_flutter/tree/3.22.0-ohos
原始仓库
https://gitee.com/harmonycommando_flutter/flutter
Engine:
gitcode分支：
https://gitcode.com/openharmony-sig/flutter_engine/tree/oh-3.22.0
原始仓库
https://gitee.com/harmonycommando_flutter/flutter_engine

一、下载flutter鸿蒙分支

flutter_3.22.0鸿蒙版SDK git库

• 注意:模拟器仅支持mac(arm64)不支持mac(x86)和windows，可支持真机。
• 下载到一个自定义文件夹里，下面会用到这个路径，比如/Users/用户名/development/flutter_ohos_3_22

cd /Users/用户名/development
git clone https://gitcode.com/openharmony-sig/flutter_flutter/tree/3.22.0-ohos.git

• 下载完成可以改名为flutter_ohos_3_22
• 3.7版本下载地址 flutter_鸿蒙SDK – 3.7

二、配置系统flutter版本

• 我使用了手动设置环境变量切换 Flutter 版本，你也可以使用fvm或者使用vscode来给项目单独配置不同的flutter版本，使用fvm插件参考这个大佬的文章使用 FVM 管理鸿蒙化 Flutter SDK

1、查看需要打开的系统环境配置文件

echo $SHELL
// 如果输出结果为/bin/bash，则执行以下命令，打开.bash_profile文件
vi ~/.bash_profile
// 如果输出结果为/bin/zsh，则执行以下命令，打开.zshrc文件
vi ~/.zshrc

2、添加环境配置

• 我这里使用cmd+shift+G打开~/.zshrc，也可以终端使用vi ~/.zshrc
• 添加路径如下：

#1.flutter环境变量（注意export PATH=此地址是在电脑中的flutterSDK安装路径，可能发生改变）
export PATH="/Users/用户名/development/flutter_ohos_3_22/bin:$PATH" 
#2.flutter镜像地址  
#export PUB_HOSTED_URL="https://pub.flutter-io.cn"

• 保存配置，终端执行，之后需要重启终端生效

source ~/.zshrc

3、打开vscode的terminal

• 输入

flutter --version

• 输出（会自动更新对应dart版本）

Flutter 3.22.1-0.0.pre.8 • channel oh-3.22.0 • https://gitee.com/harmonycommando_flutter/flutter
Framework • revision 4182fc93cd (31 小时前) • 2024-11-07 02:17:58 +0000
Engine • revision f6344b75dc
Tools • Dart 3.4.0 • DevTools 2.34.1

三、配置harmonyos环境

• 此时，在vscode中输入flutter doctor 报错如下

1、下载鸿蒙开发工具最新版DevEco 5.0.0 release

• 按照第一步提示下载鸿蒙开发工具DevEco 5.0.0 release
• 这个ide自带了鸿蒙开发环境，我们接下来要使用这个环境配置

2、配置Openharmony环境

• 按照"错误提示图"中的第一步，我们已经下载好了ide，ide中已经包含了OpenHarmony，所以不需要再使用ohosdkmgr再自己去下载openharmony了
• 打开deveco的performance，找到openharmon sdk的路径
• 即：/User/用户名/Library/OpenHarmony/Sdk
  - 打开vscode的terminal，按照提示输入

flutter config --ohos-sdk /User/用户名/Library/OpenHarmony/Sdk  

• 此时需要重启vscode生效
• 再次打开vscode的terminal，输入flutter doctor，此时已没有openharmony sdk没安装的错误提示了。
  

3、添加ohpm和hvigorw工具的环境配置

• 注意DevEco已经下载了ohpm和hvigorw工具，所以需要找到他们的位置，并在系统中进行配置
• 打开DevEco的terminal，输入

which ohpm

which hvigorw

• 输出(ohpm和hvigorw在mac环境下位于.app包里)

• 找到路径后，同样cmd+shift+G打开~/.zshrc，添加配置

#4.vscode flutter配置openharmony
export PATH=$PATH:/Applications/DevEco-Studio.app/Contents/tools/ohpm/bin
export PATH=$PATH:/Applications/DevEco-Studio.app/Contents/tools/hvigor/bin

• 在vscode的terminal种执行下面命令后，重启vscode的终端生效。

source ~/.zshrc

• 再次在vscode的terminal中执行下面语句，配置成功如图

flutter doctor

Tips:踩坑提示

• 如果按照flutter doctor的报错提示，去官方下载ohsdkmgr工具，用ohsdkmgr下载openHarmony来自行配置的话，会有很多错误如下：
  
• 目前使用的deveco5.0是内置了openharmony和一些工具，不需要自己下载
• 如果自己去下载tool配置的话
  • 1、实际操作发现sdkmanager最大可下载api9，没办法用最新的api12
  • 2、会报错The Java version cannot be less than 17.需要用java17以上版本。
  • 3、会报错ohpm需要init
• 所以使用deveco中已经配置好的环境就可以了。

四、追加ohos文件夹

• 如果是现有项目，需要追加ohos，否则不会自动显示ohos文件夹。追加后，flutter项目里生成ohos文件夹，对应鸿蒙项目。

flutter create --platforms ohos .

• 如果是新建项目则使用flutter create 可以自动生成包含ohos文件夹的项目。

flutter create --platforms=android,ios,web,macos,windows,linux your_project_name

五、配置vscode对应flutter版本

• 打开vscode，使用快捷键 " cmd + ， " 在输入框输入settings.json，打开settings.json
  
• 更改 “dart.flutterSdkPath”: 路径为你下载的鸿蒙的路径。此时vscode默认识别flutter版本为oh-3.22.0，dart版本是3.4.0，flutter sdk是3.22.0

踩坑提示

• 如果不配置settings.json的"dart.flutterSdkPath": ，则ide可能默认识别为谷歌版flutter，就没有ohos平台，如果使用TargetPlatform.ohos，则不能使用ide按F5调试，会报错ohos找不到。但由于终端已经配置好了flutter版本，所以使用flutter run能正常运行。

六、更新flutter 鸿蒙SDK版本

• 由于3.22.0，3.22.3版本engine产物没上云，用的话需要自己编一下engine。
• 场景：3.22.1-0.0.pre8升级到3.22.1-00.pre22。

升级步骤

1、下载最新SDK

• 现在gitcode地址
• 下载到指定的文件夹里，上面我放在了Users/用户名/development

git clone --branch 3.22.0-ohos https://gitcode.com/openharmony-sig/flutter_flutter.git

• 根据需要改名字flutter-flutter文件夹改名为flutter_ohos_3_22

tips：原gitee上SDK地址（已暂停更新）

 下载到指定的文件夹里，上面我放在了Users/用户名/development

git clone https://gitee.com/harmonycommando_flutter/flutter

 根据需要改名字flutter文件夹改名为flutter_ohos_3_22

2、配置环境

• 参照前面环境配置，直接替换 Users/用户名/development/flutter_ohos_3_22为最新代码库即可。

3、替换flutter执行

 flutter doctor

4、重启ide使flutter更新生效（我使用vscode）

• 重启后生效，flutter已更新。

其他

• 升级API版本可参考鸿蒙ide升级API17，No Hmos SDK found