安卓Webview 与 vue h5 使用js交互

Posted 2023-05-06

参考技术A

总的来说都是使用安卓webview.loadUrl(url)加载页面

url为在线网页连接

将打包好的网页资源放入安卓静态目录

加载目录为

android 调用 JS 有两种方式，都是通过 WebView 的方法：
webview.loadUrl()
webview.evaluatejavascript()

js方法

vue需要把方法挂载到windows

通过映射js object暴露给js操作
安卓

h5调用

经常需要适配安卓和ios
加入以下机型判断

Android与H5交互——JSBridge - (jianshu.com)

安卓原生与hml交互（WebView基础）

• WebView加载页面

webView有两种加载方式，

加载网络地址

webView.loadUrl("www.xxx.com/index.html");

加载本地资源

webView.loadUrl("file:///android_asset/example.html");

• 添加请求头信息，在这里可以加入认证信息等等

Map<String,String> map=new HashMap<String,String>();
map.put("taken","1234");
webView.loadUrl("http://192.168.99.101:8080/xiaoyanAPI/test1",map);

• 设置页面内链接跳转，拦截了跳转事件，在相应函数中做对应的处理。

webView.setWebViewClient(new WebViewClient() {
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });

• 设置允许js方法执行

        WebSettings webSettings=webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

• 返回键返回上个页面（默认webView将页面存放到缓存栈中）

@Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            if (webView.canGoBack()) {
                webView.goBack();//返回上一浏览页面
                return true;
            } else {
                finish();//关闭Activity
            }
        }
        return super.onKeyDown(keyCode, event);
    }

• 安卓调用html的js方法

调用无返回值方法可去掉后面的回掉函数，该函数接受js函数返回的数据。

 mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {
            Log.e(TAG, "onReceiveValue value=" + value);
        }
    });

• js调用安卓原始里的方法。

在Android4.2以上可以直接使用@JavascriptInterface注解来声明，下面是在一个本地Java方法

 public class JsInteration {
    @JavascriptInterface
    public String back() {
        return "hello world";
    }
}

 

定义完这个方法后再调用mWebView.addJavascriptInterface()方法：

 mWebView.addJavascriptInterface(new JsInteration(), "android");

那么在js中怎么来调用呢？

<script type="text/javascript">
     function s(){
     //调用Java的back()方法
    var result =window.android.back();
    document.getElementById("p").innerHTML=result;
    }

</script>