App Webview與內(nèi)嵌web交互實(shí)現(xiàn)

實(shí)現(xiàn)的邏輯大體是這樣的，APP的webview可以攔截請(qǐng)求的鏈接地址，通過(guò)與內(nèi)嵌界面約定請(qǐng)求前綴（如：webjs2app://），后接請(qǐng)求內(nèi)容。

請(qǐng)求內(nèi)容如下：

  {"functionName":"sayHello',"args":["haha"],"success":"onSuccess","error":"onError"}

   是一個(gè)Json字串，包括信息有調(diào)用的App接口方法名、傳的參數(shù)、調(diào)用成功后回調(diào)的js方法名，調(diào)用失敗后回調(diào)的js方法名。抽象的很到位，可以做到通用。

   最終web請(qǐng)求接口地址如：webjs2app://{"functionname":"sayHello',"args":["haha"],"success":"onSuccess","error":"onError"}，App webview收到由webjs2app://打頭的請(qǐng)求地址時(shí)，就會(huì)把后面的請(qǐng)求內(nèi)容解析出來(lái)。。。上代碼。

     剛剛鏈接里面已經(jīng)有IOS和Web的代碼了，并且說(shuō)明的明白。我這里補(bǔ)充一下Android端對(duì)應(yīng)的實(shí)現(xiàn)。

第一步，重寫(xiě)一下 shouldOverrideUrlLoading，攔截約定的請(qǐng)求。

   private String protocolPrefix = "webjs2app://";  //這個(gè)前綴要用小寫(xiě)，因?yàn)?/span>webview會(huì)自動(dòng)將請(qǐng)求協(xié)議類型轉(zhuǎn)成小寫(xiě)的。

  mWebView.setWebViewClient(new WebViewClient() {

    @Override

    public boolean shouldOverrideUrlLoading(WebView view, String url) {

      return processURL(url);

    }

    。。。。

   }

第二步，解析請(qǐng)求接口數(shù)據(jù)

private boolean processURL(String url) {

int i = url.indexOf(protocolPrefix);

System.out.println(url);

if (url.indexOf(protocolPrefix) == 0) {

//strip protocol from the URL. We will getinput to call a native method

url = url.substring(protocolPrefix.length());

//Decode the url string

HashMap callInfo = JsonUtil.read(url,HashMap.class);

if (callInfo == null) {

//TODO:提示調(diào)用解析失敗

return false;

}

//Get function name. It is a required input

Object functionName =callInfo.get("functionName");

if (functionName == null) {

//TODO:提示未找到調(diào)用方法

return false;

}

Object success =callInfo.get("success");

Object error =callInfo.get("error");

Object args =callInfo.get("args");

callNativeFunction((String) functionName,args, success, error);

return false;

}

return true;

}

第三步，利用java反射，調(diào)用接口。

/**

* 方法接口調(diào)用

*

* @param functionName

* @param args

* @param success

* @param error

*/

private void callNativeFunction(StringfunctionName, Object args, Object success, Object error) {

try {

//使用反射，注意不能對(duì)JsFunctions類做混淆處理

Method method =JsFunctions.class.getMethod(functionName, WebView.class, Object.class,Object.class, Object.class);

Object invoke =method.invoke(JsFunctions.getInstance(),mWebView, args, success, error);

} catch (NoSuchMethodException e) {

//TODO:提示未找到調(diào)用方法

} catch (InvocationTargetException e) {

e.printStackTrace();

} catch (IllegalAccessException e) {

//TODO:提示權(quán)限訪問(wèn)

e.printStackTrace();

}

}

第四步，接口處理類

public class JsFunctions {

/**

* 單例

*/

private static JsFunctions instance = newJsFunctions();

/**

* sayHello接口

* @param webView

* @param args

* @param successFunc

* @param errorFunc

*/

public void sayHello(WebView webView,Object args, Object successFunc, Object errorFunc) {

if (args != null) {

Object name = ((ArrayList) args).get(0);

Log.d(name.toString());

if (successFunc != null)

callJSFunction(webView,successFunc.toString(), args);

} else {

if (errorFunc != null)

callJSFunction(webView,errorFunc.toString(), args);

}

}

/**

* 回調(diào)處理

* @param webView

* @param functionName

* @param args

*/

public void callJSFunction(WebView webView,String functionName, Object args) {

String argsJsonStr = null;

if (args != null) {

argsJsonStr = JsonUtil.write2String(args);

}

if (argsJsonStr != null)

webView.loadUrl("javascript:" +functionName + "('" + argsJsonStr + "')");

else

webView.loadUrl("javascript:" +functionName + "()");

}

public static JsFunctions getInstance() {

return instance;

}

}

好了，就到這里，有什么不足請(qǐng)多多指正。。。當(dāng)然，開(kāi)發(fā)完APP也是需要進(jìn)行全方位的檢測(cè)：www.ineice.com