本篇文章是学习fluter的部分内容总结
跨平台根据其原理,主要分为三类:
1.H5+原生(Cordova,Ionic,微信小程序)
h5代码是运行在webview中,而webview实质上就是一个浏览器内核,其JavaScript依然运行在一个权限受限的沙箱中,所以对于大多数系统能力都没有访问权限,如无法访问文件系统,不能使用蓝牙等。
2.JavaScript开发+原生渲染(React Native,Weex,快应用)
主要优点如下:
1.采用web开发技术栈,社区庞大,上手快,开发成本相对较低。
2.原生渲染,性能相对h5提高很多
3.动态化较好,支持热更新
不足:
1.渲染时需要Javascript和原声之间通讯,在有些场景如拖动可能会因为通讯频繁导致卡顿。
2.JavaScript为脚本语言,执行时需要JIT(动态编译),执行效率和AOT(静态编译)代码仍有差距
3.由于渲染依赖原声控件,不同平台的空间需要单独维护,并且当系统更新时,社区控件可能会滞后,除此之外,其控件系统也会受到原声UI系统限制。例如,在Android中,手势冲突消歧规则是固定的,这在使用不同人写的控件嵌套时,手势冲突问题会变得非常棘手。
3.自绘UI+原生(QT for mobile,Flutter)
通过在不同平台实现一个统一接口的渲染引擎来绘制UI,而不依赖系统原声控件,所以可以做到不同平台UI的一致性。
优点:
1.性能高
2.灵活,组件库易维护,UI外观保真度和一致性高
不足:
动态性不足,为了保证UI绘制性能,自绘UI系统一般都会采用AOT模式编译其发布包,所以应用发布后,不能像Hybird和RN那些使用JS作为开发语言的框架那样动态下发代码。
程序主要有两种运行方式:
静态编译和动态解释。静态编译的程序在执行前全部被翻译为机器码,通常将这种类型成为AOT,即“提前编译”;而解释执行的则是一句一句边翻译边运行,通常将这种类型成为JIT,即“即时编译”。
Flutter款架结构:
Dart语言
变量声明
1.var
类似于JavaScript中的var,他可以接收任何类型的变量,但最大的不同时Dart中var变量一旦赋值,类型便会确定,则不能再改变其类型。
2.dynamic和object
Dynamic和Object与var功能相似,都会在赋值时自动进行类型推断,不同在于,赋值后可以改变其类型。
object时dart所有对象的根基类,也就是说所有类型都是Object的子类,所以任何类型的数据都可以赋值给Object声明的对象,所以表现效果和dynamic相似
3.final和const
如果您从未打算更改一个变量,name使用final或const,不是var,也不是一个类型。一个final变量只能被设置一次,两者区别在于:const变量是一个编译时常量,final变量在第一次使用时被初始化。被final或者const修饰的变量,变量类型可以省略。
函数
dart是一种真正的面向对象的语言,所以即使是函数也是对象,并且有一个类型Function。这意味着函数可以赋值给变量或者作为参数传递给其他函数,这是函数式编程的典型特征。
异步支持
dart类库有非常多的返回future或者stream对象的函数。这些函数被称为异步函数:他们只会在设置好一些耗时操作之后返回,比如像IO操作。而不是等到这个操作完成。
async和await关键词支持了异步编程,运行您写出和同步代码很像的异步代码。
future与JavaScript的promise非常相似,表示一个异步操作的最终完成(或失败)及其结果值的表示。简单来说,他就是用来处理异步操作的,异步处理成功就执行成功的操作,异步处理失败就捕获错误或者停止后续操作。一个future只会对应一个结果,要么成功,要么失败。
stream也是用于接收异步事件数据,和future不同的是,他可以接收多个异步操作的结果(成功或失败)。也就是说,在执行异步任务时,可以通过多次触发成功或失败事件来传递结果数据或错误异常。stream常用于多次读取数据的异步任务场景,如网络内容下载,文件读写等。
Dart线程模型及异常捕获
在Dart中,所有的外部事件任务都在事件队列中,如IO、计时器、点击、以及绘制事件等,而微任务通常来源于Dart内部,并且微任务非常少,之所以如此,是因为微任务队列优先级高,如果微任务太多,执行时间总和就越久,事件队列任务的延迟也就越久,对于GUI应用来说最直观的表现就是比较卡,所以必须得保证微任务队列不会太长。
在事件循环中,当某个任务发生异常并没有被捕获时,程序并不会退出,而直接导致的结果是当前任务的后续代码就不会被执行了,也就是说一个任务中的异常是不会影响其它任务执行的。
最终异常捕获:
void collectLog(String line){
... //收集日志
}
void reportErrorAndLog(FlutterErrorDetails details){
... //上报错误和日志逻辑
}
FlutterErrorDetails makeDetails(Object obj, StackTrace stack){
...// 构建错误信息
}
void main() {
FlutterError.onError = (FlutterErrorDetails details) {
reportErrorAndLog(details);
};
runZoned(
() => runApp(MyApp()),
zoneSpecification: ZoneSpecification(
print: (Zone self, ZoneDelegate parent, Zone zone, String line) {
collectLog(line); //手机日志
},
),
onError: (Object obj, StackTrace stack) {
var details = makeDetails(obj, stack);
reportErrorAndLog(details);
},
);
}