我正在参加「掘金·启航计划」
为什么要有跨端开发
因为前端当下需要处理的场景实在是太多了：android、ios、pc、小程序，甚至智能手表、车载电视等，当某几个场景非常相似的时候，我们希望能够用最少的开发成本来达到最好的效果，而不是每个端都需要一套单独的人力来进行维护，所以跨端技术就诞生了。
何为原生
在了解跨端技术之前我们要先了解一下什么是原生开发。原生应用程序是指某一个移动平台（比如iOS或安卓）所特有的应用，使用相应平台支持的开发工具和语言，并直接调用系统提供的SDK API。比如Android原生应用就是指使用Java或Kotlin语言直接调用Android SDK开发的应用程序；而iOS原生应用就是指通过Objective-C或Swift语言直接调用iOS SDK开发的应用程序。原生开发有以下主要优势：
- 可访问平台全部功能（GPS、摄像头）；
- 速度快、性能高、可以实现复杂动画及绘制，整体用户体验好；
主要缺点：
- 平台特定，开发成本高；不同平台必须维护不同代码，人力成本随之变大；
- 内容固定，动态化弱，大多数情况下，有新功能更新时只能发版；
跨端技术简介
针对原生开发面临的问题，业界一直都在努力寻找好的解决方案，而时至今日，已经有很多跨端框架根据其原理，主要分为四类：
- H5+原生 (Cordova、Ionic)
- JavaScript开发+原生渲染 (React Native、Weex)
- 自绘UI + 原生 (Qt for mobile、Flutter)
- 另类跨端 (taro、uni-app、remax)
今天主要是围绕H5+原生即我们常说的Hybrid开发来介绍。
Hybird技术简介
H5+原生
Hybird即我们所说的混合开发，其原理就是频繁动态更新的内容是通过H5开发，然后借助客户端的原生网页加载控件WebView(Android)或WKWebView(IOS)(后统称WebView)。这种解决方案H5可以随时修改发版，不受APP发布审核限制；同时H5开发一次可以在三个平台运行，可以同时在Android、IOS、浏览器中运行，可以降低开发成本。H5开发所占比例越大开发成本越小，如果一个APP功能大部分是H5开发的那我们可以称之为Web App。
混合开发的实现
H5在App中运行拥有各种Native的能力，但是我们通过上面了解到H5是运行在App的WebView中的，本质上还是运行在一个隔离沙箱中。所以拥有调用Native的能力就不得不提到WebView JavaScript Bridge，也就是我们常提到的JSBridge，这也是混合开发的核心。一般会是Native在原生代码中开发一些调用原生功能的API，然后将API暴露给WebVIew供JavaScript调用。因此Native和JavaScript之间就需要一个通信的桥梁，就是JSBridge。它主要负责JavaScript和Native的消息传递和提供一个标准的协议和消息格式。
示例
Android实现一个Bridge
class NativeBridge {
private Context ctx;
NativeBridge(Context ctx) {
this.ctx = ctx;
}
// 增加JS调用接口
@JavascriptInterface
public void showNativeDialog(String text) {
new AlertDialog.Builder(ctx).setMessage(text).create().show();
}
}
客户端注入Bridge
webView.addJavascriptInterface(new NativeBridge(this), "NativeBridge");
H5调用
window.NativeBridge.showNativeDialog('hello');
小结
混合应用的优点是：动态内容可以用 H5开发，而H5是Web 技术栈，Web技术栈生态开放且社区资源丰富，整体开发效率高。缺点是性能体验不佳，对于复杂用户界面或动画，WebView 有时会不堪重任。
