1 Introduction to uni-app
uni-appIt is a framework for developing all front-end applications using Vue.js. Developers write a set of codes that can be published to iOS, Android, Web (responsive), and various small programs (WeChat/Alipay/Baidu/Toutiao/Feishu/ QQ/KuiShou/DingTalk/Taobao), Quick Apps and other platforms.
DCloudThe company has 9 million developers, millions of applications, 1.2 billion mobile monthly active users, thousands of uni-app plug-ins, and 70+ WeChat/QQ groups. The Ali applet tool has an official built-in uni-app , and Tencent Classroom officially records training courses for the uni-app , so developers can choose with confidence.uni-appIn hand, do not worry about anything. Even if it is not cross-end, ituni-appis a better applet development framework , a better app cross-platform framework, and a more convenient H5 development framework. No matter what kind of project the leader arranges, you can deliver it quickly, without changing the development thinking or changing the development habits.
2 Introduction to flutter
Flutter is Google's mobile UI framework for quickly building high-quality native user interfaces on iOS and Android. Flutter works with existing code. All over the world, Flutter is being used by more and more developers and organizations, and Flutter is completely free and open source.
2.1 Main Features
-
rapid development
Flutter's hot reload helps you quickly test, build UI, add features, and fix bugs faster. Sub-second reloads are possible on iOS and Android emulators or real devices without losing state.
-
Expressive, beautiful user interface
Bring your users a whole new experience with Flutter's built-in beautiful Material Design and Cupertino (iOS-style) widgets, rich motion API, smooth and natural sliding effects, and platform awareness.
-
modern, responsive framework
Easily build your user interface using Flutter's modern, responsive framework, and a range of basic widgets. Solve tough UI challenges with powerful and flexible APIs for 2D, animations, gestures, effects, and more.
2.2 Installation and Configuration
2.2.1 Windows
(1) System configuration requirements
- OS: Windows 10 or later (x86-64 based 64-bit OS).
- System Settings: Enable developer mode.
- Dependency tools:
- Windows Power Shell 5.0 or later.
- Git for Windows 2.x (and tick the Use Git from Windows Command Prompt option).
(2) Get the Flutter SDK
- Download flutter_windows_3.0.5-stable.zip .
- After decompression, copy the flutter directory to the D drive (note that the path should not have special characters).
(3) Update the path environment variable
- Control Panel -> System and Security -> System -> Advanced System Settings -> Environment Variables -> User Variables.
- Find the path entry (if not, create a new path entry), add
flutter/binthe full path.
(4) Run the flutter doctor check (according to the check result, complete the dependency configuration).
2.2.2 Linux
(1) System configuration requirements
- Operating System: Linux 64 bit.
- Command tools: bash, curl, file, git 2.x, mkdir, rm, unzip, which, xz-utils, zip.
- Common library: libGLU.so.1.
(2) Get the Flutter SDK
# 更新软件源
sudo apt-get update
# 安装snap工具
sudo apt-get install snap
# 安装flutter
sudo snap install flutter --classic
(3) Run the flutter doctor check (according to the check result, complete the dependency configuration).
2.3 Running and publishing
Common commands of 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 Run to Windows platform
# 1.为已有的 Flutter 项目添加桌面支持
flutter create --platforms=windows .
# 2.确保开启开发者模式
start ms-settings:developers
# 3.基于Android Studio IDE开发的移动应用运行到Windows
flutter run -d windows
2.3.2 Publishing to Windows Platform
# 构建发布版本
flutter build windows --release
# 生成的发布版路径为 <Project_Dir>/build/windows/runner/release
# release目录结构如下
.
├── amc1600e.exe // 可执行程序
├── data // 包含应用资源文件，如字体和图片
└── flutter_windows.dll // 必需的动态库文件
2.3.3 Running on Linux platform
# 1.为已有的 Flutter 项目添加桌面支持
flutter create --platforms=linux .
# 2.基于Android Studio IDE开发的移动应用运行到Ubuntu
flutter run -d linux
2.3.4 Publishing to Linux platform
# 构建发布版本
flutter build linux --release
# 生成的发布版路径为 <Project_Dir>/build/linux/x64/release/bundle
# bundle目录结构如下
.
├── amc1600e // 可执行程序
├── data // 包含应用资源文件，如字体和图片
└── lib // 包含必需的动态库文件
2.3.5 Run to Android platform
Under the project path, hold down Shift, right-click, and select Open Powershell window here:
-
Enter to
flutter devicesview a list of devices. -
Enter
flutter run -d emulator-5554.
2.3.6 Release to Android platform
(1) Check APP Manifest
(2) View the build configuration
(3) Add startup icon
(4) APP signature
(5) Turn on obfuscation compression
(6) Build a release apk
# 构建apk
flutter build apk
# 安装apk
flutter install
3 Comparative analysis
| Cross-platform solution | advantage | shortcoming |
|---|---|---|
| uni-app | 1. Internally compatible with vue's writing method for cross-platform use. 2. At the same time, it supports publishing to multiple platforms such as iOS, Android, Web, many mainstream applets, and quick apps. |
1. Many web libraries and third-party web libraries are not supported. 2. If it is difficult to customize the function or UI interface, basically you can only do it according to the requirements of uni-app. 3. It is not very friendly to debugging and compatibility with mobile devices. |
| flutter | 1. Rapid development, support millisecond-level hot reload. 2. Provide rich component support, expressive and flexible UI. 3. With its own rendering engine, it does not depend on any platform and can achieve the same performance as native applications. 4. Open source is free and provides community support. 5. One set of code can be compiled into applications for multiple platforms (mobile, web, desktop, embedded). |
1. Need to know the dart language. 2. Need to understand native development. |