diff --git a/ohos/docs/03_environment/README.md b/ohos/docs/03_environment/README.md index dd186c2abf44cd553dc487c6a88d0c305d77999c..263087745165f4119009bef8b7bedf4750234991 100644 --- a/ohos/docs/03_environment/README.md +++ b/ohos/docs/03_environment/README.md @@ -1,3 +1,4 @@ # 环境搭建 - \ No newline at end of file +## 鸿蒙版Flutter集成与编译教程 +1. [鸿蒙版Flutter环境搭建指导](./鸿蒙版Flutter环境搭建指导.md) \ No newline at end of file diff --git "a/ohos/docs/03_environment/\351\270\277\350\222\231\347\211\210Flutter\347\216\257\345\242\203\346\220\255\345\273\272\346\214\207\345\257\274.md" "b/ohos/docs/03_environment/\351\270\277\350\222\231\347\211\210Flutter\347\216\257\345\242\203\346\220\255\345\273\272\346\214\207\345\257\274.md" new file mode 100644 index 0000000000000000000000000000000000000000..1f1b73d57dd77816091ba357ad5ce100010ab43f --- /dev/null +++ "b/ohos/docs/03_environment/\351\270\277\350\222\231\347\211\210Flutter\347\216\257\345\242\203\346\220\255\345\273\272\346\214\207\345\257\274.md" @@ -0,0 +1,209 @@ +# 鸿蒙版Flutter环境搭建指导 + +## 一、环境准备 + +### 1.下载并安装鸿蒙最新开发套件 + +#### 1.1 官方下载地址 +鸿蒙开发套件官方下载地址:https://developer.harmonyos.com/deveco-developer-suite/enabling/kit + ``` + 注意事项: +(1)目前支持操作系统Linux、Mac、Windows环境下使用 +(2)mac系统在终端输入"uname -m"判断系统架构选择对应的开发组件套 + 如果输出结果是 x86_64,则表示你的系统是x86-64架构 + 如果输出结果是 arm64,则表示你的系统是arm64架构 +(3)访问鸿蒙开发套件官方下载地址需要进行企业认证,并且通过华为审批,签署隐私条款后才可以看到 + 个人开发者只能看到api9的套件,企业级签约开发者可以看到api 10、11、12的套件 + 最新套件更加稳定,性能更佳,且鸿蒙Flutter需要依赖最新套件编译 + ``` + +#### 1.2 下载清单 + +##### (1)根据自身所用电脑系统下载对应套件,需下载最新DevEcoStudio版本4.1.3.700(SP2) + +![](../media/03_1/img_17.png) + + +##### (2)若无鸿蒙真机,需要下载模拟器 + +![](../media/03_1/img_18.png) + +##### (3)下载鸿蒙版flutter + 项目地址:https://gitee.com/openharmony-sig/flutter_flutter + + 通过代码工具下载仓库代码并指定dev或master分支,dev不断在更新相比master拥有更多功能 + ``` + 1 git clone https://gitee.com/openharmony-sig/flutter_flutter.git + 2 git checkout dev + ``` +##### (4)下载FlutterEngine构建产物 + + Flutter工程构建依赖ohos_debug_unopt_arm64与 ohos_release_arm64,请在FlutterTools指令运行参数中添加:--local-engine=src/out/ + https://docs.qq.com/sheet/DUnljRVBYUWZKZEtF?tab=BB08J2 下载编译产物,engine路径指向需带上src/out目录。 解压后,存放到一个目录(engine本地路径必须需带上src/out目录): + 如:/Users/lihui/Documents/flutter_engine/src/out + +![](../media/03_1/img_4.png) + + +### 2.安装说明 + +#### 2.1 解压组件套压缩包后请先阅读《开发前请阅.txt》,按照DevEco Studio环境配置指导.docx完成环境搭建。 + +![](../media/03_1/img_01.png) + +#### 2.2 解压模拟器压缩包后请按照《模拟器使用指南.pdf》安装模拟器。 + +![](../media/03_1/img_02.png) + +#### 2.3 环境变量配置 + +``` +vim .bash_profile + +# 打开bash_profile处理环境变量 + +export HOS_SDK_HOME=/Users/lihui/flutter/software/devecostudio-mac-arm-4.1.3.700/sdk/M1SDK +export HDC_HOME=/Users/lihui/flutter/software/devecostudio-mac-arm-4.1.3.700/sdk/M1SDK/HarmonyOS-NEXT-DP2/base/toolchains + +export PATH=$PATH:$HDC_HOME +export PATH=$PATH:/Users/lihui/flutter/software/devecostudio-mac-arm-4.1.3.700/commandline/command-line-tools/bin + +# flutter_flutter +export PATH=/Users/lihui/flutter/flutter_flutter/bin:$PATH + +# Flutter pub国内镜像 +export PUB_HOSTED_URL=https://pub.flutter-io.cn +export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn + +export NODE_HOME=/Users/lihui/node/node-18.14.1 +export PATH=$PATH:$NODE_HOME/bin + +配置生效: +source ~/.bash_profile +``` + +#### 2.4 DevEcoStudio与模拟器安装完后的目录 +``` +/Users/lihui/flutter/software/devecostudio-mac-arm-4.1.3.700 + +开发前请阅.txt +-arkui-x-sdk/ +-commandline/ +-coverage/ +-dependencies/ +DevEco Studio环境配置指导.docx +deveco-studio-4.1.3.700-aarch64 +-ohpm-repo/ +-sdk/ + -M1SDK/ + -emulator/ + -HarmonyOS-NEXT-DP0/ + -HarmonyOS-NEXT-DP2/ + -licenses/ + -system-image/ + -HarmonyOS-NEXT-DP2/ + -phone_arm/ +``` + +#### 2.5 运行模拟器 + +![](../media/03_1/m1.png) + +创建模拟器 + +![](../media/03_1/img.png) + +准备启动模拟器 + +![](../media/03_1/m2.png) + +模拟器运行效果 + +![](../media/03_1/m3.png) + + +## 二、集成与调试鸿蒙版Flutter + +### 1.检查环境 +运行 flutter doctor -v 检查环境变量配置是否正确,Futter与OpenHarmony应都为ok标识,若两处提示缺少环境,按提示补上相应环境即可。 + +![](../media/03_1/doctor1.png) + +### 2.创建Flutter工程 +创建工程与编译命令,编译产物在${projectName}/ohos/entry/build/default/outputs/default/entry-default-signed.hap下 + +``` +# 创建工程 方式一 该方式只创建了ohos平台 +flutter create --platforms ohos + +# 创建工程 方式二 该方式创建了android,ios,ohos三个平台 +flutter create + +# 进入工程根目录编译hap包 +flutter build hap --local-engine=/Users/lihui/Documents/flutter_engine/src/out/ohos_debug_unopt_arm64 --debug +``` + +### 3.鸿蒙真机运行Flutter项目 + 通过flutter devices指令发现真机设备之后,获取device-id + + 方式一:进入项目目录指定构建方式编译hap包并安装到鸿蒙手机中 +``` + flutter run --debug --local-engine=/Users/lihui/Documents/flutter_engine/src/out/ohos_debug_unopt_arm64 -d +``` + + 方式二:进入工程根目录编译hap包,然后安装到鸿蒙手机中 + ``` + flutter build hap --local-engine=/Users/lihui/Documents/flutter_engine/src/out/ohos_debug_unopt_arm64 --debug + + hdc -t install +``` + +方式三:使用DevEcoStudio 选择设备为真机,点击启动 + +![](../media/03_1/img12.png) + +### 4.模拟器运行Flutter项目 + +#### 4.1 使用DevEcoStudio打开项目的ohos模块 + +![](../media/03_1/open_ohos.png) + +#### 4.2 DevEcoStudio启动鸿蒙模拟器 + +![](../media/03_1/m1.png) + +![](../media/03_1/m2.png) + +![](../media/03_1/m3.png) + +切换设备为鸿蒙模拟器 + +![](../media/03_1/img00.png) + +#### 4.3 点击编译运行 + +![](../media/03_1/img9.png) + +![](../media/03_1/img10.png) + +### 5.模拟器运行常见问题 + +#### 5.1 无法创建模拟器 + 情况1:使用实名制认证的账号进行签名 + + 情况2:请确认模拟器中Emulator与phone压缩包解压的位置。确保解压在sdk根目录下且文件结构如下: + +``` +#sdk/M1SDK为根目录 + +-sdk/ + -M1SDK/ + -emulator/ + -system-image/ + -HarmonyOS-NEXT-DP2/ + -phone_arm/ + -HarmonyOS-NEXT-DP0/ + -HarmonyOS-NEXT-DP2/ + -licenses/ + +``` diff --git a/ohos/docs/media/03_1/doctor1.png b/ohos/docs/media/03_1/doctor1.png new file mode 100644 index 0000000000000000000000000000000000000000..15d18be4564a1e3475f57b14e661bfa7eb8db40e Binary files /dev/null and b/ohos/docs/media/03_1/doctor1.png differ diff --git a/ohos/docs/media/03_1/img.png b/ohos/docs/media/03_1/img.png new file mode 100644 index 0000000000000000000000000000000000000000..b13e4f8c593578b21d02e3e290979520d9e52177 Binary files /dev/null and b/ohos/docs/media/03_1/img.png differ diff --git a/ohos/docs/media/03_1/img00.png b/ohos/docs/media/03_1/img00.png new file mode 100644 index 0000000000000000000000000000000000000000..73a5e0678ce111bccc081546382c1e3cf596ea03 Binary files /dev/null and b/ohos/docs/media/03_1/img00.png differ diff --git a/ohos/docs/media/03_1/img10.png b/ohos/docs/media/03_1/img10.png new file mode 100644 index 0000000000000000000000000000000000000000..155a174990cc5fd962519da61806601e5a748332 Binary files /dev/null and b/ohos/docs/media/03_1/img10.png differ diff --git a/ohos/docs/media/03_1/img12.png b/ohos/docs/media/03_1/img12.png new file mode 100644 index 0000000000000000000000000000000000000000..8e018790bcb47913d46a5dfdb217b10ad629c8d3 Binary files /dev/null and b/ohos/docs/media/03_1/img12.png differ diff --git a/ohos/docs/media/03_1/img9.png b/ohos/docs/media/03_1/img9.png new file mode 100644 index 0000000000000000000000000000000000000000..95da7980bd4dda6a8992a43431dd926eaf68193d Binary files /dev/null and b/ohos/docs/media/03_1/img9.png differ diff --git a/ohos/docs/media/03_1/img_01.png b/ohos/docs/media/03_1/img_01.png new file mode 100644 index 0000000000000000000000000000000000000000..09df55e36f723988489e99a1650f481778b397cd Binary files /dev/null and b/ohos/docs/media/03_1/img_01.png differ diff --git a/ohos/docs/media/03_1/img_02.png b/ohos/docs/media/03_1/img_02.png new file mode 100644 index 0000000000000000000000000000000000000000..8b8f191fc07ab1bd95ef0562b06ab8d99a84ef31 Binary files /dev/null and b/ohos/docs/media/03_1/img_02.png differ diff --git a/ohos/docs/media/03_1/img_10.png b/ohos/docs/media/03_1/img_10.png new file mode 100644 index 0000000000000000000000000000000000000000..6c5c9cd77002ce3e8add76a9c2bc10761f159314 Binary files /dev/null and b/ohos/docs/media/03_1/img_10.png differ diff --git a/ohos/docs/media/03_1/img_11.png b/ohos/docs/media/03_1/img_11.png new file mode 100644 index 0000000000000000000000000000000000000000..211afe2c7829dda10b3cde5756029064d11ce412 Binary files /dev/null and b/ohos/docs/media/03_1/img_11.png differ diff --git a/ohos/docs/media/03_1/img_15.png b/ohos/docs/media/03_1/img_15.png new file mode 100644 index 0000000000000000000000000000000000000000..df41ae441d25aeadfd0eb97d0c64003bf396d8f5 Binary files /dev/null and b/ohos/docs/media/03_1/img_15.png differ diff --git a/ohos/docs/media/03_1/img_16.png b/ohos/docs/media/03_1/img_16.png new file mode 100644 index 0000000000000000000000000000000000000000..dbcb48cc7cc92f81b3cb2a3afeb9b387fef0b367 Binary files /dev/null and b/ohos/docs/media/03_1/img_16.png differ diff --git a/ohos/docs/media/03_1/img_17.png b/ohos/docs/media/03_1/img_17.png new file mode 100644 index 0000000000000000000000000000000000000000..e4d081f44fd8f5b4ced6b9e970b6710ad181052c Binary files /dev/null and b/ohos/docs/media/03_1/img_17.png differ diff --git a/ohos/docs/media/03_1/img_18.png b/ohos/docs/media/03_1/img_18.png new file mode 100644 index 0000000000000000000000000000000000000000..78114101cce063ae8fddf8d7073385b19926bfe9 Binary files /dev/null and b/ohos/docs/media/03_1/img_18.png differ diff --git a/ohos/docs/media/03_1/img_4.png b/ohos/docs/media/03_1/img_4.png new file mode 100644 index 0000000000000000000000000000000000000000..8ce33009b8ad260b12840302772447e1bd5e12a1 Binary files /dev/null and b/ohos/docs/media/03_1/img_4.png differ diff --git a/ohos/docs/media/03_1/m1.png b/ohos/docs/media/03_1/m1.png new file mode 100644 index 0000000000000000000000000000000000000000..3c10494909708b30151698be9ef8ea5a178cfee4 Binary files /dev/null and b/ohos/docs/media/03_1/m1.png differ diff --git a/ohos/docs/media/03_1/m2.png b/ohos/docs/media/03_1/m2.png new file mode 100644 index 0000000000000000000000000000000000000000..789dca5278a5100412fa5405860f621c607985d2 Binary files /dev/null and b/ohos/docs/media/03_1/m2.png differ diff --git a/ohos/docs/media/03_1/m3.png b/ohos/docs/media/03_1/m3.png new file mode 100644 index 0000000000000000000000000000000000000000..decc62e7be6c8b074f3eaa910d7fe177bc1e252f Binary files /dev/null and b/ohos/docs/media/03_1/m3.png differ diff --git a/ohos/docs/media/03_1/open_ohos.png b/ohos/docs/media/03_1/open_ohos.png new file mode 100644 index 0000000000000000000000000000000000000000..de190887453919c6ab98dc1089955515f78bffac Binary files /dev/null and b/ohos/docs/media/03_1/open_ohos.png differ