js调用Android代码
//android代码
private int load_state = -1;//记录当前的加载状态
private WebView mWebView;
@SuppressLint("JavascriptInterface")
private void initView() {
mWebView = findViewById(R.id.mWebView);
final WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
//js代码中通过AndroidApp对象调用android的函数
mWebView.addJavascriptInterface
(new JsCallAndroid(), "AndroidApp");
mWebView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(final WebView view, String url) {
Log.e(TAG, "onPageFinished==========" + card_state);
UiHandler.runOnUiThread(new Runnable() {
@Override
public void run() {
if (!mBaseExit) {
mWebView.dismissLoadMessageView();//隐藏等待加载页面
if (load_state == -1) {//因为如果正常的话回到查看牌义界面、card_state=1
// handleLoadError();
}
}
}
});
}
} catch (Exception e) {
e.printStackTrace();
}
}*/
加载错误处理//
@Override
public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
Log.e(TAG, "onReceivedError==========");
super.onReceivedError(view, request, error);
handleLoadError();
}
@Override
public void onReceivedHttpError(WebView view, WebResourceRequest request, WebResourceResponse errorResponse) {
super.onReceivedHttpError(view, request, errorResponse);
Log.e(TAG, "onReceivedHttpError==========");
handleLoadError();
}
@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
super.onReceivedSslError(view, handler, error);
Log.e(TAG, "onReceivedSslError=============");
handleLoadError();
}
加载错误处理//
});
webSettings.setDefaultTextEncodingName("utf-8");
mWebView.loadUrl("https://www.demo.test/index.html");
}
/**
* 加载错误处理
*/
private void handleLoadError() {
Log.e(TAG, "handleLoadError==========" + load_state );
UiHandler.runOnUiThread(new Runnable() {
@Override
public void run() {
mWebView.setVisibility(View.GONE);
errorView.setVisibility(View.VISIBLE);//这里可以显示你的加载错误的页面
}
});
}
private class JsCallAndroid {
/**
* 设置app的标题
*
* @param title
* @param state
*/
// 被JS调用的方法必须加入@JavascriptInterface注解
@JavascriptInterface
public void AppSetTitle(final String title, int state) {
LogCustom.e(TAG, "AppSetTitle==title=====" + title + ",state=====" + state);
}
}
三星galaxy5上显示为白屏
坑1 没有写type=”text/javascript”
如何debug呢?网页上弹出窗可以跟踪代码执行到了那里。call函数会弹出一个窗。
//index.html中代码
//写一个全局的js函数
function call(value){
alert(value);
}
<script >
call("aaaa")
AndroidApp.AppSetTitle("加载中...", 5);//这句就是js调用android中的函数
call("bbb")
</script>
测试的时候发现上述代码在其他手机上可以正常执行,但是在三星galaxy5显示的是空白
在其他手机上可以正常的弹出aaaa和bbb,代表成功的执行了AndroidApp.AppSetTitle(“加载中…”, 5)
后来修改代码如下:
<script type="text/javascript">
call("aaaa")
AndroidApp.AppSetTitle("加载中...", 5);//这里就是js调用android中的函数AppSetTitle函数
call("value===2")
</script>
也就是加了一句 type=”text/javascript”之后,三星galaxy5也可以正常的显示了。所以代码还是要规范。
坑2 在ajax中函数调用参数没有写全
//定义函数如下
function $ajax(url, methods, postData, callback, booleans,errorCallback) {
$.ajax({
url: url,
type: methods,
data: postData,
success: callback,
headers: obj,
async : booleans,
beforeSend: function (request) {
},
error: function () {
},
complete: function () {
}
});
}
//参数不全的调用,在部分手机上显示为白屏
$ajax(testIndex, "get",
{
user_name: user_name,
user_id: user_id,
},
function (res) {
var repData = true
if (res.data.can_test == true) {
window.location.href = "animateOpen.html?" + hrefs
} else {
window.location.href = "result.html?" + hrefs
}
}
);
//参数补全的调用,兼容性更好
$ajax(testIndex, "get",
{
user_name: user_name,
user_id: user_id,
},
function (res) {
var repData = true
if (res.data.can_test == true) {
window.location.href = "animateOpen.html?" + hrefs
} else {
window.location.href = "result.html?" + hrefs
}
}, true,function (res) {
}
);
总结
webview使用中有很多坑,写代码一定要规范,这样兼容性会好很多。