android Hybrid开发应用场景众多,Native与Web通信主要有两种方式:
1.使用addJavascriptInterface
2.使用JsBridge
本文对第一种交互方式做简单介绍,第二种交互将在下一篇博文进行描述。
1.接入
Android自带的交互方式,无需引入任何依赖。
2.Web调用Native
在Web页面调用Native的方法,分别用get/set两个方法来模拟数据交换。
- Activity页面
开启Javascript使能、传递交互接口对象、加载web页面。
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setDefaultTextEncodingName("utf-8");
mWebView.addJavascriptInterface(new WebViewUtils(mWebView), "androidInterface");
mWebView.loadUrl("file:///android_asset/test.html");
- 交互接口类定义
交互接口类是web调用Native的最直接体现,所有的交互接口都在这里定义
public class WebViewUtils {
private static final String TAG = "WebViewUtils";
private WebView webView;
public WebViewUtils(WebView webView) {
this.webView = webView;
}
@JavascriptInterface
public int getUserScore() {
return 200;
}
@JavascriptInterface
public void setUserScore(int score) {
Log.d(TAG, "Score from web:" + score);
}
}
- web页面
简单起见,写了最简单的HTML,两个script function 来调用Native的方法:
getUserScore() 与 setUserScore()。
页面命名test.html,放在assets目录下。
<!DOCTYPE html>
<html>
<body>
<div id="web_test"></div>
<button type="button" onclick="getUserScore()">getUserScore</button>
<button type="button" onclick="setUserScore()">setUserScore</button>
<script>
function goBack() {
return "1";
}
function getUserScore() {
var ret = androidInterface.getUserScore();
document.getElementById("web_test").innerHTML= "getUserScore:"+ret;
}
function setUserScore() {
androidInterface.setUserScore(45);
}
</script>
</body>
</html>
// 运行结果 web调用Native的setUserScore,将数据45传给Native
2019-12-20 22:39:57.489 32263-1750/com.example.webdemo D/WebViewUtils: Score from web:45
3.Native调用Web方法
这里用web页面返回逻辑来模拟,在activity监听返回按键,调用web的goBack()方法来判断是返回web页面还是finish当前Activity。通过goBack()的返回值来判断,是否需要finish当前Activity。
@RequiresApi(api = Build.VERSION_CODES.KITKAT)
private void handleGoBack() {
mWebView.evaluateJavascript("goBack()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.d(TAG, "onReceiveValue: " + value);
}
});
}
// Native调用web的goBack, 根据返回值做对应的处理
2019-12-20 22:41:52.058 32263-32263/com.example.webdemo D/JsInterfaceActivity: onReceiveValue: "1"
demo地址
[email protected]:justinworkshop/WebDemo.git