突然觉得flutter
挺不错的,想学一下,就花点时间学下,做个简单的demo
吧,以便完善自己的技术栈。
最早做移动端的时候,是做一个体操比赛的打分器程序,运行在android
平板或手机上,要实时与服务器通讯,当时采用的是ionic
这个框架,大概是2015
年的时候,那时候,ionic
还是js
作为底层来写,后面ionic
支持angular
、vue
、reace
等前端框架来编写了。ionic
也可以调用原生的一些功能,比如调用手机的蓝牙啊,摄像头啊,这些都是通过cordova
来实现的,当时还写过一个蓝牙的ios
插件;是以webview
作为媒介,js
与原生代码进行互相调用。
后面又陆续的出现了一些其他的类似这种框架,比如阿里开源的weex
,采用vue
作为底层支持框架进行开发。然后后面兴起react native
号称可以将react native
代码编译成各自的平台对应的源码进行运行。
还有最近今年也比较流行的uni-app
,也是可以跨各种端,除了支持android
、ios
外还支持各种平台的小程序,也是一套代码多次运行。并且小程序的标准也是uni-app
最先提出,最后将技术标准捐献给工信部旗下的HTML5
中国产业联盟;微信团队经过分析,于2016
年初决定上线小程序业务,但其没有接入联盟标准,而是订制了自己的标准。
当然还有更牛的,比如Dropbox
公司,采用的是C++
来开发跨iOS
和android
平台的代码。用C++
肯定是很高效的,这个毋庸置疑。但是Dropbox
最后还是宣布放弃C++
的方案,采用原生平台语言开发。主要原因是,业务扩展后,没有相应的会C++
且懂移动开发的人才能补上来。
# 从移动app的开发模式说起
# Native App
传统的原生APP
开发模式,Android
基于Java
语言,底层调用Google
的 API
;iOS
基于OC
或者Swift
语言,底层调用App
官方提供的API
优点:
- 体验最好
- 直接依托于操作系统,交互性最强,性能最好
- 功能最为强大,特别是在与系统交互中,几乎所有功能都能实现
缺点:
- 人员投入大
- 开发成本高,无法跨平台,不同平台
Android
和iOS
上都要各自独立开发Android
上基于Java
开发,iOS
上基于OC
或Swift
开发,相互之间独立,必须要有各自的开发人员 - 门槛较高,
Android
,iOS
都需要独立学习 - 更新缓慢,特别是发布应用商店后,需要等到审核周期
- 维护成本高,
iOS
和Android
需要同时维护
# Web App
移动端的网站,将页面部署在服务器上,然后用户使用各大浏览器访问。一般泛指 SPA(Single Page Application)
模式开发出的网站
优点:
- 人员投入少
- 开发成本低,可以跨平台,调试方便
- 维护成本低
- 更新最为快速
缺点:
- 性能低,体验最差
- 功能受限,大量功能无法实现只
- 依赖于网络,页面访问速度慢,耗费流量
- 如果是一个单独的
WebApp
由于用户体验差被苹果官方的拒绝上架
# Hybrid App
混合开发,由Native
通过JSBridge
等方法提供统一的API
,然后用Html5+JS
来写实际的逻辑,调用API
,这种模式下,由于Android
,iOS
的API
一般有一致性,而且最终的页面也是在webview
中显示,所有有跨平台效果
优点
- 体验适中,人员投入适中
- 对于复杂的实现可以采用原生进行
- 对于简单多变的,可以采用
webview
进行
缺点
- 不适用于交互性较强的
app
- 相比原生,性能仍然有较大损耗
# React Native App
React Native
是Facebook
发布的,可以让我们广大开发者使用JavaScript
和React
开发我们的应用,该提倡组件化开发,也就是说React Native
给我们提供一个个封装好的组件让开发者来进行使用,甚至我们可以相关嵌套形成新的组件。
使用React Native
我们可以维护多种平台(Web,Android
和IOS
)的同一份业务逻辑核心代码来创建原生应用。
现阶段Web APP
的的体验还是无法达到Native APP
的体验,所以这边fackbook
更加强调的是“learn once, write everywhere”
,应用前端我们使用js
和React
来开发不同平台的UI
,下层核心模块编写复用的业务逻辑代码,提供应用开发效率。
技术类型 | UI渲染方式 | 性能 | 开发效率 | 动态化 | 框架代表 |
---|---|---|---|---|---|
H5 +原生 | WebView 渲染 | 一般 | 高 | 支持 | Cordova 、Ionic |
JavaScript +原生渲染 | 原生控件渲染 | 好 | 中 | 支持 | RN 、Weex |
自绘UI +原生 | 调用系统API 渲染 | 好 | Flutter 高, QT 低 | 默认不支持 | QT 、Flutter |
# 先说说什么是flutter
Flutter
是 Google
推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过 Dart
语言开发 App
,一套代码同时运行在 iOS
和 Android
平台。 Flutter
提供了丰富的组件、接口,开发者可以很快地为 Flutter
添加 native
扩展。同时 Flutter
还使用 Native
引擎渲染视图,这无疑能为用户提供良好的体验
Flutter
没有使用原生控件,相反实现了一个自绘引擎,使用自身的布局、绘制系统。
2017
年Google I/O
大会上,Google
首次推出了一款新的用于创建跨平台、高性能的移动应用框架——Flutter
。2018年2月
,Flutter
发布了第一个Beta
版本,同年五月, 在2018
年Google I/O
大会上,Flutter
更新到了beta 3
版本。2018年6月
,Flutter
发布了首个预览版本,这意味着Flutter
进入了正式版(1.0
)发布前的最后阶段。
# 采用Dart语言开发
什么是Dart
语言?
Dart
是谷歌开发的计算机编程语言,后来被Ecma (ECMA-408)
认定为标准 。它被用于web
、服务器、移动应用和物联网等领域的开发。它是宽松开源许可证(修改的BSD
证书)下的开源软件。
Dart是面向对象的、类定义的、单继承的语言。它的语法类似C
语言,可以转译为JavaScript
,支持接口(interfaces)
、混入(mixins)
、抽象类(abstract classes)
、具体化泛型(reified generics)
、可选类型(optional typing)
和sound type system
2018年2月
,Dart2
成为强类型语言。
Dart学习与介绍更多 (opens new window)
掘金Flutter专栏 (opens new window)
# 安装开发环境
以macOS
为例
- 配置访问环境
vi ~/.bash_profile
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
source ~/.bash_profile
- 下载
SDK
可以直接在github上
下载最新的版本即可,建议下载不带pre
版本的,或者去官网下载稳定版也可以。github (opens new window),
官网 (opens new window)
- 解压,配置环境变量
export PATH="pwd/sdk/flutter-1.17.0/bin:$PATH"
- 验证安装
flutter doctor
如果报以下错误,则需要在本地建一个git
的映射,最简单的方式就是git init
即可
Error: The Flutter directory is not a clone of the GitHub project.
The flutter tool requires Git in order to operate properly;
to set up Flutter, run the following command:
git clone -b beta https://github.com/flutter/flutter.git
在或者通过git clone -b stable https://github.com/flutter/flutter.git
进行sdk
的下载就自带了.git
目录。
然后还会报一其他的未安装的错误,我觉得无伤大雅,比如我的xcode
已经被卸载了,我可以先开发,使用android
进行调试。只要看着符合自己的开发环境没问题就可以,并不是要解决所有的错误。
- 配置
android
环境
配置android sdk这个就是下载sdk后,配置一下环境变量即可
vi ~/.bash_profile
ANDROID_HOME=/Volumes/free/work/sdk
export PATH=${ANDROID_HOME}/tools:${ANDROID_HOME}/platform-tools:${PATH}
source ~/.bash_profile
当我们把配置放到了~/.bash_profile
中,如果启动的窗口是zsh
,则配置到bash中的文件,不会生效。可以按如下方式处理
在~/.zshrc
中,加入source ~/.bash_profile
即可让bash
中的配置生效。
开发工具配置
VS-Code
在vscode
的插件市场搜索flutter
,然后选择安装即可,顺便把dart
插件也装一下。创建项目
- 点击
查看>Command Palette
或快捷键Shift + Command + P
- 输入
flutter
,选择Flutter: New Project
- 输入项目名字,选择存放路径
vscode
右下角选择目标设备- 直接
F5
即可运行,或者运行>启动调试
如果在运行报Android SDK licences
相关的错误,在android sdk
的tools/bin
下运行sdkmanager --licenses
后,点y
即可