APP开发

浅谈移动端开发技术

https://mp.weixin.qq.com/s/TXBRUVoOBDxr8P9Iw5FpTQ

Native App（原生APP）

优点

• 原生应用一般体验较好，性能比较高，可以提前把资源下载到本地，打开速度快
• 直接调用系统摄像头、通讯录、相册等功能，也可以访问到本地资源，功能强大

缺点

• 不支持动态化更新

• 研发成本高

  Web APP

  Web App 就是借助于前端 HTML5 技术实现的在浏览器里面跑的 App，简单来说就是一个 Web 网站
  优点

• 天然支持跨平台

• 上线发版也比较容易

缺点

• 只能使用浏览器提供的功能，无法使用手机上的一些功能。比如摄像头、通讯录、相册等等，局限性很大
• 也由于依赖于网络，加载页面速度会受到限制，体验较差

• 不像客户端一样在手机上有固定入口，会导致用户黏性比较低

  Hybrid App

  Hybrid App 是介于 Native 和 Web 之间的一些开发模式，一般称作混合开发。
  简单来说 Hybrid 就是套壳 App，整个 App 还是原生的，也需要下载安装到手机，但是 App 里面打开的页面既可以是 Web 的，又可以是原生的
  
  优点**

• Hybrid App 同时拥有 Native 和 Web 的优点，开发模式比较灵活

• 可以做到动态化更新，有 bug 直接更新线上 H5 页面就行了
• 也可以使用桥接（JS Bridge）来调用系统的摄像头、相册等功能，功能就不仅仅局限于浏览器了

缺点

• 加载速度比较慢
  • 离线包：将资源打包成一个zip文件到APP里面，APP解压文件，可提升资源的加载速度
  • 热更新：版本更新后，拉取差量部分的文件，diff后patch到原来的文件中
• 受制于 Web 的性能，在长列表等场景依然无法做到和原生一样的体验

  React Native

  Hybrid 中的 H5 始终是 WebView 中运行的，WebKit 负责绘制的。因为浏览器渲染的性能瓶颈，Facebook 基于 React 发布了 React Native 这个框架。
  由于 React 中 Virtual DOM 和平台无关的优势，理论上 Virtual DOM 可以映射到不同平台。在浏览器上就是 DOM，在 Native 里面就是一些原生的组件。
  受制于浏览器渲染的性能，React Native 吸取经验将渲染这部分交给 Native 来做，大大提高了体验。个人认为 React Native 也算是 Hybrid 技术的一种
  
  RN 中直接使用 JavaScriptCore 来提供 JS 的运行环境，通过 Bridge 去通知 Native 绘制界面，最终还是 Native 渲染的。
  所以性能上比 Hybrid 更好，但受限于 JS 和 Native 通信的性能消耗，性能上依然不及 Native。
  

Flutter

传统的跨端有两种，一种是 Hybrid 那种实现 JS 跑在 WebView 上面的，这种性能瓶颈取决于浏览器渲染。
另一种是将 JS 组件映射为 Native 组件的，例如 React Native、Weex，缺点就是依然需要 JS Bridge 来进行通信（老架构）。
Flutter 则是在吸取了 RN 的教训之后，不再去做 Native 的映射，而是自己用 Skia 渲染引擎来绘制页面，而 Skia 就是前面说过的 Chrome 底层的二维图形库，它是 C/C++ 实现的，调用 CPU 或者 GPU 来完成绘制。所以说 Flutter 像个游戏引擎。
Flutter 在语法上深受 React 的影响，使用 setState 来更新界面，使用类似 Redux 的思想来管理状态。从早期的 WPF，到后面的 React，再到后来的 SwiftUI 都使用了声明式 UI 的思想。

Flutter 架构图如下：

H5 移动端调试

https://mp.weixin.qq.com/s/MCsmKVQSUZDaDQuEiNLszg

移动端适配方案