概要

需求场景：当前APP已有三端需要开发维护：鸿蒙、安卓、苹果，每次新增功能都需要三端同步开发，成本太高。
解决方案：新增功能使用Flutter开发，然后作为子模块被依赖到原来的工程中，实现三端复用。

一. 开发工具与SDK下载安装

1. 工具安装

上面三个直接下载安装即可，记住 DevEco Studio 和 JDK 的安装位置，后面配置环境变量时要用到，我的安装位置：
D:\Program Files\Huawei\DevEco Studio
D:\Program Files\Java

2. Flutter仓库代码下载

使用GIT命令克隆 oh-3.27.4-dev 的分支到本地，该路径也是配置环境变量要用的，我的本地路径是：
D:\flutter_flutter

git clone -b oh-3.27.4-dev https://gitcode.com/openharmony-tpc/flutter_flutter.git

二. 配置环境变量

1. Path变量配置

总共新增了5项，根据自己的路径进行配置：
D:\flutter_flutter\bin
D:\Program Files\Java\jdk-17\bin
D:\Program Files\Huawei\DevEco Studio\tools\ohpm\bin
D:\Program Files\Huawei\DevEco Studio\tools\hvigor\bin
D:\Program Files\Huawei\DevEco Studio\tools\node

2. 新建变量

总共新建了4个变量，根据自己的路径进行配置：

3. 检查Flutter环境

运行命令：flutter doctor -v
在结果中看到 Flutter 和 HarmonyOS 部分没有出现 ❌ 即表示环境配置成功，如果出现 ❌ ，查看对应的环境变量是否有正确配置。
需要注意的是：环境变量修改前，若已打开cmd，那么在修改后，必须重开cmd，否则获取不到修改后的环境，进而导致命令执行出错。

三. 创建并运行Flutter项目

1. 创建项目

这里创建的Flutter项目，主要是为了进一步验证开发环境是否配置成功。
运行命令创建项目：flutter create --platforms ohos flutter_demo

2. VS Code 插件安装

VS Code 需要安装插件：Flutter，安装时会自动安装另一个插件：Dart，因为Flutter插件依赖于Dart插件。
另外，推荐安装插件：Awesome Flutter Snippets，可以生成widget代码。

3. VS Code 启动项目

用 VS Code 打开项目后，右下角会显示当前连接的设备，点击后可以选择其他设备，我这里连接的是真机，如果启动了鸿蒙的模拟器，这里也会显示出来。

连接设备后，打开项目中的main.dart，点击 Run 运行。
第一次会下载很多工具包，接着底下会报错：

根据错误提示信息，用 DevEco Studio 打开 flutter_demo 项目下的 ohos 工程，配置好调试签名后，回到 VS Code，再次点击main.dart中的 Run 运行项目，能够成功运行。

并且手机上也打开了这个页面，即表示当前开发环境配置成功。