客户端相关知识学习（三）之Android原生与H5交互的实现

Android原生与H5交互的实现

H5调用原生的方式

方式可能有多种，根据开发经验，接触过两种方式。

方法一：Android向H5注入全局js对象，也就是H5调Android

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代码。这样很显然是不太合理的，所以在实际开发中，一般都使用接下来的第二种方法。

方法二：H5发起自定义协议请求，Android拦截请求，再由Android调用H5中的回调函数

这种方法实现的思想是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显示toast和打电话的操作。其中，protocol://android为自定义的H5与android间的通信协议，与http请求进行区分。code规定了要进行的操作，data为传输的数据。

3.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 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 getParamsMap(String url, String pre) { 　　ArrayMap queryStringMap = new ArrayMap<>(); 　　　　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; 　} }

最后，特别说明一下shouldOverrideUrlLoading()方法的返回值问题，该方法的返回值有三种：

• 返回true，即根据代码逻辑执行相应操作，webview不加载该url；

• 返回false，除执行相应代码外，webview加载该url；

• 返回super.shouldOverrideUrlLoading()，点进父类中，我们可以看到，返回的还是false。

转载于:https://www.cnblogs.com/kunmomo/p/11556135.html