安卓开发WebView与HTML页面JS互相交互的干货

由于开发中需要引入html作为模板使用，与HTML中的JS进行互相传值交互，实现互通的功能。基本代码如下。

初始化设置代码

/**
* 定义使用的WebView
*/
private WebView baseWebView;
/**
* 定义WebView设置
*/
private WebSettings baseWebSettings;
/**
* Context
*/
private Context mContext;

/**
* 控件的事件初始化
*/
@SuppressLint("SetJavaScriptEnabled")
public void initEvent() {
baseWebSettings = baseWebView.getSettings();
// 设置与Js交互的权限
baseWebSettings.setJavaScriptEnabled(true);
// 设置允许JS弹窗
baseWebSettings.setJavaScriptCanOpenWindowsAutomatically(true);
// 设置取消加载缓存
baseWebSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
// 创建对html页面JS的监听
PaperJavaScriptObject paperJavaScriptObject = new PaperJavaScriptObject(mContext);
// 这里的paperObject是一个监听的名称 js中的paperObject.getIndependentScore(); 监听名称.方法名称
baseWebView.addJavascriptInterface(paperJavaScriptObject, "paperObject");
// 先载入JS代码
// 格式规定为:file:///android_asset/文件名.html
// html页面的链接
baseWebView.loadUrl("http://127.0.0.1/XXX.html");
baseWebView.loadUrl("file:///android_asset/XXX.html");
// 设置浏览器弹窗方法
baseWebView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
AlertDialog.Builder b = new AlertDialog.Builder(mContext);
b.setTitle("Alert");
b.setMessage(message);
b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
b.setCancelable(false);
b.create().show();
return true;
}
});
// 这个方法是为了监听webviwe加载完后执行调用js的方法
baseWebView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
//准备完毕后加载数据
loadData();
}
});

}

/**
* 调用html脚本数据
*/
public void loadData() {
baseWebView.evaluateJavascript("javascript:[js方法名]", new ValueCallback<String>() {

@Override
public void onReceiveValue(String value) {

//js中的返回值
}
});
}

/**
* JS回调android
*/
public class PaperJavaScriptObject {

Context context;

public PaperJavaScriptObject(Context c) {
context = c;
}

/**
* 获取当前item
*/
@JavascriptInterface //sdk17版本以上加上注解
// 这里的getErrorPaperInfo 方法名要与js的方法名相同
public void getErrorPaperInfo(String string) {
if (clickListener != null) {

}
}
}

HTML页面中的脚本代码

paperObject.getIndependentScore();//js回调安卓 监听名称.方法名

function getIndependentScore(){};安卓调用JS脚本 方法名

由于调用方法只接收字符串类型的所以定义了两个转换的方法

安卓端

/**
 * 功能描述: 处理html里的标签问题<br>
 * 替换标签
 *
 * @param str
 * @return
 */
private String getHtml(String str) {

    str = str.replace("\"", "@*#YSSYH#*@");
    str = str.replace("\'", "@*#YSDYH#*@");
    str = str.replace("\\", "\\\\");//对斜线的转义
    str = str.replace("\n", "");  //注意php中替换的时候只能用双引号"\n"
    str = str.replace("\r", "");
    return str;
}

html端
 /**
 *恢复转义 
 * @param {Object} date
 */
 function getHtmls(date) {
 var html = date;
 for(var i = 0; i < date.split('@*#YSSYH#*@').length; i++) {
 html = html.replace("@*#YSSYH#*@", "\"")
 }
 for(var i = 0; i < date.split('@*#YSDYH#*@').length; i++) {
 html = html.replace("@*#YSDYH#*@", "'")
 }

 return html;
 }