Android和H5的交互
2018-02-24 本文已影响150人
符号Rajesh
一、应用场景
移动端接入一个H5的文档编辑器。当需要退出编辑页面的时候判断是否需要保存，执行保存操作成功后退出页面，保存失败的话弹窗提示是否重试。这里面需要用到的交互有：
- Android询问H5文档是否有改动
- H5告知Android是否有改动，Android根据告知选择是否显示保存弹窗
- Android调用H5的保存方法
- H5告知Android文档是否保存成功，Android根据告知选择是退出页面还是显示重试弹窗
二、核心功能
需要实现上述功能，落实到代码层面上就是实现：
- Android调用H5的方法
- H5调用Android方法。
三、Android调用H5的方法
Android中调用JS方法：customFunction：
mWebView.loadUrl("javascript:customFunction()");
当然在这之前需要先设置WebView支持JS。
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);
四、H5调用Android的方法
WebView依旧是提供了相应的方法：
mWebView.addJavascriptInterface(new JsInterface(this), "android");
public class JsInterface {
private Context mContext;
public JsInterface(Context c) {
mContext = c;
}
@JavascriptInterface
public void passValue(String value) {
androidText.setText(dataFormat.format(new Date()) + "\n接收到来自H5的信息：" + value);
}
}
addJavascriptInterface需要Android 4.2以上，它的俩个参数，第一个参数为提供给JS访问的对象，后一个参数为对象暴露在JS中的名称，JS可以使用该名称，访问到这个对象，进而调用对象中的方法。</br>
在暴露给JS的对象中添加了@JavascriptInterface注解的方法，可以直接在JS中被调用。这里也给出JS调用的示例：
<script>
function passValue1(value) {
window:android.passValue(value);
}
</script>
其中android为addJavascriptInterface方法的第二个参数值，passValue为暴露给JS的对象中添加了@JavascriptInterface注解的方法名。
