Hybrid-APP技术原理源宝导读：Hybrid-APP技术不仅具

源宝导读：Hybrid-APP技术不仅具有“NativeAPP的良好交互体验”同时也具备“WebAPP跨平台开发的优势” 。既然Hybrid-APP有这么多优势，那么究竟什么样的APP才算HybridApp呢？本文将分享我们的技术研究成果。
一、什么是Hybrid-APP
也是现在大家普遍认知的， Hybrid就是一种给WebView增加一些js通信可以调用原生API的方式。广义Hybrid：前端的开发思路与客户端原生的开发思路相结合。通过原生的配合，把原本jsor前端开发做不到的事情做到了，用原生的方式增强了原本的前端技术能力。 WebView+Bridge、RN、weex、小程序。我能否认为，只要是前端的开发思路与客户端原生的开发思路相结合，就认为他是一种Hybrid？
通过原生的配合，把原本jsor前端开发做不到的事情做到了，用原生的方式增强了原本的前端技术能力，是否就是一种Hybrid？
无论是WebView+Bridge也好， RN类似的原生渲染框架也好，小程序也好，某种意义上讲，他们都算Hybrid？
Hybrid框架-基本能力
接下来我们来看一下，一个Hybrid框架所需要具备的基本能力：
跨平台能力。这也是Hybrid应用与原生应用相比最大的优点，一次编写随处运行。
灵活的业务模块扩展能力。良好的调用原生功能的能力。由于在APP中有些功能必须由原生端提供，所以还需要有良好的调用原生功能的能力。
快速更新迭代的能力。使用原生技术开发的APP每次更新都需要上传应用商店审核，但是使用Hybrid技术开发的应用可以绕过应用商店实现热更新。
二、Hybrid-APP中通信方案
在HybridAPP中最核心的技术就在于前端与客户端如何通信，接下来我们看一下， js与native之间是如何通信的。
2.1、JS调用Native的几种方法
假跳转的请求拦截A标签跳转。原地跳转。 iframe跳转。弹窗拦截alertpromptconfirmJS上下文注入苹果JavaCore注入。安卓addJavaInterface注入。苹果MessageHandler注入。 evaluatingJava直接注入执行JS代码JS是一个脚本语言，任何一个JS引擎都可以在任意时机直接执行JS代码，我们可以把任何Native想要传递的消息/数据直接写进JS代码中。
loadUrl浏览器用’java:’+JS代码做跳转地址在浏览器中，可以直接用’java:xxxx’来简单的执行一些JS代码，这个方法只有安卓可以用，因为iOS必须先将url字符串生成Request再交给webview去load
WKUserWKWebView的addUser方法WKWebView官方提供了一个Api ，可以让WebView在加载页面的时候，自动执行注入一些预先准备好的JS
2.2.1、假跳转的请求拦截
假跳转的请求拦截就是由网页发出一条新的跳转请求，跳转的目的地是一个非法的压根就不存在的地址。

文章图片
客户端会无差别拦截所有请求，真正的url地址应该照常放过，只有协议域名匹配的url地址才应该被客户端拦截，拦截下来的url不会导致webview继续跳转错误地址，因此无感知，相反拦截下来的url我们可以读取其中路径当做指令，读取其中参数当做数据，从而根据约定调用对应的native原生代码。
JS发起调用JS其实有很多种方式发起假请求，跟发起一个新请求没啥两样，只要按协议约定生成假请求地址，正常的发起跳转即可，任何一种方式都可以让客户端拦截住。
客户端拦截安卓的拦截方式：shouldOverrideUrlLoading 。 UIWebView的拦截方式：webView:shouldStartLoadWithRequest:navigationType 。 WKWebView的拦截方式：webView:decidePolicyForNavigationAction:decisionHandler 。

文章图片
2.2.2、弹窗拦截
JS发起调用可以使用alert/confirm/prompt三种弹框，每种弹框都可以由JS发出一串字符串，用于展示在弹框之上，而此字符串恰巧就是可以用来传递数据，我们把所有要传递通讯的信息，都封装进入一个js对象，然后生成字典，最后序列化成json转成字符串。
客户端拦截安卓的拦截方式：onJsPrompt 。 UIWebView的拦截方式：不支持截获任何一种弹框。 WKWebView的拦截方式：webView:runJavaTextInputPanelWithPrompt:balbala 。

文章图片
2.2.3、苹果UIWebviewJavaCore注入
客户端注入UIWebView可以通过KVC的方法，直接拿到整个WebView当前所拥有的JS上下文documentView.webView.mainFrame.javaContext 。
拿到了JSContext ，一切的使用方式就和直接操作JavaCore没啥区别了，我们可以把任何遵循JSExport协议的对象直接注入JS ，让JS能够直接控制和操作。