概述
目前主流应用程序大体分为三类
Web App
Web App是指采用Html5语言写出的App，不需要下载安装，类似于现在所说的轻应用，存在于浏览器中的应用，基本上可以说是触屏版的网页应用。
优点
- 开发成本低
- 更新快
- 更新无需通知用户，不需要手动升级
- 能够跨多个平台和终端
缺点
- 临时性的入口
- 无法获取系统级别的通知，提醒，动效等
- 用户留存率低
- 设计受限制诸多
- 体验较差
Hybrid App
Hybrid App是半原生，半Web的混合类App。 需要下载安装，看上去类似NativeApp，但是只有很少的UI，大多用WebView，访问的内容是Web。
Native App
Native APP指的是原生程序，一般依托于操作系统，有很强的交互，是一个完整的App，可拓展性强。需要用户下载安装使用。
优点
- 打造完美的用户体验
- 性能稳定
- 操作速度快，上手流畅
- 访问本地资源（通讯录，相册）
- 设计出色的动效，转场，
- 拥有系统级别的贴心通知或提醒
- 用户留存率高
缺点
- 分发成本高（不同平台有不同的开发语言和界面适配）
- 维护成本高（例如一款App已更新至V5版本，但仍有用户在使用V2， V3， V4版本，需要更多的开发人员维护之前的版本，不然旧版本出问题了，用户可能就不用了）
- 更新缓慢，根据不同平台，提交–审核–上线 等等不同的流程，需要经过的流程较复杂
三者对比
Hybrid App开发中Android与H5（JS）交互
准备工作
- 打开assets中的Html。
mWebView = (WebView) findViewById(R.id.webview_test); mWebView.loadUrl("file:///android_asset/index.html");
- 打开SD卡中的Html
mWebView = (WebView) findViewById(R.id.webview_test); mWebView.loadUrl(“content://com.android.htmlfileprovider/sdcard/index.html”);
- 打开服务端指定Url的Html。
mWebView = (WebView) findViewById(R.id.webview_test); mWebView.loadUrl(“http://www.baidu.com”);
Android与Html的交互，实际就是与Js的交互。
分两种情况，原生调用Js，Js调用原生。
配置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>测试网站</title> <script type="text/javascript"> function test(){ var name = document.getElementById("textName").value app.sayHello(name) <!--Js调用原生--> } <!--原生调用Js--> function showName(name){ document.getElementById("textName").value = name; } </script> </head> <body> <input id="textName"> <br/> <hr> <button onclick="test()">测试</button> </body> </html>
mWebView.loadUrl("file:///android_asset/index.html"); mWebView.getSettings().setJavaScriptEnabled(true); //开启支持JavaScript mWebAppInterface = new WebAppInterface(); //设置和原生和Js交互的接口 //参数：接口类，Js调用原生时需要的引用名（自定义命名） mWebView.addJavascriptInterface(mWebAppInterface, "app");
交互接口
class WebAppInterface { /** * Js 调用原生 */ @JavascriptInterface //一定加注解否则可能会报错 public void sayHello(String name) { if (!TextUtils.isEmpty(name)) { Toast.makeText(MainActivity.this, name, Toast.LENGTH_SHORT).show(); } } /** * 原生调用Js */ public void showName(String name) { mWebView.loadUrl("javascript:showName('" + name + "')"); } }
完整交互代码
private void initView() { mWebView = (WebView) findViewById(R.id.webview_test); btn_test = (Button) findViewById(R.id.btn_test); mWebView.loadUrl("file:///android_asset/index.html"); mWebView.getSettings().setJavaScriptEnabled(true); //开启支持JavaScript mWebAppInterface = new WebAppInterface(); //设置和原生和Js交互的接口 //参数：接口类，Js调用原生时需要的引用名（自定义命名） mWebView.addJavascriptInterface(mWebAppInterface, "app"); btn_test.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mWebAppInterface.showName("测试"); } }); } class WebAppInterface { /** * Js 调用原生 */ @JavascriptInterface //一定加注解否则可能会报错 public void sayHello(String name) { if (!TextUtils.isEmpty(name)) { Toast.makeText(MainActivity.this, name, Toast.LENGTH_SHORT).show(); } } /** * 原生调用Js */ public void showName(String name) { mWebView.loadUrl("javascript:showName('" + name + "')"); } }
