App Webview與內嵌web互動實現

標籤：

實現的邏輯大體是這樣的，APP的webview可以攔截請求的連結地址，通過與內嵌介面約定請求首碼（如：webjs2app://），後接請求內容。

 

請求內容如下：

 

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

 

   是一個Json字串，包括資訊有調用的App介面方法名、傳的參數、調用成功後回調的js方法名，調用失敗後回調的js方法名。抽象的很到位，可以做到通用。

 

   最終web請求介面地址如：webjs2app://{"functionname":"sayHello‘,"args":["haha"],"success":"onSuccess","error":"onError"}，App webview收到由webjs2app://打頭的請求地址時，就會把後面的請求內容解析出來。。。上代碼。

 

      剛剛連結裡面已經有IOS和Web的代碼了，並且說明的明白。我這裡補充一下Android端對應的實現。

 

第一步，重寫一下 shouldOverrideUrlLoading，攔截約定的請求。

 

    private String protocolPrefix = "webjs2app://";  //這個首碼要用小寫，因為webview會自動將請求協議類型轉成小寫。

 

   mWebView.setWebViewClient(new WebViewClient() {

 

     @Override

     public boolean shouldOverrideUrlLoading(WebView view, String url) {

       return processURL(url);

     }

 

    。。。。

 

   }

 

 

第二步，解析請求介面資料

 

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 get input 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:提示調用解析失敗

return false;

}

//Get function name. It is a required input

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

if (functionName == null) {

//TODO:提示未找到調用方法

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反射，調用介面。

 

/**

* 方法介面調用

*

* @param functionName

* @param args

* @param success

* @param error

*/

private void callNativeFunction(String functionName, Object args, Object success, Object error) {

try {

//使用反射，注意不能對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:提示未找到調用方法

} catch (InvocationTargetException e) {

e.printStackTrace();

} catch (IllegalAccessException e) {

//TODO:提示許可權訪問

e.printStackTrace();

}

 

}

 

第四步，介面處理類

 

public class JsFunctions {

 

/**

* 單例

*/

private static JsFunctions instance = new JsFunctions();

 

/**

* 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);

}

}

 

/**

* 回調處理

* @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;

}

}

 

好了，就到這裡，有什麼不足請多多指正。。。當然，開發完APP也是需要進行全方位的檢測：www.ineice.com

App Webview與內嵌web互動實現