一、WebApp、Hybrid App、NativeApp介绍与对比
目前主流应用程序大体分为三类：Web App、HybridApp、 NativeApp。如下图所示：
首先，我们来看看什么是 Web App、HybridApp、 NativeApp。
1.Web APP例子：京东http://m.jd.com/
Web App指采用Html5语言写出的App，不需要下载安装。类似于现在所说的轻应用。生存在浏览器中的应用，基本上可以说是触屏版的网页应用。 优点 （1）开发成本低 （2）更新快 （3）更新无需通知用户，不需要手动升级 （4）能够跨多个平台和终端 缺点： （1）临时性的入口 （2）无法获取系统级别的通知，提醒，动效等等 （3）用户留存率低 （4）设计受限制诸多 （5）体验较差
下图是WebAPP受到的限制：
在设计Web APP时，应当遵循以下几点： 1. 简化 o 简化不重要的动画/动效 o 简化复杂的图形文字样式
2. 少用 o 少用手势，避免与浏览器手势冲突 o 少用弹窗
3. 减少 o 减少页面内容 o 减少控件数量 o 减少页面跳转次数，尽量在当前页面显示
4. 增强 o 增强Loading时的趣味性 o 增强页面主次关系 o 增强控件复用性
2.Hybrid App例子：淘宝、饿了么、京东、QQ、微信等等。
HybridAPP指的是半原生半Web的混合类App。需要下载安装，看上去类似NativeApp，但只有很少的UI WebView，访问的内容是 Web 。 例如Store里的新闻类APP，视频类APP普遍采取的是Native的框架，Web的内容。 HybridApp 极力去打造类似于NativeApp 的体验，但仍受限于技术，网速，等等很多因素。尚不完美。
3.Native App
NativeAPP 指的是原生程序，一般依托于操作系统，有很强的交互，是一个完整的App，可拓展性强。需要用户下载安装使用。 优点： （1）打造完美的用户体验 （2）性能稳定 （3）操作速度快，上手流畅 （4）访问本地资源（通讯录，相册） （5）设计出色的动效，转场， （6）拥有系统级别的贴心通知或提醒 （7）用户留存率高 缺点： （1）分发成本高（不同平台有不同的开发语言和界面适配） （2）维护成本高（例如一款App已更新至V5版本，但仍有用户在使用V2， V3， V4版本，需要更多的开发人员维护之前的版本，不然旧版本出问题了，用户可能就不用了） （3）更新缓慢，根据不同平台，提交–审核–上线 等等不同的流程，需要经过的流程较复杂
二、技术特性对比 由上图可见，WebAPP 的开发基于Html5语言。而Html5语言本身又有着不可避免的局限性。正是这些局限性的存在，使得Web App在体验中要逊于NativeApp。
三、HybridApp开发中Android与H5（JS）交互 既然混合APP现在这么流行，开发成本、体验都是开发技术中的首选，那么我们有必要来学习一下。
Android中使用HTML开发的核心是使用WebView、原生API与JS的交互。
Android与HTML5的交互有2种情况：
1.Android原生API 调用HTML页面中的JS代码
2.HTML页面中的JS代码调用Android原生API
为什么需要交互？因为HTML说到底只不过是一个静态的Layout，只有与原生API进行交互才能开发我们需要的功能。
下面开始介绍主要的核心步骤：
1.设置webView允许执行JS脚本：
webSettings.setJavaScriptEnabled(true);
2.添加通信接口（注意：InterfaceName要与JS中的名字一致）
webView.addJavascriptInterface(Interface,”InterfaceName”)
3. JS调用Android
InterfaceName.MethodName
4. Android调用JS（参数可以通过+“”+来拼接）
webView.loadUrl("javascript:functionName()");
例子代码：
/** * 初始化WebView */ private void initWebView() { WebSettings settings = wv_detail.getSettings(); //可以执行JS settings.setJavaScriptEnabled(true); //不阻塞网络图片 settings.setBlockNetworkImage(false); //使能缓存 settings.setAppCacheEnabled(true); appInterface = newAppInterface(this); //添加JS接口 wv_detail.addJavascriptInterface(appInterface, "appInterface"); //添加监听 wv_detail.setWebViewClient(new MyWebViewClient()); wv_detail.loadUrl(Constants.URL_GOOD_DETAIL); } /** * Android与JS通信的接口 */ class AppInterface { private Context mCtx; public AppInterface(Context mCtx) { this.mCtx = mCtx; } //Android调用JS @JavascriptInterface public void showDetail(final long goodId) { runOnUiThread(new Runnable() { @Override public void run() { wv_detail.loadUrl("javascript:showDetail(" + goodId + ")"); } }); } //JS调用Android，这里只是在Android端写好的方法 @JavascriptInterface public void buy(long goodId) { //做你需要做的事情 } // } /** * 监听 */ class MyWebViewClient extends WebViewClient { //页面有链接点击时候调用 @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { //自定义功能 if (url.startsWith("nan://.....")) { //自定义功能，比如打电话，等 } return super.shouldOverrideUrlLoading(view, url); } //页面加载完毕调用（因为JS有些方法需要在页面加载完毕的时候才能调用，不然没效） @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); appInterface.showDetail(mGood.getId()); } }
下面给出HTML中的JS代码：
<script> $(function(){ $("#btnBuy").click(function(){ var id = $("#txtWareId").val(); //JS调用Android中的方法 window.appInterface.buy(id); }); }) //被Android调用的方法 function showDetail(id){ $("#txtWareId").val(id); $.ajax({ url:"get?id="+id, success:function(ware){ $("#ware_name").html(ware.name); $("#ware_img").attr("src",ware.imgUrl); $("#ware_price").html("￥ "+ware.price); $("#ware_sale_quantity").html(ware.sale); } }) } </script>
四、结束语 好了，今天的笔记就到这里了，今天大年初一，楠妹妹祝大家猴年大吉O(∩_∩)O~~！至于高级的话，我们还需要去了解WebView的优化，学习前端的开发技术，WebViewClient与WebChromeClient的使用与区别，等等。
WebViewClient与WebChromeClient的区别：
WebViewClient主要帮助WebView处理各种通知、请求事件的
WebChromeClient主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等。
看上去他们有很多不同，实际使用的话，如果你的WebView只是用来处理一些html的页面内容，只用WebViewClient就行了，如果需要更丰富的处理效果，比如JS、进度条等，就要用到WebChromeClient。
| 
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
淘帖
顶
踩
