我们先看一张gif图
untitled.gif
这里通过加载一个html来展示它们的互相调用
- 布局文件很简单就一个WebView控件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<WebView
android:id="@+id/web_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
- assets新建一个html文件，我这里叫home.html，内容非常简单，两个按钮，两个div
<html>
<head>
<title>js和webview互调</title>
<script>
function getRes() {
document.getElementById("div2").innerHTML = android.getString()
}
<!--webview调用此方法并将值传递给js,并且显示在div上-->
function setDiv(content) {
document.getElementById("div1").innerHTML = content
}
<!--计算两个数的和并返回，让webview调用-->
function sum(a, b) {
return a+b
}
</script>
</head>
<body>
<button onclick="android.showToast('hello')">显示toast</button><br/><br/>
<button onclick="getRes()">从android获取带返回值的方法</button><br/><br/>
<div id="div1"></div><br/>
<div id="div2"></div>
</body>
</html>
- 接着我们新建一个Test类，让这个类暴露方法给js去调用，需要注意的是在方法上要添加这样一个注解@JavascriptInterface
public class Test {
private Context context;
public Test(Context context) {
this.context = context;
}
@JavascriptInterface
public void showToast(String message) {
Toast.makeText(context, message, Toast.LENGTH_SHORT).show();
}
@JavascriptInterface
public String getString() {
return "hello android";
}
}
- 最后是我们的MainActivity，记住一定要将setJavaScriptEnabled设置为true,我们调用js方法时要等界面加载完成时调用，webview的loadUrl()方法和evaluateJavascript()都可以调用js中的代码，evaluateJavascript()方法有个回调，通过这个回调能取得js方法的返回值， js则通过webview的addJavascriptInterface方法调用java代码的，这里要传入两个参数，一个是Object，所以直接传入Test类实例，一个是String，就是调用的接口名字，可以任意字符串，比如我传入android，则我在html中使用android.showToast('hello')就调用了Test类中的showToast(String message)方法了
public class MainActivity extends AppCompatActivity {
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = findViewById(R.id.web_view);
webView.loadUrl("file:///android_asset/home.html");
//设置js
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new Test(this), "android");
webView.setWebViewClient(new WebViewClient() {
/**
* 当页面加载完毕的时候会回调此方法
* @param view
* @param url
*/
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
view.loadUrl("javascript:setDiv('hello')");
view.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
System.out.println(value);
}
});
}
});
}
}
- 最后直接运行即可
网友评论