:移动开发简介

一、什么是原生开发：

原生应用程序是指某一个移动平台（比如iOS或安卓）所特有的应用，使用相应平台支持的开发工具和语言，并直接调用系统提供的SDK API。

如：

Android：使用Java或Kotlin语言调用系统提供的SDK API

iOS：通过Objective-C或Swift语言直接调用iOS SDK开发的应用程序

二、原生与H5相比较的优势和劣势

优势：

1.可访问平台全部功能（GPS、摄像头）；

2.速度快、性能高、可以实现复杂动画及绘制，整体用户体验好；

动画体验：IOS > Android  >  H5

劣势：

3.内容固定，动态化弱，大多数情况下，有新功能更新时只能发版；

4.开发成本高；不同平台必须维护不同代码

三、原生与H5相结合的产物：Hybrid

Hybrid框架主要原理就是将APP的一部分需要动态变动的内容通过H5来实现，通过原生的网页加载控件WebView (Android)或WKWebView（iOS）来加载，H5部分是可以随时改变而不用发版，满足动态化需求。混合框架一般都会在原生代码中预先实现一些访问系统能力的API， 然后暴露给WebView以供JavaScript调用，这样一来，WebView就成为了JavaScript与原生API之间通信的桥梁，主要负责JavaScript与原生之间传递调用消息，而消息的传递必须遵守一个标准的协议，它规定了消息的格式与含义，我们把依赖于WebView的用于在JavaScript与原生之间通信并实现了某种消息传输协议的工具称之为WebView JavaScript Bridge, 简称 JsBridge，它也是混合开发框架的核心。

例子：Js调用Native需要对WebView设置@JavascriptInterface注解

Hybrid分类：

Hybrid-web：一次编码，到处运行

Cordova:   老牌框架Cordova，也是一个比较重的框架,  它的性能瓶颈就是在于webview的性能，如果像Android 4.1以下的webview性能并不是很好。

Ionic：Ionic的UI比Cordova要好的多的，很控件都封装好了用起来非常方便。但Ionic最后打包还是用的Cordova打包的，其基于angularjs，之前处于一个不稳定的状态，更新换代的兼容问题

Hybrid-Native: 

react-native 所有的标签都不是真实控件，JS代码中所写控件的作用，类似 Map 中的 key 值。JS端通过这个 key 组合的 Dom ，最后Native端会解析这个 Dom ，得到对应的Native控件渲染，如 Android 中标签对应ViewGroup 控件（react和react-native两者主要的区别React中虚拟DOM最终会映射为浏览器DOM树，而RN中虚拟DOM会通过 JavaScriptCore 映射为原生控件树。）

缺点：

官方说得很隐晦：learn once, write anywhere。人家可没说run anywhere。目前很多ui组件只有ios的实现，android的需要自己实现。如SliderIOS，SwitchIOS..等等这些控件，也就是很可能针对不同的平台会需要写多套代码。

小程序派&快应用：Taro、WePY 、uni-app 、 mpvue 、 chameleon

以上解决方案的缺点：

1.渲染时需要JavaScript和原生之间通信，在有些场景如拖动可能会因为通信频繁导致卡顿。

2.JavaScript为脚本语言，执行时需要JIT(Just In Time)，执行效率和AOT(Ahead Of Time)代码仍有差距。

注：目前，程序主要有两种运行方式：静态编译与动态解释。静态编译的程序在执行前全部被翻译为机器码，通常将这种类型称为AOT （Ahead of time）即 “提前编译”；而解释执行的则是一句一句边翻译边运行，通常将这种类型称为JIT（Just-in-time）即“即时编译”。AOT程序的典型代表是用C/C++开发的应用，它们必须在执行前编译成机器码，而JIT的代表则非常多，如JavaScript、python等

3.由于渲染依赖原生控件，不同平台的控件需要单独维护，并且当系统更新时，社区控件可能会滞后；除此之外，其控件系统也会受到原生UI系统限制

主角flutter：自绘UI+原生

Flutter是Google发布的一个用于创建跨平台、高性能移动应用的框架。Flutter没有使用原生控件，相反都实现了一个自绘引擎，使用自身的布局、绘制系统。

优势：

1.跨平台自绘引擎

1.1 Flutter与用于构建移动应用程序的其它大多数框架不同，因为Flutter既不使用WebView，也不使用操作系统的原生控件。 相反，Flutter使用自己的高性能渲染引擎来绘制widget。这样不仅可以保证在Android和iOS上UI的一致性，而且也可以避免对原生控件依赖而带来的限制及高昂的维护成本。

1.2 Flutter使用Skia作为其2D渲染引擎，Skia是Google的一个2D图形处理函数库，包含字型、坐标转换，以及点阵图都有高效能且简洁的表现，Skia是跨平台的，并提供了非常友好的API，目前Google Chrome浏览器和Android均采用Skia作为其绘图引擎。

2.高性能

2.1 首先，Flutter APP采用Dart语言开发。Dart在 JIT（即时编译）模式下，速度与 JavaScript基本持平。但是 Dart支持 AOT，当以 AOT模式运行时，JavaScript便远远追不上了。速度的提升对高帧率下的视图数据计算很有帮助

2.2 其次，Flutter使用自己的渲染引擎来绘制UI，布局数据等由Dart语言直接控制，所以在布局过程中不需要像RN那样要在JavaScript和Native之间通信，这在一些滑动和拖动的场景下具有明显优势，因为在滑动和拖动过程往往都会引起布局发生变化，所以JavaScript需要和Native之间不停的同步布局信息

注：

底下两层（Foundation和Animation、Painting、Gestures）在Google的一些视频中被合并为一个dart UI层，对应的是Flutter中的dart:ui包，它是Flutter引擎暴露的底层UI库，提供动画、手势及绘制能力。

Rendering层，这一层是一个抽象的布局层，它依赖于dart UI层，Rendering层会构建一个UI树，当UI树有变化时，会计算出有变化的部分，然后更新UI树，最终将UI树绘制到屏幕上，这个过程类似于React中的虚拟DOM。Rendering层可以说是Flutter UI框架最核心的部分，它除了确定每个UI元素的位置、大小之外还要进行坐标变换、绘制(调用底层dart:ui)。

Widgets层是Flutter提供的的一套基础组件库，在基础组件库之上，Flutter还提供了 Material 和Cupertino两种视觉风格的组件库。而我们Flutter开发的大多数场景，只是和这两层打交道。

三、搭建Flutter开发环境

1.系统要求：

1.1操作系统: macOS (64-bit)

1.2.磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间）.

1.3.工具: Flutter 依赖下面这些命令行工具：bash、mkdir、rm、git、curl、unzip、which

2.获取Flutter SDK

注意：

1.去flutter官网下载其最新可用的安装包，官网地址：https://flutter.io/sdk-archive/#macos

2.解压安装包到你想安装的目录

3.打开.bash_profile文件：

open -e .bash_profile

//由于在国内访问Flutter可能会受到限制，Flutter官方为中国开发者搭建了临时镜像exportPUB_HOSTED_URL=https://pub.flutter-io.cn

exportFLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

exportPATH=${PATH}:/Users/liangshuo/development/flutter/bin:$PATH

source .bash_profile

终端直接输入 flutter，没有提示该命令找不到，则配置成功

运行flutter doctor：在Flutter命令行运行如下命令来查看是否还需要安装其它依赖，如果需要，安装它们：

准备工作：

Xcode

1.安装Xcode 9.0或更新版本  苹果应用商店

2.配置Xcode命令行工具以使用新安装的Xcode版本

3.确保Xcode许可协议是通过打开一次Xcode或通过命令sudo xcodebuild -license同意过了

Cocoapods: IOS的包管理工具     坑套着坑，各种版本兼容性问题

坑1:  最新的pod版本和ruby的版本兼容性有问题, 所以必须先升级ruby, 才能升级pod成功

坑2：ruby升级不上去，查询地址：githubusercontent.com 的IP地址， sudo vim /etc/hosts

坑3：rvm ===> \curl -sSL https://get.rvm.io | bash -s stable   类似于NVM的版本管理工具

。。。。。。

os x 10.11或以上: sudo gem install -n /usr/local/bin cocoapods

安装成功如下图：

四、Dart语言简介

Dart的设计目标应该是同时借鉴了Java和JavaScript。Dart在静态语法方面和Java非常相似，如类型定义、函数声明、泛型等，而在动态特性方面又和JavaScript很像，如函数式特性、异步支持等。除了融合Java和JavaScript语言之所长之外，Dart也具有一些其它具有表现力的语法，如可选命名参数、..（级联运算符）和?.（条件成员访问运算符）以及??（判空赋值运算符）。其实，对编程语言了解比较多的读者会发现，在Dart中其实看到的不仅有Java和JavaScript的影子，它还具有其它编程语言中的身影，如命名参数在Objective-C和Swift中早就很普遍，而??操作符在PHP 7.0语法中就已经存在了，因此我们可以看到Google对Dart语言给予厚望，是想把Dart打造成一门集百家之所长的编程语言。

1.变量声明:  var（不可变类型）,   dynamic和Object（基类，可变）, final和const（常量）

2.函数：Dart是一种真正的面向对象的语言，所以即使是函数也是对象，并且有一个类型Function。这意味着函数可以赋值给变量或作为参数传递给其他函数，这是函数式编程的典型特征。

3.异步支持 Future（类似promise：Future.then，Future.catchError，Future.whenComplete，Future.wait），Async/await，Stream（可以接收多个异步操作的结果：常用于会多次读取数据的异步任务场景，如网络内容下载、文件读写）

VSCODE

1.安装插件

Dart和Flutter

2.创建flutter项目

flutter create my_app

3.链接IOS模拟器

open -a Simulator

4.运行 flutter run启动flutter应用程序。

flutter run

my_app

1.示例代码讲解

在Flutter中几乎所有的对象都是一个Widget，不仅可以表示UI元素，也可以表示一些功能性的组件如：用于手势检测的 GestureDetector widget、用于APP主题数据传递的Theme等等，而原生开发中的控件通常只是指UI元素。

2.路由

3.包管理

4.资源管理

5.调试

print、debugPrint、flutter logs