目前市场流行的三类App特点、H5与原生之间的交互流程

一、目前市场主要流行的有NativeApp、WebApp、HybridApp三大类App

NativeApp(IOS、Android)
特点：纯工具类的App; 例如微信客户端
优点：运行稳定、用户粘度高、体验强、性能好、能操作手机硬件接口
缺点：不能支持热更新、需要发版、会带来很大的网络下载和存储负担、需要维护多个版本

WebApp(移动M站 采用zepto、vue/react实现)
特点：主要运行在浏览器上
优点：跨平台、支持热更新（但是值得注意的是浏览器缓存问题）、不需要在app store下载，同时也不需要多版本开发和维护
缺点：性能差、不能操作手机硬件接口、没有用户粘性

HybridApp
特点：是将WebApp嵌入到NativeApp中，是通过WebView去实现。内部可以通过JSBridge来调用原生接口，从而实现调原生设备功能

二、H5与原生之间的交互流程
h5与原生之间的交互流程：Native(Object-或者Swift)调用JS方法;Native调用JS语言，是通过UIWebView组件stringByEvaluatingJavaScriptFromString方法来实现的。该方法返回JS脚本的执行结果；如下所示：

*//Swift*
webview.stringByEvaluatingJavaScriptFromString("alert(aaa)")
*//OC*
[webView  stringByEvaluatingJavaScriptFromString:@"Math.randim();"];

它其实就是调用了Window下的一个对象，如果我们要让native来调用我们js写的方法，那这个方法就要在window下可以访问到。

方法一：

 javascript调用Native，并没有现成的API可以拿来用，而是需要间接地通过一些方法来实现。UIWebView有个特性：UIWebView内发起的所有网络请求，都可以通过delegate函数在Native层得到通知。如图：

jsbridge://methodName?paraml=value¶m2=value2

//使用iframe方式，以唤起Native   App的分享组件为例，简单的封装如下
var   url="jsbridge://doAction?title=分享标题&desc=分享描述&link=http%3A%2Fwww.baidu.com";
var  iframe=document.createElement('iframe');
iframe.style.width='1px';
iframe.style.height='1px'
iframe.style.display='none';
iframe.src=url;
document.body.appendChild(iframe);
setTimeout(function(){
iframe.remove();
},100)

方法二：
定义好JS需要调用的方法，例如JS要调用shall方法：
则可以在UIWebView加载url完成后，在其代理方法中添加要调用的shall方法，这样的话web页面中就可以直接使用到这个方法：

function    second(){
shall("分享的标题","分享的内容","图片地址")
}
...