Flutter 学习资料及笔记总结

也许是程序员天生的鄙视链作祟,后端出身的自己一直认为前端/客户端就是一个“画皮”的事,因此一直不愿意投资时间系统地学习前端技术栈。一般都是实在不得不做前端的时候,在 github 找个功能需求差不多的代码库,修改一下上线。开发速度倒是很快,但是出来的效果总是被评价为“程序员审美”。

一直在寻找一个性价比高的方案,希望能够真正 Write once, run anywhere. 对于桌面客户端,尝试过一段时间 Electron, 但是发布安装包的体积大以及web级别的性能使得只能在有限场景下使用。移动端,当前最火的自然是 RN. 但个人是在受不了RN中屁大点的事情都搞得复杂难用,因此一直也是敬而远之。而去年12月Google发布的Flutter却让自己有了眼前一亮的感觉。

RN vs Flutter

Flutter比RN晚出生两年,而在很多概念上,其实也是借鉴的RN。无论是从社区还是成熟度来看,Flutter都还有很长一段时间要走:

但是,Flutter的设计哲学更加简单,更符合自己的品味。举个例子,Flutter中,几乎所有的UI元素都是一个 widget, 没有那些乱七八糟故弄玄虚的概念,一切都非常直白。从上表的比较可以看出,其实技术层面,Flutter其实并没有绝对的优势,在社区和成熟度上还有明显的短板,但这些都不重要。重要的是,判断一个技术是值得投资,要看未来三五年中,这个技术有没有可能成为行业标准,尤其是在大公司引领下成为事实标准。

显然,Flutter具有这样的潜力。移动开发中,在 web/H5 无法覆盖的场景,在效率和成本的驱动下,跨平台开发会是行业的趋势。最近火热的 996.icu 也算是一种从侧面透露出以后并不需要那么多的客户端开发同学。另一方面,Flutter 是Google为下一代操作系统Fusion的重要布局,且有chromium项目加持。无论从战略还是项目层面,都是天空给的足够高,翅膀长的足够硬。从这个层面看,RN简直就是一群小学生在玩过家家了(开个玩笑,不要当真)。国内方面,无论是阿里还是腾讯,都开始在Flutter上进行布局和项目技术投入。需要特别指出的是,在Flutter之前,阿里是有自研 Weex的,具体项目上,闲鱼团队已经有在实际项目中使用 Flutter.

Flutter 学习资料及笔记

Flutter 可以简单的理解为一个使用Dart语言进行开发的跨平台UI框架。因此,入门需要学习的东西主要有两块:

  1. Dart语言;
  2. Flutter 框架;

Dart 语言设计之初是为了替代 Javascript, 因此,整体上没有那么多语言bug, 会比 JS 要更加符合后端同学的语言习惯。语言入门只推荐一个官方的 A Tour of the Dart Language 学习资料。看资料的过程中,可以结合 DartPad
写一些代码片段,辅助记忆和理解。Dart 语言学习笔记:

  • 一切皆对象,默认值都是null
  • 下划线开头的变量是私有变量,跟Golang的语言设计风格类似
  • 基础类型转换,依赖 parse 和 toString 方法
  • string是 utf-16, 有点非主流
  • 函数默认值必须是 const, 规避不可重入的问题
  • Dart的所有异常都是 unchecked exception,且可以抛出任意object作为异常
  • 构造函数可以取名称,便于阅读理解,但是这点改进对于引入的复杂度并不划算

整体看,Dart 引入的一些语言特性是 python + Java 的合体。语言上中规中矩,没有什么亮点。可以看成是 javascript 的静态类型版。但是,谁让Dart搭上了Flutter这趟潜力股,而Flutter又找了Google这个大干爹呢。老实学吧,反正也就一两个小时的事。

关于Flutter本身的学习资料,其官方网站的文档一如既往地保持了 Google 级文档的水准。但是官方文档有点大而全,可能没有足够时间通读,一时半会也不容易抓住重点。我推荐几个资料你一定要仔细阅读:

学习完以上资料,附带一些课程联系,你会花大约1~2个周末的时间。学完以后,你已经初步具备开发跨平台 app 的能力了。(我个人的情况是, 两个周末学习完上面的资料,并完成一个简单的 app 开发并提交到app store审核,相信你也能做到。)

在开发app过程中,你可能会查找组件,这里推荐阿里的flutter-go.

如果需要进一步深入,可以阅读学习其他人的代码

此外,如果你关注 Flutter 在桌面端的跨平台情况,由于官方还没有发布桌面支持的正式版本。推荐你当前先watch Desktop Embedding for Fluttergo-flutter 两个项目。

总结

在Google Fusion战略和明星项目chromium加持下,以及国内巨头积极跟入的背景下,花两个周末系统学习一下Flutter个人认为是一个潜在投资性价比很高的事情。另一方面,Flutter从去年12月才发布1.0正式版,整体成熟度还不是很高,因此在实际项目中并不建议太激进的引入使用,并且Flutter在一些原生支持上海不够完善。比如,使用Flutter接收其他app分享的内容,android平台下你可以根据How do I handle incoming intents from external applications in Flutter?来解决,但是在iOS平台,当前阶段则是彻底不支持。

四五年前iOS客户端开发炙手可热的机会已经一去不复返了,Flutter也许是下一个机会。

后端程序员两个周末入门微信小程序开发

再过几个小时,2018就结束了,赶着最后几个小时,完成了一个微信小程序,感谢时间,也感谢自己。

平时工作比较忙,整个开发花了两个周末的休息时间,输出包括后端服务器以及微信小程序,当然还有一些购买和部署服务器、CDN、https 证书等打杂的事情。

很遗憾,作为一个自诩为程序猿老司机的自己并没有在9小时搞定微信小程序开发。作为一个平时只写后端代码的老司机,这个完成速度勉强算及格吧。下面介绍一下自己这两个周末入门小程序开发用到的资料以及遇到的

微信小程序最好的资料

小程序这块技术栈对于自己来说是一个从0到1的过程,因此最开始还是想找找有没有一些现成的教程。看了一些免费教程,发现不太系统,并且很多js的写法在我这个业务选手看来都业余。于是极客时间找到了一个付费专栏:《9小时搞定微信小程序开发》

就在我准备付费的时候,发现其课程大纲不过是官方教程的一个搬运和翻译。

课程目录:

官方教程(部分):

(没有贬低专栏作者的意思,事实上,小程序这块技术栈让我来写,估计目录也差不多。或者说,对于有一定学习能力的?‍?‍,根本就不应该存在所谓的学习课程?)

作为一个聆听过《左耳听风》耗子叔的极客时间专栏的老司机(好像秒打脸了?),自然是记得他老人家对于学习知识的谆谆告诫:

我问过几个在别的领域知识付费的专栏作者:你们写的这些东西,不就是卡内基的那些东西吗?不就是某某书里的那些东西吗?不就是某某英文资料里的那些内容吗?

他们告诉我,是的,我们就是搬运知识,有些国外的东西,国人理解不了,需要用他们喜欢的语言讲出来,而他们又不读书,英文水平也一般,但他们想速成,所以,才有了我们的市场。这有点像餐馆,他们不想自己做饭吃,那就我们来做,有的人还要别人喂到嘴边,甚至好些人都需要先帮他们嚼一遍,他们才能吃得下去。所以,我们这些学习能力强的人挣点他们的钱也是应该的。

所以,兜兜转转一圈,最后还是选择了微信团队的官方开发教程。而这个选择从后面的开发过程看,是无比正确的:

  1. 官方教程不长,非常干练,整体系统感强。举个例子,很多奖微信小程序开发的二手教程都会给你说这个API是干嘛的以及如何使用这种废话。但是,微信的框架-API文档中,则直接给你言简意赅的讲解了其所有API涉及的规范和原则,你看了这个规约后,你看到一个API你其实就已经知道它该如何使用了。对于我这种入门菜鸟来说,这种知识点如果在入门时候就知其然,后面会在这个点上重复采坑而不自知,并且后续要知其所以然要花费的时间只会多不会少。
  2. 这是小程序开发第一手资料的来源,具有权威性和最高的时效性。从两年前关注小程序,到现在开发自己的第一个小程序前,一直以为小程序技术这块从发布至今没有什么迭代和更新,但是从其文档的众多的API兼容以及事件兼容描述看,小程序团队过去两年真的是挺努力的。作为一个开发者,迭代造成的不兼容,你只能去适配,因此,第一手的资料往往能给你节省数小时的时间。
  3. 丰富的样式库和源代码示例。这块重点推荐两个资源:

第一个是微信小程序设计指南。如果你需要自己设计产品原型,你一定要研读一下这个设计指南,这样你就不用去重新发明很多UI轮子,也不用纠结这个交互是方案A好还是方案B好。这个指南从一定程度上反应了微信整个的产品观和设计理念,你一定也能找出这些指南中不够完美的地方,但是当前阶段,这的确是一个能够让你快速设计出一个80分微信小程序产品的 Bible. 指南中给出了WeUI_sketch组件库 WeUI_PS组件库以及对应的预览地址,可以帮助你快速设计产品原型。

第二个是WeUI for 小程序. 如果第一个资源主要是辅助你进行产品设计,那么这个资源则是辅助你进行快速开发的必备参考库(老鸟可以无视)。用了这个代码库以后,你开发页面大部分时候就是从这个库里面找你需要的组件和样式,然后复制-粘贴搞定:

那些微信小程序开发中的坑

修改 page data 不生效

坦率讲,这并不是小程序的坑,而是自己看文档不仔细。修改页面的 data 只能通过 setData:

  1. 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致。
  2. 仅支持设置可 JSON 化的数据。
  3. 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。
  4. 请不要把 data 中任何一项的 value 设为 undefined ,否则这一项将不被设置并可能遗留一些潜在问题。

setData 可以直接修改一个其下的子字段:

但是有一种情况需要注意:如果你的 key 是一个变量,这样修改子字段是不会生效的:

你应该这样做:

navigateTo 不生效

这个依然是看文档不仔细:

wx.navigateTo(Object object)
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。

如果你要跳转的页面是 tabbar 页面,请使用 wx.switchTab.

列表条目多时出现卡顿

这个问题容易出现在动态加载数据,数据又绑定了前端列表view的场景。根据官方文档,使用 wx:key 解决即可。其原理是:

当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

wx.requestDELETE 传参问题

根据w3c标准,http DELETE 请求中的参数应该跟 GET 方法一样,放在 url query 中,然而微信封装的 wx.request 防范在指定为 DELETE 方法后,data 依然被放在了 body 中。如果你在服务器端获取不到参数,请尝试从 body 中获取。

文件上传阿里云OSS 403 权限问题

如果你直接使用阿里云 OSS 域名上传,因为微信封禁了 OSS 域名,因此你需要参考微信小程序文件上传二三事 绑定自定义域名。同时,千万注意,绑定的域名不要开启CDN,否则,会造成 403 权限错误:

如果同时希望使用阿里云的CDN,请绑定另外一个域名,与上传域名分开。

总结

也许是孕妇效应吧,最近发现很多人都开始做微信小程序。从整体开发体验看,这的确是一个分发自己创意的轻量级产品方案。过去的两年,微信小程序已经远超百万,但是真正让你能记住的可能比你能记住的公众号还少。因此,载体本身的影响能力圈是有限的,还是要回归到你的产品解决了什么问题,这也是你做任何产品的价值所在。此外,因为苹果税的问题,当前 (2018.12.31)iOS 平台的微信小程序无法进行虚拟物品支付(会员、道具、课程等)的,这显然会极大的影响开发者的积极性。虽然你张小龙的理念是小程序用完即走,但是你不能让开发者只有一个广告变现的路径,更不能只是自私的维护好自己的地盘儿不管开发者死活。

炎热焦灼的八月

显然,看到这个题目的时候,说明拖延症又犯了。

这个月天气炎热,个人也进入了一个相对焦灼的状态。从心里深刻的知道这不是一件坏事,只是当前面临的问题和挑战是需要去直面并迅速解决。

这个月最大的感慨是在「专注」上做得不够。导致很多事情都在上下文切换的过程中被肢解的支离破碎,完全没有了初心,当然离预期也就相去甚远了。

与之关联的另一个做得不好的点是「效率」。在思维体力上,自我感觉已经进入一个相对强韧的阶段,但是在解题效率上依然让自己常有隐忧。今天在路上,看了达里奥《原则》的个人生活部分。挺有启发的,他讲个人生活愿景的追求实现划分成5个阶段,每个阶段有给出了不同的原则。自我对照检查,我觉得自己在认清问题本质以及规划上面是存在严重问题的。导致问题主体识别出现偏差或错误,而规划上又没有达到完全开放大脑的状态,因此,无论是在视角高度还是做事深度上都深陷泥潭。

这个月尝试换一种心态和姿态与最爱的人相处。虽然依然做不到大脑完全开放的状态,但是意外的发现其实当我尝试这样去做的时候,至少我已经放下潜意识中的自我,不在用这种潜意识做一些理所当然的决定,然后筛选证据,去印证满足自己内心的欲望和幻想。妞儿给了自己机会让自己开了一个好头,期待自己后面的改变。

本月推荐的电影当然是《蚁人2》,因为这是这个月看过的唯一一部电影。适度的夸张而不荒谬,沉重的剧情总是用暖心的美式幽默裹挟,彩蛋中巧妙的与复联结合,这三点应该是本片让自己最喜欢的点。如果你还没去电影院,推荐你去看看。

本月推荐的书毫无疑问是《原则》。应该说这本书红黑的精装版本在很大程度上是可以让你在公共场所作为小资的装X读物的。但是,我觉得这本书的很多书评的确有点过誉这本书了。书的确不错,不过作者依然没有能够摆脱为了写一句话而堆砌一个章节的问题。并且,本质上,这其实就是大家口中最正宗的心灵鸡汤类读物。我并不反对心灵鸡汤,我只是很难理解为什么很多人总是向你表达自己不屑于心灵鸡汤读物的同时却认为《原则》是一本高大上的书。

就我个人而言,《原则》毫无疑问是一本让我受益匪浅的书。它让我自查出了很多自己以前认为理所当然的点,虽然我不一定完全同意其建议的原则和行事方式。但是,的确让我开始重新思考和认识一些事情。这与之前看到的陆奇给后辈的原则其实是相互呼应的:陆奇成功背后的故事:决定人生高度的,是这 7 条原则
。陆奇的给出的这些原则非常具体,但是做起来非常不易,摘录如下,以自勉:

  • 坚守价值观(坚持做对的事情)
  • 永远正能量
  • 高度自律
  • 每天学习
  • 把公司的事当成自己的事
  • 从我做起
  • 谦逊真诚

明天会认识很多优秀的新同学,带着小小的焦虑感,但一下能结识如此多有意思的灵魂,依然非常期待。