Android 与h5交互 协议

释放双眼,带上耳机,听听看~!

H5调用原生的方式

方式可能有多种,根据我本人的开发经验,我接触过两种方式。

第一种

1.首先对WebView进行初始化

WebSettings settings = webview.getSettings();
settings.setJavaScriptEnabled(true); //允许在WebView中使用js

2.创建一个类JavaScriptMetod,专门用来给js提供可调用的方法

3.创建该类的构造方法,提供两个参数,WebView对象和上下文对象

private Context mContext;
private WebView mWebView;
public JavaScriptMethod(Context context, WebView webView) {
mContext = context;
mWebView = webView;
}

4.创建一个字符串常量,作为android与js通信的接口,即字符串映射对象

public static final String JAVAINTERFACE = "javaInterface";

5.接下来就是创建给js调用的方法,方法的参数接收一个json字符串(注意:在Android4.2之后,为了提高代码安全性,方法必须使用注解@JavascriptInterface,否则无法调用)

@JavascriptInterface
//andorid4.2(包括android4.2)以上,如果不写该注解,js无法调用android方法
public void showToast(String json){
Toast.makeText(context, json, Toast.LENGTH_SHORT).show();
}

6.在WebView初始化代码中执行如下代码,

//创建上面创建类的对象
JavaScriptMetod m = new JavaScriptMetod(this, webview);
//其实就是告诉js,我提供给哪个对象给你调用,这样js就可以调用对象里面的方法
//第二个参数就是该类中的字符串常量
webview.addJavascriptInterface(m, JavaScriptMetod.javaInterface);

现在,在js中就可以调用JavaScriptMetod中的方法了,调用方式如下

//参数一般为json格式
var json = {"name":"javascript"};
//javaInterface是上面所说的字符串映射对象
window.javaInterface.showToast(JSON.stringify(json));

网络上介绍js与android原生交互的文章里,大部分都是上面这种方式,但是这种方式并不适用于ios,也就是说,window.javaInterface.showToast(JSON.stringify(json))这样的js代码并不适用于ios,如果用以上的方法,就得分别为android和ios各写一套js代码。这样很显然是不太合理的,所以在实际开发中,一般都使用接下来的第二种方法。

第二种

这种方法实现的思想是js发出一个url请求,并将所需的参数添加到该url中。android端通过webView.setWebViewClient()拦截url,解析url中携带的参数,并根据参数信息进行相应的操作。

1.与方法一相同,首先都需要对webview进行初始化

    WebSettings settings = webview.getSettings();
settings.setJavaScriptEnabled(true); //允许在WebView中使用js

2.首先看js中的代码是怎么写的,

$("#showtoast").click(function () {
var json = {"data": "I am a toast"};
window.location.href="protocol://android?code=toast&data="+JSON.stringify(json);
});
$("#call").click(function () {
var json = {"data": "10086"};
window.location.href="protocol://android?code=call&data="+JSON.stringify(json);
});

这里定义两个点击事件,分别控制android显示吐司和打电话的操作。其中,protocol://android为自定义的H5与android间的通信协议,与http请求进行区分。code规定了要进行的操作,data为传输的数据。

2.android中的代码

webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
/**
* 通过判断拦截到的url是否含有pre,来辨别是http请求还是调用android方法的请求
*/
String pre = "protocol://android";
if (!url.contains(pre)) {
//该url是http请求,用webview加载url
return false;
}
//该url是调用android方法的请求,通过解析url中的参数来执行相应方法
Map<String, String> map = getParamsMap(url, pre);
String code = map.get("code");
String data = map.get("data");
parseCode(code, data);
return true;
}
});

其中,getParamsMap()方法从拦截到的url解析出code,data参数,parseCode()方法将根据不同的code进行相应的操作,代码如下:

private Map<String, String> getParamsMap(String url, String pre) {
Map<String, String> queryStringMap = new HashMap<>();
if (url.contains(pre)) {
int index = url.indexOf(pre);
int end = index + pre.length();
String queryString = url.substring(end + 1);
String[] queryStringSplit = queryString.split("&");
String[] queryStringParam;
for (String qs : queryStringSplit) {
if (qs.toLowerCase().startsWith("data=")) {
//单独处理data项,避免data内部的&被拆分
int dataIndex = queryString.indexOf("data=");
String dataValue = queryString.substring(dataIndex + 5);
queryStringMap.put("data", dataValue);
} else {
queryStringParam = qs.split("=");
String value = "";
if (queryStringParam.length > 1) {
//避免后台有时候不传值,如“key=”这种
value = queryStringParam[1];
}
queryStringMap.put(queryStringParam[0].toLowerCase(), value);
}
}
}
return queryStringMap;
}
private void parseCode(String code, String data) {
if(code.equals("call")) {
try {
JSONObject json = new JSONObject(data);
String phone = json.optString("data");
//执行打电话的操作,具体代码省略
PhoneUtils.call(this, phone);
} catch (JSONException e) {
e.printStackTrace();
}
return;
}
if(code.equals("toast")) {
try {
JSONObject json = new JSONObject(data);
String toast = json.optString("data");
Toast.makeText(this, toast, Toast.LENGTH_SHORT).show();
} catch (JSONException e) {
e.printStackTrace();
}
return;
}
}

参考博客:https://blog.csdn.net/so_huangbo/article/details/55522205?utm_source=itdadao&utm_medium=referral

人已赞赏
Android文章

Android 服务器外部h5与android进行交互

2020-3-5 15:20:24

Android文章

Android与H5交互

2020-3-5 16:19:45

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索