小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。先上效果图：

一混合开发简介

原生app ：java/kotlin 纯原生写出的app；

web app：web写出的app；

hybird app：原生+web（通过webview）写出的app；

当然，现在也有很多第三方混合开发框架以及简便的js桥，但是作为最基础的webview，掌握js/android的互调等相关知识是非常必要的。

二 Android-Js互调

2.1 准备自己的html文件

安卓和html中js的互调，一是要有安卓代码，二肯定需要html网页。工程中，网页都是放在服务器，方便随时更改，用户无需再次更新自己的app，已达到hybrid开发的目的，实例方便起见，将html文件放在了本地。

首先，在自己安卓项目中的app目录下新建assets文件夹（若没有）：

接着，在assets文件夹下新建自己的html文件，代码如下：

<html>
    <head>
        <meta http-equiv="Content-Type" charset="GB2312"/>
 
        <script type="text/javascript">
            function javacalljs(){
                 document.getElementById("showmsg").innerHTML = "JAVA调用了JS的无参函数";
            }
 
            function javacalljswith(arg){
                 document.getElementById("showmsg").innerHTML = (arg);
            }
 
        </script>
 
    </head>
 
    <body>
        <h3 align="center">Web模块</h3>
 
        <h3 id="showmsg" align="center">调用js显示结果</h3>
 
        <div style="text-align:center; vertical-align:middle;">
            <input  type="button" value="Js调用Java代码" onclick="window.android.jsCallAndroid()"/>
        </div>
 
        <br>
 
        <br>
 
        <div style="text-align:center; vertical-align:middle;">
        <input  type="button" value="Js调用Java代码并传参数" onclick="window.android.jsCallAndroidArgs('Js传过来的参数')"/>
        </div>
 
    </body>
</html>

2.2 WebView控件的准备设置

在自己的activity活动中获得webview控件后，需要进行以下设置：

WebSettings webSettings = webview.getSettings();
//与js交互必须设置
webSettings.setJavaScriptEnabled(true);
webview.loadUrl("file:///android_asset/html.html");
webview.addJavascriptInterface(MainActivity.this,"android");

webSettings.setJavaScriptEnabled(true) 表示让WebView支持调用Js；
webview.loadUrl("file:///android_asset/html.html") 表示加载assets文件下的html.html文件（因为没有网络地址所以加载的本地文件）
webview.addJavascriptInterface(MainActivity.this,"android") 给webview添加Js调用接口，第一个参数为类对象，第二个参数为自定义别名，Js通过这个别名来调用Java的方法，我这里自定义为android。 html中用到：<input type="button" value="Js调用Java代码" οnclick="window.android.jsCallAndroid()"/>

2.3 Android调用Js代码

在android代码中（如按钮点击事件中），通过webview这个中介调用loadUrl来执行html代码中的Js代码：

 tvJs.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webview.loadUrl("javascript:javacalljs()");
            }
        });

下为html中要被安卓调用的js函数代码，函数意图为：向id为showmsg的h3大小标题中写入字符串“JAVA调用了JS的无参函数”。

function javacalljs(){
                 document.getElementById("showmsg").innerHTML = "JAVA调用了JS的无参函数";
            }

在上述基础上，若要在Android调用Js函数时传参数，只需要在loadUrl方法中进行字符串的拼接，将参数以字符串形式拼接进去即可。

webview.loadUrl("javascript:javacalljswith(" + "'Android传过来的参数'" + ")");

2.4 Js调用Android方法和传参数

点击html按钮，通过οnclick="window.android.jsCallAndroid()事件，通过android别名调用Java文件的jsCallAndroid()方法。曾经Js可直接调用Java代码窃取App信息，为安全起见，在Android4.4以上并且必须加入@JavascriptInterface才有响应。

@JavascriptInterface
    public void jsCallAndroid(){
        tvShowmsg.setText("Js调用Android方法");
    }

@JavascriptInterface
public void jsCallAndroidArgs(String args){
    tvShowmsg.setText(args);
}

所有的activity代码如下：

package com.lucas.autils.autils;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.TextView;

  /**
  * 原生webview  js与安卓互调
  */
   public class JsJavaActivity extends Activity {

   private WebView webview;
   private TextView tvJs;
   private TextView tvJsArgs;
   private TextView tvShowmsg;

 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_jsjava);
     
        setWebview();
        initView();
    }

    private void initView() {
        tvJs = (TextView) findViewById(R.id.tv_androidcalljs);
        tvJsArgs = (TextView) findViewById(R.id.tv_androidcalljsargs);
        tvShowmsg = (TextView) findViewById(R.id.tv_showmsg);
     
        tvJs.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webview.loadUrl("javascript:javacalljs()");
            }
        });
     
        tvJsArgs.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webview.loadUrl("javascript:javacalljswith(" + "'Android传过来的参数'" + ")");
            }
        });
    }

    private void setWebview() {
        webview = (WebView) findViewById(R.id.webview);
        WebSettings webSettings = webview.getSettings();
        webSettings.setBuiltInZoomControls(true);
        webSettings.setSupportZoom(true);
        //与js交互必须设置
        webSettings.setJavaScriptEnabled(true);
        webview.loadUrl("file:///android_asset/html.html");
        webview.addJavascriptInterface(JsJavaActivity.this,"android");
    }

    @JavascriptInterface
    public void jsCallAndroid(){
        tvShowmsg.setText("Js调用Android方法");
    }
     
    @JavascriptInterface
    public void jsCallAndroidArgs(String args){
        tvShowmsg.setText(args);
    }

}

三常用的几个方法和注意点

3.1 WebViewClient中的shouldOverrideUrlLoading拦截url

安卓webview中setWebViewClient方法中需要一个WebViewClient对象，而WebViewClient中有个方法为shouldOverrideUrlLoading，通过此方法可以进行我们需要跳转的url地址的拦截，并根据我们需要进行自定义化的一些操作，解析url做相应的事情。

3.2 WebViewClient中的onPageStarted

onPageStarted会在webview加载相应的url开始之前进行调用，常用来处理需要在加载相应url之前的一些操作。

3.3 WebViewClient中的onPageFinished

onPageStarted会在webview加载相应的url结束之后进行调用，常用来处理需要在加载相应url之后的一些操作，比如加载后更加网页标题填充原生页面最上方的活动标题。

3.4 webview的evaluateJavascript方法

该方法的执行不会使页面刷新，而方法（loadUrl ）的执行则会使页面刷新。此Android 4.4 后才可使用。

//拦截url
        webview.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                if (url.indexOf("jump")>-1){
                    Toast.makeText(JsJavaActivity.this,"拦截到了相应url",Toast.LENGTH_LONG).show();
                    return true;
                }else if (url.startsWith("http")){
                    view.loadUrl(url);
                    return true;
                }
                return false;
            }
 
 
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                // 开始加载页面时
            }
 
 
 
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                // 加载结束
 
                //因为该方法的执行不会使页面刷新，而方法（loadUrl ）的执行则会使页面刷新。
                //Android 4.4 后才可使用
                webview.evaluateJavascript("javascript:changename()", new ValueCallback<String>() {
                    @Override
                    public void onReceiveValue(String value) {
                        //此处为 js 返回的结果
                        Log.v("Native",value);
                    }
                });
 
 
            }
 
        });

Android混合开发快速上手入门

一 混合开发简介