首页 > 程序开发 > 移动开发 > Android >

Android与webview交互实战

2016-12-08

随着现在hybird的开发模式的进行,Native与web的交互变得尤为重要。今天的内容我将围绕native与js的交互展开。内容分为如下部分:(1)webview 加载界面;(2)android调用javascript。

随着现在hybird的开发模式的进行,Native与web的交互变得尤为重要。今天的内容我将围绕native与js的交互展开。内容分为如下部分:

(1)webview 加载界面

(2)android调用javascript

(3)javascript调用android

(4)android调用javascript,并获取返回值

(5)javascript调用android所在线程

1、Android中webview加载web的常见方式有四种:

// 加载HTML内容
 webView.loadData(html,"text/html; charset=utf-8",null);
// 加载 sd卡 的 html 文件
 webView.loadUrl("content://packageName/sdcard/main.html");
// 加载 指定URL 的 html 文件
 webView.loadUrl("https://www.baidu.com");
// 加载 asset 目录下的 html 文件
 webView.loadUrl("file:///android_asset/main.html");

以上四种方式很好理解,注释中有写就不再多述了。

2、android调用js

在需要在android中调用web中的js时,首先需要开启webview对javascript操作的支持:

// 开启 WebView 支持 JavaScript 功能
webView.getSettings().setJavaScriptEnabled(true);

android调用javascript我们需要用到webview的loadUrl方法:

webView.loadUrl("javascript:javaCallToJs("+"'hello'"+")");

android调用javascript的交互协议为javascript:xxx。即前缀要添加javascript。后面跟方法调用即可。

上面的例子中,我们调用了javaCallToJs方法,并传入了hello字符串参数。

注:当传入的参数是字符串类型时,需要使用单引号引用。

然后我们看下javascript中定义的方法:

function jsCallToJava(param) {
    alert(param);
}

很简单,就是弹出提示框。

注:如果调用的js方法没有参数,方法名称后需要添加括号,而不是只写方法名称:

错误:

webView.loadUrl("javascript:javaCallToJs");

正确:

webView.loadUrl("javascript:javaCallToJs()");

3、javascript调用android

(1)js调用android,我们先定义一个方法:

@JavascriptInterface
public int getResult(int num, int num1) {
    return num + num1;
}

可以看到,该方法用@JavascriptInterface注释。看到这里可能大家就明白了,没错,添加了该注释证明此方法是给js调用的。

(2)

/**
 * 将提供给 Js 访问的接口内容所属的 Java 对象注入 WebView  * object 表示 Js 访问的接口内容所在的 Java 对象;
 * name 表示 Js 调用 Java 代码时的接口名称,与 Js 中的调用保持一致即可。
 */
 webView.addJavascriptInterface(MainActivity.this,"mainActivity");

上面第一步中我们声明了被调用方法,第二步中需要将方法所在的类注册,因为第一步中getResult方法定义在MainActivity中,所以第一个参数即MainActivity.this。第二个参数可以理解为MainActivity的标识。我们在javascript中调用时只需要使用标识调用即可。即调用某个标识下(某个标识又表示了某个接口下)的某个方法。

function getResult(num1,num2) {
   document.getElementById("font").innerText = window.mainActivity.getResult(num1,num2);
}

从上面方法可以看到,我们采用了window.mainActivity.getResult方式去调用android中的方法。

js调用android方式也有两种:

(1)

window.mainActivity.getResult(num1,num2);

(2)

javascript:mainActivity.getResult(num1,num2);

两种方式都可以实现调用android。

4、android调用javascript,并获取返回值

以上demo可以看到android调用js时,方法没有返回值,而是直接弹窗提示。那么如果js方法中有返回值,我们该如何获取呢?看下面demo代码:

function returnResult(){
    return 1 + 2;
}
webView.evaluateJavascript("returnResult()", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String value) {
        Toast.makeText(MainActivity.this,value,Toast.LENGTH_SHORT).show();
    }
});

android为我们提供了evaluateJavascript接口,让我们可以在调用了js方法后,获取该方法的返回值。

是不是非常简单~

5、javascript调用android所在线程

当js调用android时,所在的线程是主线程吗?我们可以测试一下:

@JavascriptInterface
public void jsCallToJava(String msg) {
    Log.e("--",Thread.currentThread().getName());
   
}

上面代码中,当js调用jsCallToJava方法时,会打印出当前的线程名称。

从log的输出中,不难发现,其实js调用android时所在的线程名称为:JsBridge。

从上也可以表明,js调用android时,android方法的执行并不是在主线程。所以我们能在js调用的android方法中去更新UI等操作时还需要切换到主线程,例如使用handler,或者post等。

/**
 * 提供给js访问的属性或方法必须定义为public类型
 */
@JavascriptInterface
public void jsCallToJava(String msg) {
    webView.post(new Runnable() {
        @Override
        public void run() {
           tvShow.setText(msg);
        }
    });
}

以上就是关于android与javascript的交互内容了。相信大家有了更深的认识。

相关文章
最新文章
热点推荐