尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

OpenHarmony上跑通Flutter:环境搭建完整实战指南

OpenHarmony上跑通Flutter:环境搭建完整实战指南 宠辱不惊地讲在 OpenHarmony 生态还没完全“傻瓜化”的今天能把 Flutter 和 OHOS 的这套工具链从零拼起来本身就是一场跟版本、签名、构建缓存斗智斗勇的过程。我这次踩的版本是oh-3.44.9-dev算是 Flutter 对 OpenHarmony 适配里比较新的一个开发分支整个过程从装 DevEco Studio 到真机亮起 Flutter 的 Demo 界面前后折腾了两天。这篇文章就是把这两天的完整记录整理出来给同样想用 Flutter 吃 OHOS 这波红利、又不想看英文 Issue 和零散文档的朋友一份能直接照做的路径。文章会覆盖环境清单、工具链安装、Flutter SDK 切换、工程生成、hvigor 编译、签名配置以及我实际遇到的几个高频报错。无论你是刚从 Android 转过来的 Flutter 开发者还是 OHOS 原生开发想找更高效的跨端方案这篇都值得收藏。1. 写在前面为什么要在 OpenHarmony 上跑 Flutter1.1 这个需求是怎么来的我手里有一个已经用 Flutter 写了三年的跨端应用覆盖 Android、iOS、Windows 和 Web。最近公司开始评估 OpenHarmony 设备的适配第一反应当然是用 ArkTS 重写一套。但看了下现有代码量两千多个 Dart 文件重写成本根本不是一两个月能消化掉的。所以目光自然落在 Flutter 对 OHOS 的适配进度上也就是 OpenHarmony SIG 组织维护的那条 flutter 分支。这件事的价值不用多说Flutter 的 UI 代码是纯 Dart业务逻辑大部分不依赖平台通道只要能跑通渲染层和平台插件层一套代码就能直接复用到 OHOS 设备上。尤其对于工具类、效率类、内容类应用这种适配路线几乎是最优解。但前提是你得能把环境跑起来。1.2 环境搭建的真正难点按道理 Flutter 环境搭建是有脚手的flutter doctor一条命令就能把大部分问题暴露出来。但 OHOS 的适配方案不同它不是 Flutter 官方主分支直接支持的目标平台你需要把整个 Flutter SDK 替换成 OpenHarmony 的 fork 版本还要同时安装 DevEco Studio、OpenHarmony SDK、Node.js、JDK以及后来还要处理 hvigor 这个构建工具。真正折磨人的是版本匹配。Flutter 3.44.9-dev 这个版本对 OpenHarmony SDK 的 API 版本、DevEco Studio 的构建插件版本、JDK 的大版本都有隐含要求。任何一个组件版本对不上编译的时候就会抛出一堆看起来毫无关联的错误。我整理这篇文章的时候把踩过的所有坑都记录了版本号的对应关系你只要照着用就能少走大半天弯路。1.3 版本号 oh-3.44.9-dev 到底代表什么先说结论oh-3.44.9-dev是 OpenHarmony 的 Flutter 适配分支基于 Flutter 3.44.9 版本切出的开发版标识其中 oh 是 OpenHarmony 的缩写dev 表示 development 主线。这个分支的优点是新OpenHarmony 的新特性跟得比较快缺点同样来自“新”配套的文档、插件、工具链可能还没完全稳定你在pub.dev上找到的 Flutter 插件不一定兼容需要留意插件是否包含 ohos 平台的实现。如果追求稳定SIG 仓库里那些正式 release 版分支比如带具体版本号、不带 dev 后缀的会更保险。但我实际体验下来只要环境配对了oh-3.44.9-dev日常开发完全可用。2. 环境准备与整体方案选型2.1 完整依赖清单缺一样都不行先上一张我最终跑通时使用的环境清单这是整篇文章的地基后面所有配置都会基于这个版本组合展开。组件版本/说明操作系统Windows 11 专业版 22H264位DevEco Studio5.0.3 Release对应 OpenHarmony SDK API 12OpenHarmony SDKAPI 12附带在 DevEco Studio 内Flutter SDKoh-3.44.9-devOpenHarmony SIG fork 分支JDK17.0.11DevEco Studio 内置可复用Node.js18.20.2 LTShvigor由 DevEco Studio 内置通过 hvigor-config 管理真机/模拟器Dayu 200 开发板RK3568OpenHarmony 4.1 Release 系统注意这张表里最容易忽略的是 Node.js。很多人以为装 Flutter 只需要 Dart SDK但 OHOS 工程的构建工具链是 hvigor它依赖 Node.js 环境。如果你机器上没装 Node或者版本低于 16编译到一半就会报hvigor is not recognized之类的错误。2.2 为什么不用 Flutter 官方分支非要用 forkFlutter 官方主分支对 OpenHarmony 的支持一直停留在社区 PR 阶段没有正式合入。如果你直接用flutter create建工程生成的目录里只有 android、ios、web、windows 这些平台文件夹根本没有 ohos。OpenHarmony SIG 维护的 flutter_flutter 仓库本质上是 Flutter 仓库的镜像 OHOS 适配改动里面做了一套完整的引擎桥接。简单理解就是Flutter 负责 UI 渲染和业务逻辑OHOS 侧通过一套原生的FlutterOHOS容器把渲染结果承接过来。所以你必须把这个仓库的代码当作你的 Flutter SDK而不是去官网下载那个“正经的” Flutter。还有一个不容易注意到的点这个 fork 分支对应的flutter_tools里面内置了很多 OHOS 专属命令比如flutter ohos create、flutter ohos build、flutter ohos run。这些命令在官方版 SDK 里是不存在的也是我判断 SDK 是否切换成功的标志之一。2.3 安装 DevEco Studio 与 OpenHarmony SDKDevEco Studio 是 OpenHarmony 应用开发的主战场也是编译 OHOS 侧壳工程必须的工具链。我用的是 5.0.3 Release下载地址在华为开发者联盟官网需要登录账号才能下载这里就不放链接了。安装过程比较常规一路 next 即可但有两个细节要留意。第一安装路径不要带中文和空格我放在D:\DevEcoStudio后续导出 SDK 路径、写环境变量都会方便很多。第二首次启动会引导你下载 OpenHarmony SDK一定要选择带system镜像的完整 SDK不要只装toolchains否则后面跑模拟器或者连接真机时会缺系统库。SDK 下载完成后建议在 DevEco Studio 的SDK Manager里看一眼 SDK 路径通常长这样D:\DevEcoStudio\sdk。这个路径后面配置签名、链接设备都要用先记下来。2.4 Node.js、JDK 与命令行工具链JDK 这块最省心——DevEco Studio 自带了一个 JBRJetBrains Runtime本质上是 JDK 17 的定制版。所以在设置JAVA_HOME时直接指向 DevEco Studio 安装目录下的jbr文件夹即可不用额外装 JDK 了。例如我这里是D:\DevEcoStudio\jbr。Node.js 则比较关键我遇到过两个因为 Node 版本不对导致的怪问题Node 14 以下hvigor 执行直接报语法错误Node 20 以上部分依赖编译时出现 OpenSSL 兼容性告警保险起见我锁定在 Node 18 LTS到目前为止没有因为这个再出过问题。安装完 Node 后记得把 npm 源换成国内镜像不然装 hvigor 相关依赖的时候能等崩溃。npm config set registry https://registry.npmmirror.com3. Flutter OHOS SDK 的下载与配置3.1 获取 ohos 适配分支这一步是整个环境的灵魂也是最容易出错的地方。你绝不能去flutter.dev下载官方 SDK而是要 clone OpenHarmony SIG 的 flutter_flutter 仓库然后切换到对应的 ohos 分支。git clone https://gitee.com/openharmony-sig/flutter_flutter.git cd flutter_flutter git branch -a | grep ohos git checkout oh-3.44.9-dev这里有个小技巧clone 的时候建议加--depth 1参数只拉最新提交否则整个仓库历史有几个 GB能把人等没。但如果加了--depth 1后面切换分支时可能找不到目标分支我的做法是先直接 clone 完整仓库等用顺手了再自行清理.git目录。切换完后顺手看一下 Dart SDK 版本正常情况下 Flutter 3.44.9-dev 对应 Dart 3.6 以上。如果你之后发现某些插件不支持先回来看 Dart 版本是否匹配。3.2 配置环境变量与国内镜像把 Flutter SDK 的bin目录加到 PATH 里同时配置两个 Flutter 专属环境变量。国内网络环境不配镜像的话flutter precache下载引擎会导致卡死。FLUTTER_STORAGE_BASE_URLhttps://storage.flutter-io.cn PUB_HOSTED_URLhttps://pub.flutter-io.cn这两个变量在用户级别配置即可。配完后打开新的终端执行flutter --version如果能看到版本信息并且版本号带oh-3.44.9-dev字样说明 SDK 路径已经切换成功。另外环境变量里有ANDROID_HOME的兄弟叫OHOS_HOME如果你用 Android Studio 开发过会习惯性地想配这个变量。但实际上 OHOS 的构建工具不读OHOS_HOME它读的是 DevEco Studio 写的local.properties。所以这一步不用多配置知道有这么回事就行。3.3 flutter doctor 体检结果怎么看在纯 OHOS 场景下flutter doctor的结果会有很多“未安装”的告警比如 Android toolchain、Xcode、Chrome 等。不用慌这些对 OHOS 开发不构成阻塞。真正关键的是看 Flutter 本身有没有报红。可以先忽略其他平台工具链直接看flutter doctor -v输出的第一段确认 Flutter 引擎版本和 Dart SDK 路径。另外OHOS 分支的 flutter 命令集和官方版略有差异输入flutter ohos -h如果能弹出帮助信息说明 fork 补丁生效了。如果提示ohos不是有效命令大概率是分支切换失败或者 SDK 没重新构建。flutter ohos -h看到类似Create a new flutter ohos project的说明这个环节就通过了。3.4 版本锁定最容易踩坑的地方这个部分我必须单独拿出来说因为至少浪费了我两小时。Flutter 项目里的pubspec.yaml依赖、Gradle/ hvigor 插件、DevEco Studio 的 SDK 版本三者之间存在隐藏的强约束。比如我用 DevEco Studio 5.0.3 Release 自带的 OpenHarmony SDK API 12但项目里oh-package.json5依赖的ohos/hypium版本是 1.0.19两者兼容。如果手贱升级了某一边立刻会出现各种不明所以的编译错误。所以我的建议是版本一拍定不要随意升级尤其是 OpenHarmony SDK 和 hvigor 插件。每次升级前先看 OpenHarmony SIG 仓库的 Release Note确认适配的 Flutter 版本。社区文档跟版本走的非常快网络上的教程可能上周还能用这周就不行了。4. 创建项目并跑通首个应用4.1 用 flutter create 生成 Dart 侧工程环境变量配好之后创建项目变得比较直观。进入一个工作目录执行flutter create my_ohos_app这里生成的是纯 Dart 工程还没有 ohos 平台文件夹。接下来用屏已在 OHOS 分支的 flutter_tools 内置命令生成壳工程cd my_ohos_app flutter ohos create执行完后工程根目录下会多一个ohos文件夹里面就是完整的 OpenHarmony 工程结构包含entry模块、AppScope以及build-profile.json5等文件。这个命令非常关键。如果执行报错先确认flutter ohos -h是否能正常输出如果提示没有这个命令说明 SDK 没有切换成功回到上一节检查分支。4.2 看懂生成的 ohos 壳工程目录my_ohos_app/ ├── lib/ # Dart 业务代码 ├── ohos/ │ ├── AppScope/ # 应用级配置应用图标、系统能力声明 │ ├── entry/ # 模块级工程对应 Android 的 app 模块 │ │ ├── src/main/ │ │ │ ├── ets/ # ArkTS 入口代码 │ │ │ ├── resources/ # 资源文件 │ │ │ └── module.json5 # 模块配置类似 AndroidManifest │ ├── build-profile.json5 # 签名、编译配置 │ ├── hvigorfile.ts # hvigor 构建脚本入口 │ └── oh-package.json5 # ohos 侧依赖声明我刚开始看这个目录的时候很有亲切感它和 Android 工程高度相似。ArkTS 的入口文件会在启动时加载 Flutter 容器然后渲染lib/main.dart里定义的界面。如果只做 Flutter 业务开发基本不需要改 ArkTS 代码这点对 Flutter 开发者非常友好。一个常见的需求是修改应用名称和应用图标。名称在AppScope/app.json5里改图标在AppScope/resources/base/media/下替换图片资源。注意这里的应用名称和 Flutter 侧MaterialApp的 title 是两个概念别混淆。4.3 hvigor 构建与签名配置编译 OHOS 工程用的是 hvigor命令长这样cd ohos hvigorw assembleHap --mode module -p productdefault -p buildModedebug如果用 DevEco Studio 图形界面直接打开ohos文件夹等它同步完依赖点右上角的运行按钮就行。命令行和图形界面本质一样但命令行看日志更清晰报错定位更快。签名这块是新手最容易卡住的地方。OpenHarmony 应用安装到真机需要签名和 Android 的 debug keystore 性质类似。在 DevEco Studio 里File - Project Structure - Signing Configs勾选Automatically generate signature它会自动登录华为账号并生成build-profile.json5的签名信息。如果没有华为开发者账号这一步会失败可以注册一个个人开发者账号免费。命令行模式下签名信息已经写在build-profile.json5只要配置好了构建命令会自动读取。调试阶段用自动签名足够发布上架时才需要手动配置发布证书。4.4 连接设备首次运行真机调试我用的是 Dayu 200 开发板OpenHarmony 4.1 Release 系统。连接方式很简单USB 连上开发板然后在命令行执行flutter ohos devices flutter ohos run如果设备列表能看到开发板编号直接flutter ohos run就会自动完成编译、签名、安装、启动的全流程。首次运行要比 Android 慢不少因为 OpenHarmony 侧要编译整个 ArkTS 桥接工程再加上 Flutter boostrap大约需要 3-5 分钟。看到终端输出Flutter run key commands那几行提示就说明应用已经跑起来了。我在模拟器上首次启动时黑屏了十几秒一度以为卡死了实际上只是在做首帧渲染的 warmup耐心等一等就好。5. 高频报错与排查技巧实录5.1 Windows 下找不到 Visual Studio toolchain这个问题在 Flutter 开发者里不算陌生以前是踩在 Windows 桌面端上现在在 OHOS 场景也会碰到。报错长这样unable to find suitable visual studio toolc...原因很直接Flutter 在 Windows 上编译引擎的 native 插件时依赖 MSVCMicrosoft Visual C工具链。如果你没装 Visual Studio或者装了但没勾选“使用 C 的桌面开发”工作负载flutter 就会报这个错。解决办法有两个安装 Visual Studio 2022勾选“使用 C 的桌面开发”及“Windows 11 SDK”不装全量 VS只装 Build Tools for Visual Studio 2022同样勾选 C 相关组件装完之后一定要重启终端让环境变量生效。我再补一句纯 ArkTS 插件开发不会触发这个报错只有 Flutter 在用 C 编译插件或者引擎相关代码的时候才会碰到所以如果你跑的是纯 Dart 项目还报这个错先看是不是装了某些含原生代码的插件。5.2 You are applying Flutters main Gradle plugin imperatively这条告警曾在 Flutter 社区里被翻来覆去讨论过报错信息是You are applying Flutters main Gradle plugin imperatively using the apply script method在 Android 工程里它是一条弃用告警但如果你在 OHOS 侧也看到类似描述需要警惕一下。它的一般含义是构建脚本用了旧式命令式插件应用方式新版本的工具链推荐用声明式插件 DSL。出现这个告警通常不阻塞构建但如果后面跟着一个FAILURE: Build failed with an exception那就不是告警是工程结构问题了。我的排查思路是这样的先确认ohos/hvigorfile.ts里的插件引用方式是否和 DevEco Studio 自动生成的模板一致。鼠标右键在 DevEco Studio 里新建一个空白工程对比它的 hvigorfile.ts 和当前项目的差异绝大多数情况是插件的版本写错了或者依赖顺序乱了。这个比较法效率极高比在网上搜报错强一百倍。5.3 版本漂移导致的编译适配错误这是我这次搭建过程中碰到的最隐蔽的问题。我在 clone 完oh-3.44.9-dev分支后又顺手用了flutter upgrade结果 Flutter SDK 自动升级到了更新版本和ohos工程里预设的编译配置发生漂移随后抛出一堆引擎桥接的函数签名错误。排查半天才发现flutter_upgrade把当前分支切回了默认的稳定分支Flutter 版本已不是 ohos 分支了。这种错误网上基本搜不到因为你遇到的错误信息千奇百怪但根源只有一个SDK 分支不再是 ohos 适配分支了。解决方案很朴素git checkout oh-3.44.9-dev所以在任何flutter命令之后都瞄一眼flutter --version和当前git branch。在适配分支下千万不要随手执行flutter upgrade或flutter channel这类会切换版本的命令。提示可以把 Flutter SDK 目录在 git 里的 HEAD 固定到你验证通过的那个 commit以后不管谁动了环境能快速恢复。5.4 其他杂项问题速查表我把剩下碰到的小问题做成一个速查表方便你按图索骥。现象可能原因解决办法hvigorw 提示找不到命令Node.js 没装或版本过旧安装 Node 18 LTS 并确保 PATH 生效应用安装到真机时签名失败自动签名信息缺失或过期DevEco Studio 里重新生成签名配置首次启动白屏时间过长引擎在做首帧 warmup等待 10-30 秒观察 logcat 输出运行 flutter create 后没有 ohos 目录忘执行 flutter ohos create手动执行flutter ohos createDevEco Studio 打开工程一直 sync 卡住网络无法访问 npm 或 hvigor 仓库配置国内 npm 镜像并在 oh-package.json5 中检查依赖源Flutter 插件在 OHOS 上无响应插件未实现 ohos 平台端代码查看插件 release 记录或源码确认是否支持 OHOS 平台这里想额外说一条经验OHOS 适配分支对 Flutter 插件的支持参差不齐dio、shared_preferences这类核心插件社区适配较早但小众插件很可能没有 ohos 实现。在项目选型期就要把插件清单过一遍不然写业务代码一时爽联调平台通道时火葬场。如果你发现自己常用的插件没有 OHOS 端可以先在pubspec.yaml中引入插件源码仓库自己补一个 ohos 平台的 method channel 实现。6. 从环境跑通到正式开发最后再分享几句6.1 开发调试的效率心得真机调试最耗时的环节在编译尤其每次修改 ArkTS 代码后整个工程的增量构建也要一分多钟。我后来把命令固定在单独的终端窗口里配合flutter ohos run --hot热重载使用。不过热重载只对 Dart 层生效改动原生桥接代码仍然需要全量构建。DevEco Studio 的日志面板支持过滤关键字调试 Flutter 和 OHOS 通信时我习惯同时开两个终端一个跑flutter ohos run另一个用hdc抓系统日志分工协作效率更高。单独说一下hdc工具它是 OpenHarmony 的命令行设备调试工具位置在 OpenHarmony SDK 的 toolchains 目录里功能对应 Android 的 adb。连接状态不佳时先hdc list targets看设备是否在线再做其他排查。6.2 结合现有项目落地的一个小建议如果你的目标不是新项目而是像我一样想把手头 Flutter 应用移植到 OHOS有个值得提前做的事清点一下现有依赖里有没有不兼容的插件然后将这些插件用抽象接口隔离。我在动手前先建了一个PlatformChannelAdapter的抽象层所以具体替换插件实现时只动了 adapter 的代码业务层一点没沾。另一个是资源问题Flutter 侧的图片和字体走的是 Flutter 自己的 asset 体系与 OHOS 原生资源不冲突这个不需要特殊处理。但如果用到了系统级能力比如推送、蓝牙、定位就必须通过 MethodChannel 桥接到 OHOS 侧的对应接口这部分工作量不可小觑。以我个人经验来看环境搭建虽然磨人但只要版本锁定、按顺序执行成功率很高。真正拉开差距的是后续对平台差异的掌控力。Flutter OHOS 的组合还在高速演进期早点把环境跑通拿到第一手适配经验就是最大的技术红利。希望这篇记录能帮你避掉大部分坑顺利把第一个 Flutter OHOS 应用点亮屏幕。
返回列表