目录
一 混合开发简介
二 Android-Js互调
2.1 准备自己的html文件
2.2 WebView控件的准备设置
2.3 Android调用Js代码
2.4 Js调用Android方法和传参数
三 常用的几个方法和注意点
3.1 WebViewClient中的shouldOverrideUrlLoading拦截url
3.2 WebViewClient中的onPageStarted
3.3 WebViewClient中的onPageFinished
3.4 webview的evaluateJavascript方法
先上效果图：
源码地址：https://github.com/LucasXu01/Autils
一 混合开发简介
原生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() {@Overridepublic 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才有响应。
@JavascriptInterfacepublic void jsCallAndroid(){tvShowmsg.setText("Js调用Android方法");}@JavascriptInterfacepublic 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与安卓互调* @author lucas* created at 2019/9/12 12:23 PM*/
public class JsJavaActivity extends Activity {private WebView webview;private TextView tvJs;private TextView tvJsArgs;private TextView tvShowmsg;@Overrideprotected 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() {@Overridepublic void onClick(View v) {webview.loadUrl("javascript:javacalljs()");}});tvJsArgs.setOnClickListener(new View.OnClickListener() {@Overridepublic 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");}@JavascriptInterfacepublic void jsCallAndroid(){tvShowmsg.setText("Js调用Android方法");}@JavascriptInterfacepublic 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 后才可使用。
//拦截urlwebview.setWebViewClient(new WebViewClient(){@Overridepublic 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;}@Overridepublic void onPageStarted(WebView view, String url, Bitmap favicon) {super.onPageStarted(view, url, favicon);// 开始加载页面时}@Overridepublic void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);// 加载结束//因为该方法的执行不会使页面刷新，而方法（loadUrl ）的执行则会使页面刷新。//Android 4.4 后才可使用webview.evaluateJavascript("javascript:changename()", new ValueCallback<String>() {@Overridepublic void onReceiveValue(String value) {//此处为 js 返回的结果Log.v("Native",value);}});}});
