跨端开发
APP 的三种开发方式
Native App
原生，需要安装app，质量高
但有 ios 和 安卓 两套系统，开发成本高
Web App
就是基于浏览器的 app，开发速度快，成本低
代码放在服务器中，用户不需要手动更新
不同浏览器效果不一样
前端技术没有办法实现所有原生功能
H5 与 Native 的区别
| name | H5 | Native |
|---|---|---|
| 稳定性 | 调用系统浏览器内核，稳定性较差 | 使用原生内核，更加稳定 |
| 灵活性 | 版本迭代快，上线灵活 | 迭代慢，需要应用商店审核，上线速度受限制 |
| 受网速 影响 | 较大 | 较小 |
| 流畅度 | 有时加载慢，给用户“卡顿”的感觉 | 加载速度快，更加流畅 |
| 用户体验 | 功能受浏览器限制，体验有时较差 | 原生系统 api 丰富，能实现的功能较多，体验较好 |
| 可移植性 | 兼容跨平台跨系统，如 PC 与 移动端，iOS 与 Android | 可移植性较低，对于 iOS 和 Android 需要维护两套代码 |
Hybrid App
混合应用
Hybrid 开发
分工
前端：绝大多数页面和业务
原生：封装原生功能，供前端调用
两者如何结合？
利用原生中一个非常强大的浏览器 Web View，既可以使用 Web API，也可以使用原生 API，将前端页面运行在 Web View 中。
框架
框架的作用：
1.提供前端运行环境 Web View
2.实现前端与原生交互
3.封装原生功能，提供插件机制
有哪些框架
Cordova
混合应用开发平台：
只要前端就能开发，普通的原生需求内部都已经实现好了，扩展原生需求，使用其提供的插件平台或插件生态。
还有一些其它框架：React Native（可将前端代码编译成原生代码）、INOIC、Weex、NativeScript、Flutter
使用场景
ui 要求不高，功能导向
快速开发
JSBridge
使用框架时，我们可以直接利用框架提供的方法来调用原生方法。
不适用框架时，我们可以使用 JSBridge 来进行跨端通信。
用途
给 JavaScript 提供调用 Native 功能的接口，让混合开发中的『前端部分』可以方便地使用地址位置、摄像头甚至支付等 Native 功能。
它的核心是 构建 Native 和非 Native 间消息通信的通道，而且是 双向通信的通道。
JS 向 Native 发送消息 : 调用相关功能、通知 Native 当前 JS 的相关状态等。
Native 向 JS 发送消息 : 回溯调用结果、消息推送、通知 JS 当前 Native 的状态等。
JS 调用 Native
注入 API
注入 API 方式的主要原理是，通过 WebView 提供的接口，向 JavaScript 的 Context（window）中注入对象或者方法，让 JavaScript 调用时，直接执行相应的 Native 代码逻辑，达到 JavaScript 调用 Native 的目的。
总之，无论是 ios（UIWebView 还是 WKWebView） 还是 安卓（WebView） ，拿到 API 直接调用就完事了。
1 | |
拦截 URL SCHEME
URL SCHEME是一种类似于url的链接，是为了方便app直接互相调用设计的，形式和普通的 url 近似，主要区别是 protocol 和 host 一般是自定义的，例如: qunarhy://hy/url?url=ymfe.tech，protocol 是 qunarhy，host 则是 hy。
拦截 URL SCHEME 的主要流程是：Web 端通过某种方式（例如 iframe.src）发送 URL Scheme 请求，之后 Native 拦截到请求并根据 URL SCHEME（包括所带的参数）进行相关操作。
缺陷：
使用 iframe.src 发送 URL SCHEME 优 URL 长度的隐患
创建请求需要一定耗时
Native 调用 JS
Native 调用 JavaScript，其实就是执行拼接 JavaScript 字符串，从外部调用 JavaScript 中的方法，因此只要 H5 将 JS 方法暴露在 Window 上给 Native 调用即可。（闭包里的方法，JavaScript 自己都调用不了，更不用想让 Native 去调用了）
JSBridge 的引入
H5 引入
采用本地引入 npm 包的方式进行调用。
优点：JavaScript 端可以确定 JSBridge 的存在，直接调用即可；
缺点：如果桥的实现方式有更改，JSBridge 需要兼容多版本的 Native Bridge 或者 Native Bridge 兼容多版本的 JSBridge。
Native 引入
优点：桥的版本很容易与 Native 保持一致，Native 端不用对不同版本的 JSBridge 进行兼容；
缺点：注入时机不确定，需要实现注入失败后重试的机制，保证注入的成功率，同时 JavaScript 端在调用接口时，需要优先判断 JSBridge 是否已经注入成功。