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

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

二、初始化环境

1、 初始化flutter

在下载好的oh flutter中,打开命令行,运行命令

复制代码
flutter doctor

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

2、 打开DevEco Studio

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

3、 打开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

相关推荐
fakerth14 小时前
【OpenHarmony】医疗传感器模块架构
架构·操作系统·openharmony
SoaringHeart17 小时前
Flutter封装:原生路由管理极简封装 AppNavigator
前端·flutter
疯笔码良1 天前
【Flutter】flutter安装并在Xcode上应用
flutter·macos·xcode
西西学代码1 天前
Flutter---两种带输入框的对话框
flutter
西西学代码1 天前
Flutter---Button
flutter
Miketutu1 天前
Flutter布局 --- Container
flutter
fakerth1 天前
【OpenHarmony】AI引擎模块架构
人工智能·架构·openharmony
QuantumLeap丶1 天前
《Flutter全栈开发实战指南:从零到高级》- 01 - 从零开始搭建你的第一个Flutter应用
flutter
fakerth1 天前
【OpenHarmony】文件访问接口模块架构
架构·操作系统·openharmony
西西学代码2 天前
Flutter---ListView
flutter