Android与JS互调的简单使用

在项目开发过程中有时会遇到WebView在加载Js页面时，网页上的一些逻辑要通知Android本地进行简单的UI交互或者参数的实时传递，那么就需要我们在Android程序的代码里实现相应的互调配置，以达到互调的效果。下面我直接通过代码实现：

JS调用Android方法：

1、先设置Android中的webview

class WebViewActivity:Activity(){
		 override fun onCreate(savedInstanceState: Bundle?) {
		        super.onCreate(savedInstanceState)
		        setContentView(R.layout.atty_webview_layout)
			    initView()
		} 

		fun initView(){
			with(webview.settings) {
			            // 设置与Js交互的权限
			            javaScriptEnabled = true
			            // 设置允许JS弹窗
			            javaScriptCanOpenWindowsAutomatically = true
			            //防止弹出系统浏览器提示
			            setSupportMultipleWindows(true)
			
			            setSupportZoom(true)
			
			            //设置适应H5，否在会出现白屏
			            domStorageEnabled = true
			            
			            //设置自适应屏幕，两者合用
			            useWideViewPort = true //将图片调整到适合webview的大小
			            loadWithOverviewMode = true // 缩放至屏幕的大小
			        }
			/**
			* 重点是这句设置
			* 设置h5可以回调此类,这里不设置的话，h5就调不通下面的本地方法
			*/
			webview.addJavascriptInterface(this, "Android")

			webview.webViewClient = object : WebViewClient() {
            //覆写shouldOverrideUrlLoading实现内部显示网页,防止弹出系统浏览器提示
            override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {
                // TODO 自动生成的方法存根
                view.loadUrl(url)
                return true
            }

            override fun onReceivedSslError(view: WebView?, handler: SslErrorHandler?, error: SslError?) {
                // 不要使用super，否则有些手机访问不了，因为包含了一条 handler.cancel(
                //super.onReceivedSslError(view, handler, error)

                // 接受所有网站的证书，忽略SSL错误，执行访问网页
                handler?.proceed()
            }
        }
	        webview.webChromeClient = object : WebChromeClient() {
	            override fun onProgressChanged(view: WebView, newProgress: Int) {
	                // TODO 自动生成的方法存根
	                if (newProgress == 100) {
	                    LoadingDailogUtils.dismiss()
	                    finshRefrash()
	                }
	            }
	        }
		}

	  	//h5回调接口
	    @JavascriptInterface
	    fun jsCallAndroid(msg:String) {
	        ToastUtil.showCenterShort(msg)
	    }
}

2、然后JS的调用使用

<head>
    <meta charset="utf-8">
    <title>Carson</title>
    <script>
	   <!--发出请求-->
        function callAndroid(){
            window.Android.jsCallAndroid("我来自JS");
        }
    </script>
</head>
<body>
<button type="button" id="btn" onclick="callAndroid()">发送</button>
</body>

Android调用JS方法
1、JS中的定义方法

<head>
    <meta charset="utf-8">
    <title>Carson</title>
    <script>
		//这个方法是给Android端提供调用
        function callJS(text){
           alert(text);
        }
    </script>
</head>
<body>
</body>

2、Android端发出请求

        /**
         * Android调用JS
         *
         * 方法二效率高
         * 但是向下兼容差，仅供4.4以上系统使用
         * 建议在4.4以上系统使用
         */
        if (Build.VERSION.SDK_INT < 18) {
            webview.loadUrl("javascript:callJS(“我来自Android”)")
        } else
            webview.evaluateJavascript("javascript:callJS(“我来自Android”)", object : ValueCallback<String> {
                override fun onReceiveValue(p0: String?) {
                    //TODO 处理js返回的结果
                }
            })

总结一下：
Js调用 Android的方式：
1、通过javaScriptEnabled = true和domStorageEnabled = true设置webView可以互调；
2、通过webview.addJavascriptInterface(this, "Android")将本地的方法公开出来；
3、在JS中通过window.Android.调用的方法名("xxx");完成通信。

Android调Js方式：
1、在Js代码中定义接收的方法；
2、在Android代码中通过webview.loadUrl("javascript:callJS()")或者webview.evaluateJavascript("javascript:callJS()"，null)方式发出请求.

Android与JS互调的简单使用

猜你喜欢