《Flutter实战》学习笔记之起步（更新中）

移动开发技术简介

原生开发与跨平台技术

原生开发

原生应用程序是指某一个平台（比如IOS或安卓）所特有的应用，使用相应平台支持的开发工具和语言，并直接调用系统提供的SDK API。比如Android原生应用就是指使用Java或Kotlin语言直接调用Android SDK开发的应用程序；而IOS原生应用就是指通过Objective-C或Swift语言直接调用IOS SDK开发的应用程序。
原生开发有以下主要优势：

• 可访问平台全部功能（GPS、摄像头）；
• 速度快、性能高、可以实现复杂动画及绘制，整体用户体验好；

主要缺点：

• 平台特定，开发成本高；不同平台必须维护不同代码，人力成本随之变大；
• 内容固定，动态化弱，大多数情况下，有新功能更新时只能发版。

移动互联网发展初期，业务场景并不复杂，原生开发还可以应对产品需求迭代。但近几年，随着物联网时代的到来、移动互联网高歌猛进、日新月异，在许多业务场景中，传统的纯原生开发已经不能满足日益增长的业务需求。主要表现在：

• 动态化内容需求增大；当需求发生变化时，纯原生应用需要通过版本升级来更新内容，但应用上架、审核是需要周期的，这对高速变化的互联网时代来说是很难受的，所以，对应用动态化（不发版也可以更新应用内容）的需求就变得迫在眉睫。
• 业务需求变化快，开发成本表大；由于原生开发一般都要维护Android、IOS两个开发团队，版本迭代时，无论人力成本，还是测试成本都会变大。

所以，纯原生开发主要面临动态化和开发成本两个问题，而针对这两个问题，诞生了一些跨平台的动态化框架。

跨平台技术简介

针对原生开发面临的问题，人们一直在努力寻找好的解决方案，而时至今日，已经有很多跨平台框架（这儿所指的“跨平台”，即特指Android和IOS两个平台），根据其原理，主要分为三类：

• H5 + 原生（Cordova、lonic、微信小程序）
• JavaScript开发 + 原生渲染（React Native、Weex、快应用）
• 自绘UI + 原生（QT for mobile、Flutter）

我们逐个来看下这三类框架的原理及优缺点。

1.1.2 Hybrid技术简介

H5 + 原生混合开发

这类框架主要原理就是将APP的一部分需要动态变动的内容通过H5来实现，通过原生的网页加载控件WebView（Android）或WKWebView（IOS）来加载（以后若无特殊说明，我们用WebView来统一指代Android和IOS中的网页加载控件）。这样，H5部分是可以随时改变而不用发版，动态化需求能满足；同时，H5代码只需要开发一次，就能同时在Android和IOS两个平台运行，这也可以减小开发成本。我们称这种H5 + 原生的开发模式为混合开发，采用混合模式开发的APP我们称之为混合应用或Hybrid APP，如果一个应用的大多数功能都是H5实现的话，我们就称其为Web APP。

目前混合开发框架的典型代表有：Cordova、lonic和微信小程序，值得一提的是微信小程序目前是在Webview中渲染的，并非是原生渲染，但将来有可能会采用原生渲染。

混合开发技术点

混合开发中，H5代码运行在Webview中，为Webview实质上就是一个浏览器内核，其JavaScript依然运行在一个权限受限的沙箱中，所以对于大多数系统能力都没有访问权限，如无法访问文件系统，不能使用蓝牙等。所以，对于H5不能实现的功能，都需要原生去做。而混合框架一般都会在原生代码中预先实现一些访问系统功能的API，然后暴露给WebView以供JavaScript调用，这样一来，WebView就称为了JavaScript与原生API之间通信的桥梁，主要负责JavaScript与原生之间传递调用消息，而消息的传递必须遵守一个标准协议，它规定了消息的格式与含义，我们把依赖于WebView的用于JavaScript与原生之间通信并实现了某种消息传输协议的工具称之为WebView JavaScript Bridge，简称JSBridge，它也是混合开发框架的核心。

混合应用的有点是动态内容是H5，web技术栈，社区及资源丰富，缺点是性能不好，对于复杂用户界面或动画，WebView不堪重任。

1.1.3 React Native、Weex及快应用

React Native（简称是RN）是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架React在原生移动应用平台的衍生产物，目前支持IOS和Android两个平台。RN使用JavaScript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

DOM树与控件树

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口，一种独立于平台和语言的方式访问和修改一个文档的内容和解构。换句话说，这是表示和处理一个HTML或XML文档的标准接口。简单来说，DOM就是文档树，与用户界面控件树对应，在前端开发中通常指HTML对应的渲染树，但广义的DOM也可以指Android中的XML布局文件对应的控件树，而术语DOM操作就是指直接来操作渲染树（或控件树），因此，可以看到其实DOM树和控件树是等价的概念，只不过前者常用于Web开发中，而后者常用于原生开发中。

响应式编程

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