android如何嵌套网页和网页互传消息(系列一)

192 阅读1分钟

我这边设计的方案是Android的webviev作为载体,链接url; 以下是webView一些操作配置

webView.loadUrl(ParamUrl.url);
settings = webView.getSettings();
settings.setAllowFileAccess(true);
settings.setDatabaseEnabled(false);
settings.setSupportZoom(true);//设置可以支持缩放
settings.setBuiltInZoomControls(false);//设置出现缩放工具
settings.setUseWideViewPort(false);//设置webview推荐使用的窗口
settings.setLoadWithOverviewMode(false);//设置webview加载的页面的模式
settings.setTextZoom(100);
settings.setDomStorageEnabled(true);
settings.setGeolocationEnabled(true);
settings.setJavaScriptEnabled(true);
webView.setWebViewClient(new myWebClient());
public class myWebClient extends WebViewClient {


    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);

    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {

        return true;
    }

    @RequiresApi(api = Build.VERSION_CODES.M)
    @Override
    public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
        super.onReceivedError(view, request, error);
        Log.e("request===", error.getDescription().toString() + "==code==" + error.getErrorCode());
        tv_fail.setVisibility(View.VISIBLE);
        img_welcome.setVisibility(View.GONE);
        webView.setVisibility(View.INVISIBLE);
        if (error.getDescription().toString().equals("net::ERR_NAME_NOT_RESOLVED") || error.getErrorCode() == -2) {
            tv_fail.setVisibility(View.GONE);
            webView.setVisibility(View.VISIBLE);
        }
        isError = true;
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        //安卓调用js方法。注意需要在 onPageFinished 回调里调用
        webView.post(new Runnable() {
            @Override
            public void run() {
                webView.evaluateJavascript("callAndroidF" + "('" + clientId + "')", new ValueCallback<String>() {
                    @Override
                    public void onReceiveValue(String s) {
                        Log.e("======网页=======", "js返回的结果: " + s);
                        img_welcome.setVisibility(View.GONE);
                    }
                });
            }
        });

    }
}

重点来了,看下onPageFinished回掉方法里面的callAndroidF,此方法是在前端(VUe写的)进行挂载,接收参数,如下图所示:

image.png

此时前端就能接收到Android传递过来的数值了,有没有感觉好神奇!