50.flutter学习笔记（简介、初识Flutter）

1.移动开发技术简介

（1）原生开发

原生开发的优势：可访问平台全部内容；速度快、性能高、可以实现复杂动画及绘制，整体用户体验好。

原生开发的缺点：平台特定，开发成本高；不同平台必须维护不同代码，人力成本随之变大；内容固定，动态化弱。

总结：纯原生开发主要面临动态化和开发成本两个问题。

（2）跨平台技术

跨平台框架（Android和IOS）分为三类：

H5+原生（Cordova、lonic、微信小程序）；JavaScript开发+原生渲染（React Native、Weex、快应用）；

自绘UI+原生（QT for mobile、Flutter）

（3）Hybrid技术简介

H5+原生混合开发

这类框架的主要原理是将APP的一部分需要动态变动的内容通过H5实现，通过原生的网页加载控件加载。

称这种H5+原生的开发模式为混合开发，采用混合模式开发的APP称为混合应用或Hybrid APP，如果一个应用的大多数功能都是H5实现，称其为Web APP。

目前混合开发框架典型代表：Cordova、lonic和微信小程序。

混合开发技术点

我们把依赖于WebView的用于在JavaScript与原生之间通信并实现了某种消息传输协议的工具称之为WebView JavaScript Bridge，简称JsBridge，它也是混合开发框架的核心。

示例：JavaScript调用原生API获取手机型号

<1>首先在原生中实现获取手机型号的API getPhoneModel

class JSAPI {
 @JavascriptInterface
 public Object getPhoneModel(Object msg) {
   return Build.MODEL;
 }
}

<2>将原生API通过WebView注册到JsBridge中

import wendu.dsbridge.DWebView
...
//DWebView继承自WebView，由dsBridge提供  
DWebView dwebView = (DWebView) findViewById(R.id.dwebview);
//注册原生API到JsBridge
dwebView.addJavascriptObject(new JsAPI(), null);

<3>在JavaScript中调用原生API

var dsBridge = require("dsbridge")
//直接调用原生API `getPhoneModel`
var model = dsBridge.call("getPhoneModel");
//打印机型
console.log(model);

（4）React Native、Weex及快应用

DOM树与控件树

文档对象模型DOM就是文档树，与用户界面控件树对应；DOM操作是指直接来操作渲染树（或控件树）

响应式编程

React有一个重要思想：状态改变则UI随之自动改变；

状态变化之后的React框架并不会立即去计算并渲染DOM树的变化部分，会先被同步到虚拟DOM，最后再批量同步到真实DOM

React Native

React Native与React的区别：

前者是后者在原生移动应用平台的衍生产物，后者虚拟DOM最终会映射为浏览器DOM树，而前者虚拟DOM会通过JavaScriptCore映射为原生控件树。

RN中将虚拟DOM映射为原生控件的过程分两步：

     布局消息传递，将虚拟DOM布局信息传递给原生；原生根据布局信息通过对应的原生控件渲染控件树

Weex

跨平台移动端开发框架，Weex支持Vue语法和Rax语法

快应用

快应用自身不支持Vue或React语法，采用JavaScript语言开发

总结：

JavaScript开发+原生渲染优点：

1. 采用Web开发技术栈，社区庞大、上手快、开发成本相对较低。
2. 原生渲染，性能相比H5提高很多。
3. 动态化较好，支持热更新。

（5）QT Mobile

自绘UI+原生

（6）Flutter出世

热重载

最后：

技术类型	UI渲染方式	性能	开发效率	动态化	框架代表
H5+原生	WebView渲染	一般	高	支持	Cordova、Ionic
JavaScript+原生渲染	原生控件渲染	好	中	支持	RN、Weex
自绘UI+原生	调用系统API渲染	好	Flutter高, QT低	默认不支持	QT、Flutter

2.初识Flutter

（1）介绍

跨平台自绘引擎、高性能、采用Dart语言开发

程序主要有两种运行方式：静态编译和动态解释

静态编译的程序在执行前全部被翻译为机器码，通常将这种类型称为AOT（提前编译）；

解释执行的是一句一句边翻译边运行，通常将这种类型称为JIT（即时编译）

Flutter选择Dart语言的原因是：

1. 开发效率高
2. 高性能
3. 快速内存分配
4. 类型安全
5. Dart团队就在你身边

（2）Flutter框架结构

Flutter Framework

是一个纯Dart实现的SDK，实现了一套基础库，自底向上。

底下两层是Dart UI层；Pendering是抽象的布局层，依赖于Dart UI层；Widgets层是基础组件库；最上边是视觉风格的组件库。Flutter开发的大多数场景，只和最上边两层打交道。

Flutter Engine

是一个纯c++实现的SDK，包含了Skia引擎、Dart运行时、文字排版引擎等。