flutter openharmony项目新手从0到1的保姆级教程

flutter oh项目新手从0到1的保姆级教程

前言

很多的坑踩过才知道，保姆级教程就是无脑跟随作者的教程走，不要有自己的想法。请注意，如果你读到这个文章，请必须严格按照文档顺序操作，保证一把过，如果有个人思想跳过部分章节，请自己排坑。

请准备好鸿蒙5的设备，必须要鸿蒙5及以上系统，其低于这个版本的系统就别看本文章了

一、配置开发环境

1、下载DevEco Studio编辑器

默认安装，不要有自己的想法，默认就行

2、配置ohpm 和 hvigorw 环境变量

将ohpm、hvigorw添加到系统 PATH

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

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

测试命令：

全局cmd操作：ohpm -v

项目里面操作：hvigorw -v

3、配置HOS_SDK_HOME环境变量

在用户、系统环境变量里面，新增一个HOS_SDK_HOME变量，地址为你编辑器里面的地址，并且创建2个文件夹，分别为：openharmony、hmscore

4、配置DEVECO_SDK_HOME环境变量

在“系统变量”中点击“新建”，添加以下内容：

变量名：DEVECO_SDK_HOME

变量值：DevEco SDK的安装路径（例如：C:\Huawei\DevEcoStudio\SDK）

5、配置HDC环境变量

安装好DevEco Studio之后，能在setting中看到下载的路径，可能会自动配置hdc变量，配置你下载的api的地址，但是可以自己配置或检查，将hdc配置到系统path中，请到自己的目录中查看，我的路径为

C:\Users\yang\AppData\Local\OpenHarmony\Sdk\15\toolchains

6、配置node环境变量

用到了node，在DevEco中有提供安装，直接在系统变量的path中添加

C:\Program Files\Huawei\DevEco Studio\tools\node

7、下载oh的flutter

本次开发使用的3.27.4版本，用git clone下载，不要下载zip，不要有自己的想法，请遵循保姆级教程逻辑

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

8、下载android studio

官网下载，这一步是拿来写代码用的编辑器，如果不想使用可以用其他编辑器

9、配置flutter国内环境变量

添加Pub 镜像地址环境变量：PUB_HOSTED_URL

添加 Flutter SDK 镜像地址环境变量：FLUTTER_STORAGE_BASE_URL

$env:PUB_HOSTED_URL="https://pub.flutter-io.cn"
$env:FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"

二、初始化环境

1、初始化flutter

在下载好的oh flutter根路径中，打开命令行，运行命令

flutter doctor

这一步会自动下载初始化该版本的dart

2、检查项目环境

在你的项目中，打开命令行，运行命令

flutter doctor -v

如果提示你打x的根据提示安装需要的配置和环境

如果通过应该是显示如下

(base) D:\github\flutter_use git:[yhk_oh]
flutter doctor -v

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
  ║ statistics and basic crash reports. This data is used to help improve      ║
  ║ Flutter tools over time.                                                   ║
  ║                                                                            ║
  ║ Flutter tool analytics are not sent on the very first run. To disable      ║
  ║ reporting, type 'flutter config --no-analytics'. To display the current    ║
  ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
  ║ event will be sent, and then no further information will be sent by the    ║
  ║ Flutter tool.                                                              ║
  ║                                                                            ║
  ║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
  ║ The Google Privacy Policy describes how data is handled in this service.   ║
  ║                                                                            ║
  ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
  ║ crash reports to Google.                                                   ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://flutter.dev/to/crash-reporting                                     ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
    • Framework revision 4c5ae9f27d (6 weeks ago), 2025-10-11 11:28:53 +0800
    • Engine revision e672b006cb
    • Dart version 3.6.2
    • DevTools version 2.40.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and      
      upgrades.

[√] HarmonyOS toolchain - develop for HarmonyOS devices
    • OpenHarmony Sdk at C:\Users\yang\AppData\Local\OpenHarmony\Sdk, available api versions has [20:default, 18:18, 15:15]
    • Ohpm version 5.3.2
    • Node version v18.20.8
    • Hvigorw binary at C:\Program Files\Huawei\DevEco Studio\tools\hvigor\bin\hvigorw

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    • Android SDK at C:\Users\yang\AppData\Local\Android\sdk
    • Platform android-36, build-tools 35.0.0
    • Java binary at: C:\Users\yang\AppData\Local\Programs\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.11+0--11852314)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.14.20)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.14.36705.20
    • Windows 10 SDK version 10.0.26100.0

[√] Android Studio (version 2024.1)
    • Android Studio at C:\Users\yang\AppData\Local\Programs\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.11+0--11852314)

[√] IntelliJ IDEA Ultimate Edition (version 2025.2)
    • IntelliJ at C:\Users\yang\AppData\Local\Programs\IntelliJ IDEA Ultimate
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart

[√] VS Code (version 1.105.1)
    • VS Code at C:\Users\yang\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension can be installed from:
       https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [版本 10.0.26200.7171]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 142.0.7444.135
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 142.0.3595.94

[√] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

3、下载flutter插件

在Android studio中下载flutter插件，并将你下载好的flutter根路径配置进去

4、打开DevEco Studio

这一步可能会自动下载部分环境初始化

5、打开Android studio

这一步可能会自动下载部分环境初始化

三、设备连接

1、设备准备

请准备好鸿蒙5的设备，必须要鸿蒙5及以上系统，其低于这个版本的系统就别装了

2、启用开发者选项和 USB 调试

开发者选项开启请在关于本机中，软件版本连续点击5次开启

确保已开启：

设置 → 系统和更新 → 开发人员选项

开启 "USB调试"

开启 "仅充电模式下允许调试"（如果有）

3、设备连接

HDC（HarmonyOS Device Connector）是鸿蒙的设备连接工具，类似于 Android 的 ADB。命令行中输入hdc list targets 如果设备已连接，会显示设备的序列号。如果没有连接，则不会显示任何设备。

四、项目初始化

3、在Android studio中创建或打开flutter项目

创建好项目之后输入

flutter pub get

下载基础依赖

4、初始化oh环境

在项目的控制台中输入

flutter create --platforms=ohos .

为现有项目添加 HarmonyOS 平台

5、验证项目

控制台输入

flutter devices

查看项目支持的平台

6、引入依赖

特殊的oh包需要单独的引入，注意：如果包为全平台通用包，不需要单独引入包来源，即包中没有Android、iOS等平台文件夹，如果存在就要单独创建，开鸿这边给出的方式为

  flutter_zxing:
    git:
      url: "https://gitcode.com/openharmony-sig/fluttertpc_flutter_zxing.git"

  device_info_plus:       # 设备型号、系统版本
    git:
      url: "https://gitcode.com/openharmony-sig/flutter_plus_plugins.git"
      path: "packages/device_info_plus/device_info_plus"

7、启动项目

输入命令，这2个命令都会启动，第一个命令会自动寻找oh设备

flutter run

flutter run -d ohos

启动过程如果有多个设备会让选择使用哪个设备进行启动，或者Android studio直接点击运行，会自动识别并编译启动oh环境

四、底层开发

如果你的包没有支持oh，但是你又想使用支持

1、下载包

github中下载你的包，并且打开项目

2、创建oh平台

在项目中创建oh平台

3、 oh支持

在原有的逻辑中，编码oh平台逻辑

4、引入包

在项目初始化段落中，依赖引入章节方式引入

五、异常问题

1、提示路径映射问题

Make sure the srcPath in the hvigorconfig.ts file of the project is a relative path.

请查看这个issues:

https://gitcode.com/openharmony-tpc/flutter_packages/issues/621

posted @ 2025-10-17 09:41 盆鱼宴之武冈分宴阅读(211) 评论(0) 收藏举报

刷新页面返回顶部

盆鱼宴

你要行，其次别人认为你行

flutter openharmony项目新手从0到1的保姆级教程

flutter oh项目新手从0到1的保姆级教程

前言

一、配置开发环境

1、下载DevEco Studio编辑器

2、配置ohpm 和 hvigorw 环境变量

3、配置HOS_SDK_HOME环境变量

4、配置DEVECO_SDK_HOME环境变量

5、配置HDC环境变量

6、配置node环境变量

7、下载oh的flutter

8、下载android studio

9、配置flutter国内环境变量

二、初始化环境

1、初始化flutter

2、检查项目环境

3、下载flutter插件

4、打开DevEco Studio

5、打开Android studio

三、设备连接

1、设备准备

2、启用开发者选项和 USB 调试

3、设备连接

四、项目初始化

3、在Android studio中创建或打开flutter项目

4、初始化oh环境

5、验证项目

6、引入依赖

7、启动项目

四、底层开发

1、下载包

2、创建oh平台

3、 oh支持

4、引入包

五、异常问题

1、提示路径映射问题

公告

盆鱼宴

你要行，其次别人认为你行

flutter openharmony项目新手从0到1的保姆级教程

flutter oh项目新手从0到1的保姆级教程

前言

一、配置开发环境

1、下载DevEco Studio编辑器

2、配置ohpm 和 hvigorw 环境变量

3、配置HOS_SDK_HOME环境变量

4、配置DEVECO_SDK_HOME环境变量

5、配置HDC环境变量

6、配置node环境变量

7、下载oh的flutter

8、下载android studio

9、配置flutter国内环境变量

二、初始化环境

1、 初始化flutter

2、检查项目环境

3、下载flutter插件

4、 打开DevEco Studio

5、 打开Android studio

三、 设备连接

1、 设备准备

2、 启用开发者选项和 USB 调试

3、设备连接

四、项目初始化

3、 在Android studio中创建或打开flutter项目

4、 初始化oh环境

5、 验证项目

6、 引入依赖

7、 启动项目

四、 底层开发

1、 下载包

2、 创建oh平台

3、 oh支持

4、 引入包

五、异常问题

1、提示路径映射问题

公告

1、初始化flutter

4、打开DevEco Studio

5、打开Android studio

三、设备连接

1、设备准备

2、启用开发者选项和 USB 调试

3、在Android studio中创建或打开flutter项目

4、初始化oh环境

5、验证项目

6、引入依赖

7、启动项目

四、底层开发

1、下载包

2、创建oh平台

4、引入包