Flutter 学习笔记

Flutter 框架学习

学习Flutter 首先我们要了解Flutter 框架是什么？他是解决什么问题？

Flutter 本身是Hybrid App，俗称混合应用，即混合了 Native技术与 Web技术进行开发的移动应用。在APP中使用 WebView 作为容器直接承载 Web页面，在他之前业界也有很多类似的解决方案

那Hybrid App又是什么

Hybrid App(混合模式移动应用)是指介于web-app、native-app这两者之间的app，兼具"Native App良好用户交互体验的优势"和"Web App跨平台开发的优势"。

混合开发中最核心的点就是 Native端与 H5端之间的双向通讯层，其实这里也可以理解为我们需要一套跨语言通讯方案，来完成 Native(Java/Objective-c/...) 与 JavaScript 的通讯。这个方案就是我们所说的 JSBridge，而实现的关键，便是作为容器的 WebView，一切的原理都是基于 WebView 的机制。

那么都有那些 Hybrid App(混合模式移动应用)呢？

业界方案

1、基于 WebView UI 的基础方案，市面上大部分主流 App 都有采用，例如微信JS-SDK，通过 JSBridge 完成 H5 与 Native 的双向通讯，从而赋予H5一定程度的原生能力。

2、基于 Native UI 的方案，例如 React-Native、Weex。在赋予 H5 原生API能力的基础上，进一步通过 JSBridge 将js解析成的虚拟节点树(Virtual DOM)传递到 Native 并使用原生渲染。

3、近期比较流行的小程序方案，通过更加定制化的 JSBridge，并使用双 WebView 双线程的模式隔离了JS逻辑与UI渲染，形成了特殊的开发模式，加强了 H5 与 Native 混合程度，提高了页面性能及开发体验。

4、Flutter：他是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。采用了高性能渲染引擎(Skia)，界面开发语言使用dart，底层渲染引擎使用C, C++，框架层面针对IOS和安卓平台分别实现了对应的UI风格组件库。相比webview渲染、nativeUI渲染，性能更加出色。由于推出不久，性能还不够稳定。

与Flutter不同传统的 Hybrid App(混合模式移动应用)都是依靠webview渲染、nativeUI渲染来完成大致都是如下两种方式

(一) JavaScript 调用 Native接口方式

基于WebView的机制和开放的 API, 实现这个功能有三种常见的方案：

1）、API注入，原理其实就是 Native 获取 JavaScript环境上下文，并直接在上面挂载对象或者方法，使 js 可以直接调用，Android 与 IOS 分别拥有对应的挂载方式。

2）、WebView 中的 prompt/confirm/alert 拦截，通常使用 prompt，因为这个方法在前端中使用频率低，比较不会出现冲突；

3）、WebView URL Scheme 跳转拦截；

4）、在IOS上wkwebview上有window.webkit.messageHandler实现通信，支持IOS8及以上

(二) Native 调用 Javascript接口方式

由于Native可以算作 H5 的宿主，因此拥有更大的权限，上面也提到了 Native 可以通过 WebView API直接执行 Js 代码。这样的权限也就让这个方向的通讯变得十分的便捷。

IOS: webview.stringByEvaluatingJavaScriptFromString("alert('NativeCall')")

Android: webView.loadUrl("javascript:JSBridge.trigger('NativeCall')")

Flutter

Flutter是Google推出并开源的移动应用程序（App）开发框架，主打跨平台、高保真、高性能。其采用Dart语言作为开发语言，开发者可以通过Dart语言开发Flutter App，一套代码可同时运行在iOS和Android平台上。Flutter提供了丰富的组件、接口，开发者可以很快地为Flutter添加原生扩展。

Flutter与其他用于构建App的大多数框架不同，因为Flutter既不使用WebView，也不使用平台（Android、iOS等）的原生控件。相反，Flutter使用自己的高性能渲染引擎来绘制Widget。这样不仅可以保证在Android和iOS平台上UI的一致性，而且也可以避免对原生控件依赖而带来的限制及高昂的维护成本，相比于其他方式，Flutter 更注重的是移动端跨平台方案

在传统的原生开发中，一般都要维护Android、iOS两个开发团队，版本迭代时，无论人力成本，还是测试成本都会变大。这一点可能对于我们普通的android程序员感受并不深，或者说我们不care这一点。

但是站在开发的角度上，如果能够有一套代码，直接就能够开发出android的apk和ios的ipa，一套代码也能够很好的完成复用、测试以及UI风格的统一。

早在2008年，就有一款叫做“PhoneGap”的框架获了奖并开始支持Android平台。现在我们说的PhoneGap一般指的是"Cordova"。它是PhoneGap贡献给Apache后的开源项目，是从PhoneGap中抽离出的核心代码，是驱动PhoneGap的核心引擎。

两者维护的是共同的一份源代码组件，只有名字和包名不一样。PhoneGap是一个采用HTML，CSS和JavaScript来完成跨平台开发的技术，当时PhoneGap宣称接近原生性能。然而它的工作原理是基于WebView，然后利用JavaInterface来完成与原生代码的交互。我们称这种工具为WebView JavaScript Bridge(JsBridge)。这种方式，能够很好的解决跨平台与动态更新的需求。

但是我们都知道android WebView的渲染效率很差，同时JavaScript是解释型语言，它不需要编译，在运行时候解释执行，这就导致JavaScript的执行性能太低了。同时因为android自身的问题，使用WebView过程中消耗的内存，没有办法在不需要使用的时候进行及时的回收，这样会导致我们的可用内存越来越少，最终OOM。所以类似Flutter这种框架的出现是必然的，现有的跨平台框架，比如RN都是基于JS，由于JS的执行性能，导致跨平台应用性能一直无法突破瓶颈。

而Flutter在Debug使用JIT编译，支持热重载，能够提高我们的开发效率，而Release中利用AOT直接编译成机器码，能够达到更好的性能。从设计角度而言，Flutter提供了非常丰富的Widget组件，能够让我们非常轻松的实现Android或者IOS风格的UI效果。