Android开发之——Android和WebView相互调用

一 概述

当游戏页面使用html书写，并用WebView加载与android应用进行信息交互时

• 进入游戏时，把用户信息传递到webview(js调用android)
• 游戏结束后，将游戏的结果传递给andriod处理(android调用js)

二 html页面

2.1 index.html

    
    


    

    android调用js代码
    android调用js代码并传递参数
    JS调用android代码
    JS调用android代码并传递参数
    

2.2 页面路径

将index.html页面放到如下路径下

AndroidWebView\app\src\main\assets\www\index.html

WebViewManager根据传入的文件名(index)获取url路径

object WebViewManager {
    fun getWebUrl(name: String): String {
        return "file:///android_asset/www/${name}.html"
    }
}

三 WebView处理

3.1 页面中添加WebView

3.2 初始化WebView，并加载Url

webView = findViewById(R.id.webview)
var url = WebViewManager.getWebUrl("index");
webView.loadUrl(url);

3.3 启用 JavaScript

JavaScript 在 WebView 中默认处于停用状态。您可以通过附加到 WebView 的 WebSettings 启用 JavaScript。您也可以使用 getSettings() 检索 WebSettings，然后使用 setJavaScriptEnabled() 启用 JavaScript

webView.settings.javaScriptEnabled = true

四 android和WebView相互调用

4.1 JavascriptInterface回调类为当前Activity

4.1.1 WebView的addJavascriptInterface中Object为当前Activity

webView.addJavascriptInterface(this, "Android")

• this：代表当前Activity
• “Android”：是固定写法

4.1.2 当前Activity中实现js中定义的方法

    /**
     * @description：android调用js无参函数
     */
    @JavascriptInterface
    fun androidCallJs() {
        Toast.makeText(this, "androidCallJs", Toast.LENGTH_LONG).show()
    }
    /**
     * @description：android调用js带参函数
     */
    @JavascriptInterface
    fun androidCallJsWithArgs(name: String) {
        Toast.makeText(this, "androidCallJsWithArgs:$name", Toast.LENGTH_LONG).show()
    }

    /**
     * @description：js调用android无参函数
     */
    @JavascriptInterface
    fun jsCallAndroid(): String {
        return "jsCallAndroid"
    }
    /**
     * @description：js调用android带参函数
     */
    @JavascriptInterface
    fun jsCallAndroidWithArgs(name: String): String {
        return "jsCallAndroidWithArgs=$name"
    }

4.1.3 JS中相应的方法调用Android.JavascriptInterface对应的方法

 function androidCallJs() {
      Android.androidCallJs();
  }

点击JS中的第一个按钮，调用 androidCallJs();方法，执行Android.androidCallJs();，会回调android Activity中相应的androidCallJs()方法

4.2 将JS中的方法放到单独的类中实现(WebAppInterface)

4.2.1 定义WebAppInterface

class WebAppInterface(private val mContext: Context) {

    /**
     * @description：android调用js无参函数
     */
    @JavascriptInterface
    fun androidCallJs() {
        Toast.makeText(mContext, "androidCallJs", Toast.LENGTH_LONG).show()
    }

    /**
     * @description：android调用js带参函数
     */
    @JavascriptInterface
    fun androidCallJsWithArgs(name: String) {
        Toast.makeText(mContext, "androidCallJsWithArgs:$name", Toast.LENGTH_LONG).show()
    }

    /**
     * @description：js调用android无参函数
     */
    @JavascriptInterface
    fun jsCallAndroid(): String {
        return "jsCallAndroid"
    }

    /**
     * @description：js调用android带参函数
     */
    @JavascriptInterface
    fun jsCallAndroidWithArgs(name: String): String {
        return "jsCallAndroidWithArgs=$name"
    }
}

4.2.2 WebView设置JS接口监听

webView.addJavascriptInterface(WebAppInterface(this), "Android")

4.3 效果图

五 参考

• Google官网-在 WebView 中编译 Web 应用
• 源码