移动端主流的应用程序可分为 3 大类：
Native App ：原生应用，其页面资源文件都存放于本地
Web App ：受限制与 UIwebview，页面存放于服务器
Hybird App ： 介于二者之间的混合应用

Hybird App 又叫混合应用，看上去像一个 Native App，但实际只有一个 webview，里面是一个 Web App，它可兼具 “Native APP 良好的用户交互体验” 和 “Web APP 跨平台开发” 的优势。它可以使得开发者可以几乎零成本转

型移动应用开发者，并且相同的代码只需针对不同平台进行编译就能实现多个平台上的应用，相较于 Web APP 开发者还可以通过包装好的接口，调用大部分常用的系统 API。

本篇文章主要介绍 Hybird App 中原生页面和 H5 页面如何交互。

一、native 调用 js

创建一个 webview 对象，并绑定 webview 控件
①调用不带参数无返回值的 js 方法

webView.loadUrl("javascript:方法名()");

②调用不带参数有返回值的 js 方法

webView.evaluateJavascript("javascript:方法名()", new ValueCallback<String>() {
    @Override
 public void onReceiveValue(String value) {
        Toast.makeText(MainActivity.this, "返回值： "+value, Toast.LENGTH_LONG).show();
 }
});

③调用带参数无返回值的 js 方法

webView.loadUrl("javascript:方法名(" + "'转化为字符串的参数'" + ")");

注意事项：
Ⅰ、4.4 以前仅仅可用 loadUrl 调用 js 方法，4.4 以后才可通过 evaluateJavaScript 调用 js 获取到返回值
Ⅱ、webView 是 UI 控件，调用的 js 函数若耗时太长，需在非 UI 线程的子线程中运行，以免造成 anr

二、js 调用 native

①需要开启 javascript 调用 native 的开关, 如下

webView.getSettings().setJavaScriptEnabled(true);

②设置 Native 与 JS 交互的全局桥对象

//name:android在网页里面可以用window.name.方法名调用java方法
webView.addJavascriptInterface(MainActivity.this, "name");

③在全局桥对象中（这里是 MainActivity 中）声明 js 要调用的方法，并加上注解@JavascriptInterface，例如：

@JavascriptInterface
public void noParaFunc() {
    Log.d(TAG, "noParaFunc: 调用");
 runOnUiThread(new Runnable() {
        @Override
 public void run() {
            Button button = (Button) findViewById(R.id.button2);
  button.setText("JS->android 无参成功");
 }
    });
}

④在 HTML 中 js 调用原生的代码：
不带参数的方法：window.name.noParaFunc()
不带参数的方法：window.name.ParaFunc(‘test’)

*注: *在 api17 之前 addJavascriptInterface 有风险，hacker 可以反编译获取 Native 注册的 Js 对象，然后在页面通过反射 java 的内置静态类，获取敏感信息实施破坏。

遇到的坑：

如果 APP 中需要跳转到 http 页面，需要声明：

<uses-permission android:name="android.permission.INTERNET" />

并且在 application 中的属性中添加

android:usesCleartextTraffic="true"

否则会出现以下错误 (这是由于从 Android 9.0（API 级别 28）开始，默认情况下限制了明文流量的网络请求，对未加密流量不再信任，直接放弃请求，因此 http 的 url 均无法在 webview 中加载，https 不受影响)：