flutter|跨平台开发方案调研 ui|android

1 uni-app介绍 uni-app 是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app，腾讯课堂官方为uni-app录制培训课程，开发者可以放心选择。
uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

2 flutter介绍 Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。
2.1 主要特点

快速开发
Flutter的热重载可帮助您快速地进行测试、构建UI、添加功能并更快地修复错误。在iOS和Android模拟器或真机上可以在亚秒内重载，并且不会丢失状态。
富有表现力，漂亮的用户界面
使用Flutter内置美丽的Material Design和Cupertino（iOS风格）widget、丰富的motion API、平滑而自然的滑动效果和平台感知，为您的用户带来全新体验。
现代的，响应式框架
使用Flutter的现代、响应式框架，和一系列基础widget，轻松构建您的用户界面。使用功能强大且灵活的API（针对2D、动画、手势、效果等）解决艰难的UI挑战。

2.2 安装和配置
2.2.1 Windows （1）系统配置要求

操作系统：Windows10或更高版本（基于x86-64的64位操作系统）。
系统设置：启用开发者模式。
依赖工具：
- Windows Power Shell 5.0或更高版本。
- Git for Windows 2.x（并勾选从Windows命令提示符中使用Git选项）。

（2）获取Flutter SDK

下载flutter_windows_3.0.5-stable.zip。
解压后将flutter目录拷贝到D盘即可（注意，路径不要有特殊字符）。

（3）更新path环境变量

控制面板->系统和安全->系统->高级系统设置->环境变量->用户变量。
找到path条目（没有则新建path条目），加入flutter/bin的完整路径。

【flutter|跨平台开发方案调研】（4）运行flutter doctor检查（根据检查结果，完成依赖配置）。
2.2.2 Linux （1）系统配置要求

操作系统：Linux64位。
命令工具：bash、curl、file、git 2.x、mkdir、rm、unzip、which、xz-utils、zip。
公用库：libGLU.so.1。

（2）获取Flutter SDK

# 更新软件源 sudo apt-get update # 安装snap工具 sudo apt-get install snap # 安装flutter sudo snap install flutter --classic

（3）运行flutter doctor检查（根据检查结果，完成依赖配置）。
2.3 运行与发布
flutter常用命令：

# 查看帮助 flutter -h # 创建项目 flutter create Project_Name # 运行项目 flutter run --v# 查看日志输出 --release# 发布模式 --debug# 调试模式 --hot# 热重载启动 # 查看设备列表 # 设备名称 · 设备ID · 系统架构 · 系统版本(API版本) flutter devices # 切换设备 flutter run -d 设备名称/设备ID # 安装程序 flutter install # 查看配置情况加-v可查看详细情况 flutter doctor # 升级flutter flutter upgrade # 打包apk flutter build apk # 添加平台支持 flutter create --platforms=windosw,macos,linux .

2.3.1 运行到Windows平台

# 1.为已有的 Flutter 项目添加桌面支持 flutter create --platforms=windows . # 2.确保开启开发者模式 start ms-settings:developers # 3.基于Android Studio IDE开发的移动应用运行到Windows flutter run -d windows

文章图片

2.3.2 发布到Windows平台

# 构建发布版本 flutter build windows --release # 生成的发布版路径为 /build/windows/runner/release # release目录结构如下 . ├── amc1600e.exe// 可执行程序 ├── data// 包含应用资源文件，如字体和图片 └── flutter_windows.dll // 必需的动态库文件

2.3.3 运行到Linux平台

# 1.为已有的 Flutter 项目添加桌面支持 flutter create --platforms=linux . # 2.基于Android Studio IDE开发的移动应用运行到Ubuntu flutter run -d linux

文章图片

2.3.4 发布到Linux平台

# 构建发布版本 flutter build linux --release # 生成的发布版路径为 /build/linux/x64/release/bundle # bundle目录结构如下 . ├── amc1600e // 可执行程序 ├── data// 包含应用资源文件，如字体和图片 └── lib// 包含必需的动态库文件

2.3.5 运行到Android平台在项目路径下，按住Shift，单击右键，选择在此处打开Powershell窗口：

输入flutter devices查看设备列表。
输入flutter run -d emulator-5554。

文章图片

2.3.6 发布到Android平台（1）检查APP Manifest
（2）查看构建配置
（3）添加启动图标
（4）APP签名
（5）开启混淆压缩
（6）构建发布版apk

# 构建apk flutter build apk # 安装apk flutter install

3 对比分析

跨平台方案	优点	缺点
uni-app	1. 内部兼容了vue的写法，用于跨平台。 2. 同时支持发布到iOS、Android、Web、多家主流小程序、快应用等多个平台。	1. 很多web库以及第三方web库都不支持。 2.如果想个性化定制功能或UI界面比较难，基本上只能按照uni-app的要求去做。 3. 对移动设备的调试和兼容不太友好。
flutter	1. 快速开发，支持毫秒级热重载。 2. 提供丰富的组件支持，富有表现力和灵活的UI。 3. 自带渲染引擎，不依赖于任何平台，可达到原生应用一样的性能。 4. 开源免费，提供社区支持。 5. 一套代码即可编译成多个平台的应用程序（移动、Web、桌面、嵌入式）。	1. 需要了解dart语言。 2. 需要了解原生开发。