新手Flutter鸿蒙化如何从0到1搭建指南Windows家庭版-优快云博客

新手Flutter鸿蒙化如何从0到1搭建指南论运行"HELLO WORD"有多难–WINDOWS家庭版

电脑比较老,由于之前做JAVA开发,配置环境错综复杂,所以出现了很多莫名其妙的问题,每一步都有坑,多亏前辈们的鼎力相助和经验传授,让我知道遇到问题不可怕,一切都有解决方案

一、安装DevEco Studio

1.1 根据自己电脑系统选择合适版本下载，注意用Release正式版

在这里插入图片描述

1.2 这一步将三个复选框都勾上安装参考官方文档

在这里插入图片描述

1.3 创建项目试试开发工具有没有配置好

在这里插入图片描述

1.4 配置下载 OpenHarmony SDK和ArkUI-X SDK

在这里插入图片描述

1.5 配置模拟器

在这里插入图片描述

1.6 项目运行成功

在这里插入图片描述

二、 Flutter鸿蒙化环境配置

2.1 首先进行配置flutter鸿蒙化环境现在使用的是3.32.4-dev版本,使用git从gitcode仓库克隆下来,GIT工具安装教程

克隆指令：git clone -b oh-3.32.4-dev https://gitcode.com/openharmony-tpc/flutter_flutter.git

在这里插入图片描述

2.2 配置flutter环境变量,复制bin路径粘贴进来即可

在这里插入图片描述

此刻还需新建三个系统变量，Flutter需要用到
变量名：DEVECO_SDK_HOME 变量值：复制DevEco Studio的sdk目录
变量名：PUB_HOSTED_URL 变量值：https://pub.flutter-io.cn
变量名：FLUTTER_STORAGE_BASE_URL 变量值：https://storage.flutter-io.cn
后两条指令是用来配置国内的站点，因为默认会从谷歌上下载一些包，如果没有翻墙的话会卡住

在这里插入图片描述

2.3 输入命令查看Flutter是否安装成功,并查看版本号

flutter --version

在这里插入图片描述

2.4 进一步进行检查flutter版本状态

flutter doctor -v

在这里插入图片描述

三、创建Flutter鸿蒙项目

3.1 创建一个文件夹专门用来放项目，在此目录下，长按shift键右击鼠标选择打开PowerShell，执行以下命令,其中projectname为项目名称，必须全部为小写字母

flutter create --platforms ohos projectname

在这里插入图片描述

3.2 进入创建的文件夹，在flutter项目的目录结构下有一个ohos文件夹，文件夹里面存放的就是鸿蒙开发的目录，用powershell执行以下命令构建

flutter build app --release

在这里插入图片描述

3.3 构建成功会生成一个build文件夹，直到找到一个以app为结尾的文件

在这里插入图片描述

四、打开并运行Flutter鸿蒙项目

4.1 使用DevEco Studio运行模拟器，并打开ohos包，必须在模拟器开启运行状态下进行签名认证 File->Project Structure->Signing Configs,签名会自动填充，点击OK即可，此时项目会报错，build-profile.json5文件夹下，找到"targetSdkVersion"，填写SDK版本，模拟器什么版本就填什么

“targetSdkVersion”: “6.0.0(20)”

在这里插入图片描述

4.2 运行

在这里插入图片描述

*此时心里已经万分激动了，不容易啊

五、总结开发过程中问题

5.1 之前做JAVA开发的一定要注意将JAVA JDK版本换为17,参考文档

在这里插入图片描述

5.2 关于Ohpm一直找不到原因,这个问题困绕了2天,幸好在大神帮助下解决了,之前开发用过node,版本太低,需要18版本以上参考官方文档

在这里插入图片描述

5.3 家庭版Win10系统运行不了模拟器,不能开启虚拟化问题

在这里插入图片描述

5.3.1 复制以下代码,保存为以cmd后缀文件并执行安装Hyper-V Installer

pushd "%~dp0"
dir /b %SystemRoot%\servicing\Packages\*Hyper-V*.mum >hyper-v.txt
for /f %%i in ('findstr /i . hyper-v.txt 2^>nul') do dism /online /norestart /add-package:"%SystemRoot%\servicing\Packages\%%i"
del hyper-v.txt
Dism /online /enable-feature /featurename:Microsoft-Hyper-V-All /LimitAccess /ALL