跨平台开发之flutter

跨平台框架对比

https://www.sohu.com/a/325794075_733133
https://www.cnblogs.com/elesos/p/9506116.html

H5+原生(Cordova、Ionic、微信小程序-目前是)

--混合(hybrid)开发,UI和业务逻辑都基于JavaScript
原理:WebView加载H5;Native提供功能接口(业务功能,硬件访问...);JSBridge通信

JS+原生渲染(React Native、Weex、快应用)

--以RN为例
UI基于原生,业务逻辑基于JavaScript
原理:1:RN将虚拟DOM通过JsBridge映射为原生控件;2:原生控件渲染UI

自绘UI+原生(QT for mobile、flutter)

框架自带渲染引擎绘制UI,不依赖原生控件

RN 和 flutter 架构对比图

flutter介绍

这里介绍更详细,直接贴链接

flutter快速入门向导

1.安装和环境配置参考

2.拥有其他平台开发经验快速指南---入门建议可以优先看这里

3.编写第一个flutter应用参考

必备插件介绍

( 官方维护插件【点击这里】)
1、接口请求:dio
2、json解析:json_serializable dart不支持反射,所以就没有类似java中的fastjson,jackjson,Gson等解析库。json_serializable 使用步骤如下:

step-1:根目录pubspec.yaml 添加一下依赖

dependencies:
        json_annotation: ^3.2.2
dev_dependencies:
        json_serializable: ^3.2.2
        build_runner: ^1.7.1

step-2:编写代码 数据模型model,这里提供一个工具json转model工具
step-3:根目录命令输入 生成 xxx.g.dart 文件

flutter pub run build_runner build 一次性生成
flutter pub run build_runner watch 持续性生成代码,后台监听
//注意:如果项目是从git仓库clone下来的,项目中已经存在 .g.dart 文件,需要删除所有的 .g.dart 文件后才能生成成功,因此创建项目时,建议 .g.dart 文件不要添加到 git 仓库中

3、本地数据存储:shared_preferences,对应Android的SharedPreferences,iOS的Userdefault

4、Android iOS 本地文件访问 path_provider
5、url scheme自定义url,路由导航:url_launcher
6、webview提供访问h5能力 flutter_webview_plugin
7、微信分享能力:fluwx

性能

3种模式:
debug:调试模式,热重载,包体积很大--debug模式下app比较卡属于正常
profile:分析模式--性能分析
release:生产模式--发布
基本上能够达到60fps,iOS:丝滑般的体验; Android:偶尔会掉帧,不如iOS顺畅;

以下为iOS 和 Android 手机上快速滑动大图列表的性能对比


1.png
2.png

官方demo Gallery

目前市场上用flutter的应用:
化纤帮app(大刀现在公司开发的产品,没有Native开发参与)
TODO 更多的案例

文档资源

更多链接

总结

本篇总体来看有些零散,没有重点,对于一个全新的开发语言Dart和跨平台UI开发框架flutter,本文主要是希望能够帮助了解flutter是什么,flutter能做什么,flutter做出来的东西怎么样,以及如何快速入门等;
对于flutter的未来个人比较看好,github star数已经达到了77K,Issues超过了5000,可见开发者活跃程度;
flutter有优秀的性能,理论上跟原生没有区别,就目前测试来看,iOS体验比Android更优秀,几乎全部达到60fps;
一套代码多端使用,甚至后期的wap项目,UI层面能够完全与原生剥离,后期维护成本低,开发效率高,测试效率高;
语言用的是Dart(跟其他面向对象语言差不多,入门很快),本文没有介绍,可自行网上查阅

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,425评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,058评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,186评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,848评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,249评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,554评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,830评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,536评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,239评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,346评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,999评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2 267