WebView中js和android交互遇到的坑

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使用中有很多坑，写代码一定要规范，这样兼容性会好很多。