本文为菜鸟窝作者刘婷的连载。菜
菜鸟窝-程序员的黄埔军校
当看到这个标题的时候，很多人都觉得很熟悉啊，现在市场上面大多数的 App 都使用到了这个，使用原生 Native 嵌套 Html5，而这种模式的出现，也出现了一个新的词叫做 Hybrid App ，也就是混合 App，这篇的文章主要就是来分享下 Hybrid App 的相关知识以及下如何实现 Native 和 Html5 的交互。
App 的三种主要类别
目前主流 App 应用程序主要分为三类，分别为 Web App、Native App 和 Hybrid App，也就是网页 App、原生 App 和混合 App。其中网页 App 主要是借助于浏览器就可以直接运行使用，原生 App 是原生的应用程序，混合 App 就是前面两者的结合体。
1. Web App 的详细介绍
Web App 指采用 Html5 语言写出的 App，不需要下载安装。类似于现在所说的轻应用。生存在浏览器中的应用，基本上可以说是触屏版的网页应用。
1.1 Web App 的优点
（1）轻应用，借助于浏览器，不需要太高的成本，所以开发成本相对较低。
（2）直接可以在后台服务器上面更新，更新方便而且快。
（3）更新无需通知用户，不需要手动升级。
（4）在 IOS 、Android 和 Windows 等平台和终端都可以使用，能够跨多个平台和终端。
1.2 Web App 的缺点
（1）网页的加载，只是临时性的入口。
（2）无法获取系统级别的通知，提醒，动效等等，缺少原生的一些功能。
（3）用户留存率低。
（4）设计受限制诸多。
（5）受制于网速等，体验较差。
2. Native App 的详细介绍
Native App 指的是原生程序，一般依托于操作系统，有很强的交互，是一个完整的 App，可拓展性强，但是需要用户下载安装使用。
2.1 Native App 的优点
（1）打造完美的用户体验。
（2）原生的应用程序，性能稳定。
（3）操作速度快，上手流畅。
（4）访问本地资源（通讯录，相册）方便。
（5）设计出色的动效，转场。
（6）拥有系统级别的贴心通知或提醒。
（7）用户留存率高。
2.2 Native App 的缺点
（1）开发成本高（不同平台有不同的开发语言和界面适配）。
（2）维护成本高（例如一款App已更新至V5版本，但仍有用户在使用 V2， V3， V4 版本，需要更多的开发人员维护之前的版本）。
（3）更新缓慢，根据不同平台，提交–审核–上线 等等不同的流程，需要经过的流程较复杂。
3. Hybrid App 的详细介绍
Hybrid App 指的是半原生半Web的混合类 App，需要下载安装，看上去类似 Native App，但只有很少的 UI Web View，访问的内容是 Web，比如淘宝、京东等 App 都是这种类型的。
3.1 Hybrid App 的优点
（1）极力去打造类似于 Native App 的体验。
（2）可以简单更新 APP 内部的局部内容，拥有 Web App 的优势。
（3）结合了 Native App 和 Web App 的优点，性能也相对稳定。
3.2 Hybrid App 的缺点
（1）受制于技术、网速等条件，跨平台要求较高。
（2）原生和网页的融合向不完善，技术不是很成熟，还在不断更新中。
（3）还是需要较高的开发和维护成本。
4. 三种类别的对比
上面详细介绍了三种类别的概念和优缺点，对于这三种类型的 App 也有了一定的认识了，最后总结下这三种类型，看图说话。
上图中对于 Web App 、Native App 和 Hybrid App 的主要特性、平台使用以及网络要求做了详细的对比。
实现 Native 和 Html5 的交互
说到交互的话，就可以简单的分为两种了，分别为 Android 调用 HTML 和 HTML 调用 Android，下面是详细的交互步骤。
1. 添加 WebView
在布局文件中添加 WebView 用来加载 Web 页面的展示。
WebView 是 Android 原生中的控件之一，直接在 xml 布局文件中添加即可。
2. 设置 WebView 支持 JS 脚本
如果需要 WebView 实现和原生的交互，那么就要让 WebView 支持执行 JS 的脚本。
webView.getSettings().setJavaScriptEnabled(true);
在 Html5 中的功能操作都是使用 JS 来实现的，WebView 默认是不支持 JS 脚本，所以这里必须要先设置支持执行 JS 的脚本。
3. 实现 JS 调用 Android
在新建的 HTML5 页面中添加一个输入框 input 和 按钮 button 控件，并且设置样式，这里就不多讲了，主要的是要讲如何实现交互。
首先在 Activity 中 new 一个 JavascriptInterface，命名为 WebAppInterface，也就是 JS 的脚本接口，用来交互使用，然后在 WebAppInterface 中添加方法 sayHello(String name);
@JavascriptInterface
public void sayHello(String name) {
Toast.makeText(context, "name=" + name, Toast.LENGTH_LONG).show();
}
方法上面的注解 @JavascriptInterface 必不可少，否则会报错的，在 Activity 中写好方法后，就要在 Html5 页面中添加调用 sayHello(String name) 的 function 方法。
function sayhello(){
var name = document.getElementById("txtName").value;
window.app.sayHello(name);//传参数给APP
}
获取到输入框 input 的内容，然后调用 Android 中的 sayHello(String name) 方法，将内容使用 Toast 弹出来。
4. 实现 Android 调用 JS
实现 Android 调用 JS 和实现 JS 调用 Android 正好是反过来的，Android 调用 JS 是要实现在原生的界面中调用 Html5 中的 function 方法，就先写好 function。
function showName(name){
document.getElementById("txtName").value=name;
}
这里的 function 是用于给输入框 input 设置 value 值。
然后在 Activity 中写入对 function 的调用，不过既然需要调用，那就为原生界面 XML 布局添加一个按钮，给这个按钮绑定点击事件来调用 JS 脚本。
按钮加好了，之后就是绑定点击事件。
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//点击事件
}
});
对于 JS 脚本的调用放在按钮 button 的点击事件中。
runOnUiThread(new Runnable() {
@Override
public void run() {
webView.loadUrl("javascript:showName('" 菜鸟窝 "')");
}
});
调用 JS 脚本 function，将 "菜鸟窝" 字符串传入到 Html5 的页面输入框 input 中。
最终效果图
Native 和 Html5 的简单交互代码都已经写好了，最后运行获取效果图。
点击“调用 JS”按钮，给 Html5 页面的输入框 input 赋予了 value 值——“菜鸟窝”，然后点击 Html5 页面的 “say Hello” 按钮来 Toast 出输入框 input 的 value 值。
