鸿蒙-flutter-环境搭建和第一个HelloWorld

前言

正在慢慢的补齐鸿蒙版本应用的功能,之前 Android 和 iOS 上有一部分功能是 flutter 实现的,现在需要把相关代码移植到鸿蒙应用中。慢慢来,不着急。 由于目前只有64位引擎,暂不支持模拟器,需要使用真机调试。

环境

现存的flutter 相关代码使用的是 flutter3.0.2 版本,正好趁这个机会升级一下版本。 由于鸿蒙版的flutter 3.22.0 已经 release,直接升级到这个版本。 这里插播一条消息

所有鸿蒙相关开源仓后续均迁移至GitCode平台,SIG、TPC组织已完成迁移,OpenHarmony主组织仓也即将完成迁移 SDK: gitcode分支(官方分支,持续更新): gitcode.com/openharmony... 原始仓库 gitee.com/harmonycomm... Engine: gitcode分支(官方分支,持续更新): gitcode.com/openharmony... 原始仓库 gitee.com/harmonycomm...

鸿蒙环境

鸿蒙的环境很简单,下载最新的 DevEco 安装好就行了。这样就包含了开发鸿蒙所需要的所有工具。 但使用 flutter 混编时还需要将几个工具路径添加的环境变量里面。 当然了,不下载 DevEco,下载对应的Command Line Tools for HarmonyOS 也可以。但是免不了会编写一些 ArkTS 相关的鸿蒙代码,比如录音、相机的调用等,目前来看还没有其他的IDE 支持 ArkTS 的语法,所以,还是建议安装 DevEco。 需要添加到环境变量的工具。 mac上需要配置这些

shell 复制代码
 export TOOL_HOME=/Applications/DevEco-Studio.app/Contents # mac环境
 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 上有些修改, 需要配置一个变量名为HOS_SDK_HOME,值为sdk路径的变量,比如我是安装的DevEco,sdk路径就是D:\DevEco\DevEco Studio\sdk

然后我们再将D:\DevEco\DevEco Studio\tools\hvigor\binD:\DevEco\DevEco Studio\tools\nodeD:\DevEco\DevEco Studio\tools\ohpm\bin添加到环境变量。

注意注意注意 如用下载的是flutter分支是3.22.0-ohos,则环境变量名字为DEVECO_SDK_HOME

flutter 环境

克隆(flutter_flutter)[gitcode.com/openharmony...3.22.0-ohos分支就可以。

shell 复制代码
git clone -b 3.22.1-ohos-1.0.1 https://gitcode.com/openharmony-sig/flutter_flutter.git

下载完成后,将flutter添加到环境变量

mac环境

shell 复制代码
 export PATH=<flutter_flutter path>/bin:$PATH
 export PUB_HOSTED_URL=https://pub.flutter-io.cn  #国内的镜像,也可以使用其他镜像,比如清华镜像源
 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn #国内的镜像,也可以使用其他镜像,比如清华镜像源

windows环境变量,也是将<flutter_flutter path>\bin添加到环境变量。然后再分别新建PUB_HOSTED_URLFLUTTER_STORAGE_BASE_URL添加到环境变量。

检查

命令行执行一下flutter doctor -v,如果能找到能执行成功,并且Futter与OpenHarmony应都为ok标识,若两处提示缺少环境,按提示补上相应环境即可。

第一个 HelloWorld

创建项目的命令和官方的 flutter 是一样的,只不过是多了一个鸿蒙平台的支持。 我们创建一个支持 Android、iOS 和鸿蒙的 flutter 项目。

shell 复制代码
flutter create  --platforms android,ios,ohos  -i objc -a java ohflutter_3221

可以指定 iOS 平台使用 oc,Android平台使用 Java 语言,鸿蒙平台不需要指定,只有一个 ArkTS 可用 执行的结果也没什么两样,只不过在对应的项目文件夹下多了一个ohos文件夹,和 androidios文件夹一样,用来存放原生相关的代码 然后我们连接好设备,在工程文件夹下执行flutter run,会提示我们需要配置调试签名。

这里我们需要注册一个华为开发者账号,然后按照提示进行签名。 配置完签名之后,我们再次执行flutter run

看下效果

FlutterPage

我们可以使用DevEcoStudio打开项目下的ohos文件夹中的项目看一下,其中的EntryAbility继承了FlutterAbility,在FlutterAbility中,我们可以看到FlutterManagerFlutterView,以及在onWindowStageCreate方法中默认加载的pages/Index。 因此我们如果想要向现有鸿蒙工程中添加flutter模块时,借鉴一下这里面的写法。

相关推荐
行者9631 分钟前
OpenHarmony平台Flutter手风琴菜单组件的跨平台适配实践
flutter·harmonyos·鸿蒙
Van_Moonlight1 小时前
RN for OpenHarmony 实战 TodoList 项目:已完成未完成数量显示
javascript·开源·harmonyos
陈_杨1 小时前
前端成功转鸿蒙开发者真实案例,教大家如何开发鸿蒙APP--ArkTS 卡片开发完全指南
前端·harmonyos
陈_杨2 小时前
前端成功转鸿蒙开发者真实案例,教大家如何开发鸿蒙APP--ArkTS 卡片刷新机制
前端·harmonyos
哈__2 小时前
从入门小白到精通,玩转 React Native 鸿蒙跨平台开发:TouchableOpacity 触摸反馈组件
react native·react.js·harmonyos
小雨下雨的雨2 小时前
Flutter 框架跨平台鸿蒙开发 —— Flex 控件之响应式弹性布局
flutter·ui·华为·harmonyos·鸿蒙系统
cn_mengbei2 小时前
Flutter for OpenHarmony 实战:CheckboxListTile 复选框列表项详解
flutter
哈__2 小时前
入门小白到精通,玩转 React Native 鸿蒙跨平台开发:Button 按钮组件与点击事件
react native·react.js·harmonyos
cn_mengbei2 小时前
Flutter for OpenHarmony 实战:Switch 开关按钮详解
flutter
奋斗的小青年!!2 小时前
OpenHarmony Flutter实战:打造高性能订单确认流程步骤条
flutter·harmonyos·鸿蒙