flutter开发适配鸿蒙之开发环境搭建

HarmonyOS next之flutter开发适配鸿蒙之开发环境搭建

第一:环境搭建

1.安装 DevEco Studio NEXT IDE, 注意版本应该是 Next,当前最新的是 Beta3
.下载之前需要先登录,后面的模拟器创建还要开发者验证、审核啥的,好在审核进度还可以,我这边提交申请后差不多两个小时审核通过
.找到自己电脑系统匹配的版本下载,我的电脑是Window的就选择Window版本下载
.安装步骤比较简单,一步步next直到完成即可,新版本的工具已经集成node和ohpm等环境进去了,不用单独下载安装了
2.安装Git, 如果要同时适配安卓,需要安装Android Studio; 如果要适配ios,需要安装Xcode

Mac 安装(推荐)
环境变量配置

# Flutter Mirror
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

# HarmonyOS SDK
export TOOL_HOME=/Applications/DevEco-Studio.app/Contents/
export DEVECO_SDK_HOME=$TOOL_HOME/sdk # command-line-tools/sdk
export PATH=$TOOL_HOME/tools/ohpm/bin:$PATH # command-line-tools/ohpm/bin
export PATH=$TOOL_HOME/tools/hvigor/bin:$PATH # command-line-tools/hvigor/bin
export PATH=$TOOL_HOME/tools/node/bin:$PATH # command-line-tools/tool/node/bin

Windows 安装
配置用户变量

FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

PUB_HOSTED_URL=https://pub.flutter-io.cn

DEVECO_SDK_HOME=C:\Program Files\Huawei\DevEco Studio\sdk

配置环境变量
编辑 PATH,添加以下路径

C:\Program Files\Huawei\DevEco Studio\tools\ohpm\bin
C:\Program Files\Huawei\DevEco Studio\tools\hvigor\bin
C:\Program Files\Huawei\DevEco Studio\tools\node

管理多个 Flutter 版本
如果在项目开发中,需要使用多个 Flutter 版本,可以考虑使用 fvm
1.安装 FVM
2.使用 fvm 官方 flutter 版本
fvm install 3.22.0
3.安装自定义鸿蒙版本,进入 fvm/version 目录,通常位于用户目录下,如 ~/fvm/versions/3.22.0, 拷贝仓库并重命名为 custom_x.y.z的名字
git clone -b dev https://gitee.com/openharmony-sig/flutter_flutter.git custom_3.7.12
4.在项目中使用单独的 flutter sdk 版本, 在项目目录中执行:
fvm use custom_3.7.12

第二:创建运行项目
  1. 检测flutter创建鸿蒙运用条件是否可以了
    运行flutter doctor -v检查环境变量配置是否正确
[✓] HarmonyOS toolchain - develop for HarmonyOS devices
    • OpenHarmony Sdk at E:\ohos\DevEcoStudio\sdk, available api versions has [12:default]
    • Ohpm version 5.0.8-rc.1    #如果这里报x错误,说明上面的`PATH变量添加值 %TOOL_HOME%\tools\ohpm\bin`添加的环境变量ohpm的路径配置有问题
    • Node version v18.20.1      #如果这里报x错误,类似PATH配置的node路径有问题
    • Hvigorw binary at E:\ohos\DevEcoStudio\tools\hvigor\bin\hvigorw   #如果这里报x错误,类似PATH配置的hvigor路径有问题

2. 创建flutter项目
创建工程 方式一 该方式只创建了ohos平台
flutter create --platforms ohos <projectName>
创建工程 方式二 该方式创建了android,ios,ohos三个平台
flutter create <projectName>
进入工程根目录编译hap包,创建完项目之后,要先执行这步build才能生成依赖,如果直接使用DevEcho Studio打开会报错找不到flutter.har依赖库flutter build hap --debug

3. 运行flutter项目到鸿蒙next手机
方式一:通过flutter devices指令发现真机设备之后,获取device-id,进入项目目录指定构建方式编译hap包并安装到鸿蒙手机中 flutter run --debug -d <deviceId>

flutter devices
  flutter run --debug -d <deviceId>

方式二:进入工程根目录编译hap包,然后安装到鸿蒙手机中

flutter build hap --debug
  hdc -t <deviceId> install <hap file path>    # 类似Android的adb安装:adb -s <deviceId> install <apk file path>

方式三:使用DevEcoStudio打开项目的ohos模块

  1. File --> Project Structure --> Signing Configs --> 勾选Automatically generate signature --> Apply ,可以启用启动签名,第一次执行flutter build hap的时候也会提示到
  2. 创建模拟器:Device Manager --> 进去根据提示可以插件模拟器,不过第一次创建还需要进行开发者验证以及审核。。。
  3. 重点提示一下:创建的模拟器只有x86架构的,而这篇文章我们通过flutter_flutter构建的支持鸿蒙的flutter运用只支持arm64架构的,人家文档也说明了,所以啊其实创建模拟器对flutter应用也没啥用,#要真机运行
第三:打包项目

1. 打包测试包

flutter build hap --debug

如果需要指定engine的话,使用--local-engine参数
使用flutter build hap --debug --local-engine=E:\ohos\flutter_image\src\out\ohos_debug_unopt_arm64,会提示失败src\out\ohos_debug_unopt_arm64\flutter.har找不到
如果提示flutter.har找不到,那就是从项目目录下的ohos\har\flutter.har拷贝一份到src\out\ohos_debug_unopt_arm64目录下,然后再执行上一步就能成功

2. 打包正式包

flutter build hap --release 或者 flutter build hap

如果需要指定engine的话,使用--local-engine参数
比如flutter build hap --release --local-engine=E:\ohos\flutter_image\src\out\ohos_release_arm64,会提示失败src\out\ohos_release_arm64\flutter.har找不到
如果提示flutter.har找不到,那就是从项目目录下的ohos\har\flutter.har拷贝一份到src\out\ohos_release_arm64目录下,然后再执行上一步就能成功

常见问题
1.运行 flutter doctor 出现 Error: Unable to find git in your PATH.
执行以下命令

git config --global --add safe.directory '*'

参考资料
Flutter中文文档
Harmonyos Next 开发文档

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,294评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,780评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,001评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,593评论 1 289
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,687评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,679评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,667评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,426评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,872评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,180评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,346评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,019评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,658评论 3 323
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,268评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,495评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,275评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,207评论 2 352

推荐阅读更多精彩内容