浅析App Webview与内嵌web实现交互

基于移动终端市场的火热和人手一机的时代，我也想着能够用Android开发一个手机app，要求不高，只需要首页嵌入至app内即可，点击内部链接采用默认手机浏览器打开即可。就纯粹地想引导一下用户，从而也从更多渠道获得用户的了解。 下面我就讲讲我是如何将web站点页面嵌入Android app内的。 一、Android开发环境部署 1、google一下“adt-bundle-windows-x86-20130917.zip”，然后下载下来进行解压过后就已经是一个eclipse和adt的一个整合IDE了的。
2、下载符合自己电脑版本的JDK进行安装。 3、接着是配置环境变量。 至于更多的Android环境部署请参考文章：Android开发入门教程...
几年前我自己做了一个web站点,如今人气还可以.基于移动终端市场的火热和人手一机的时代,我也想着能够用Android开发一个手机app,要求不高,只需要首页嵌入至app内即可,点击内部链接采用默认手机浏览器打开即可.就纯粹地想引导一下用户,从而也从更多渠道获得用户的了解.

实现的逻辑大体是这样的，APP的webview可以拦截请求的链接地址，通过与内嵌界面约定请求前缀（如：webjs2app://），后接请求内容。
[align=left][/align]
[align=left]请求内容如下：[/align]
[align=left][/align]
[align=left]  {"functionName":"sayHello',"args":["haha"],"success":"onSuccess","error":"onError"}[/align]
[align=left][/align]
[align=left]   是一个Json字串，包括信息有调用的App接口方法名、传的参数、调用成功后回调的js方法名，调用失败后回调的js方法名。抽象的很到位，可以做到通用。[/align]
[align=left][/align]
[align=left]   最终web请求接口地址如：webjs2app://{"functionname":"sayHello',"args":["haha"],"success":"onSuccess","error":"onError"}，App webview收到由webjs2app://打头的请求地址时，就会把后面的请求内容解析出来。。。上代码。[/align]
[align=left][/align]
[align=left]     刚刚链接里面已经有IOS和Web的代码了，并且说明的明白。我这里补充一下Android端对应的实现电脑维修。[/align]
[align=left][/align]
第一步，重写一下 shouldOverrideUrlLoading，拦截约定的请求。

[align=left][/align]
[align=left]   private String protocolPrefix = "webjs2app://";  //这个前缀要用小写，因为webview会自动将请求协议类型转成小写的。[/align]
[align=left][/align]
[align=left]  mWebView.setWebViewClient(new WebViewClient() {[/align]
[align=left][/align]
[align=left]    @Override[/align]
[align=left]    public boolean shouldOverrideUrlLoading(WebView view, String url) {[/align]
[align=left]      return processURL(url);[/align]
[align=left]    }[/align]
[align=left][/align]
[align=left]    。。。。[/align]
[align=left][/align]
[align=left]   }[/align]
[align=left][/align]
[align=left][/align]
[align=left]第二步，解析请求接口数据[/align]
[align=left][/align]
[align=left]private boolean processURL(String url) {[/align]
[align=left]int i = url.indexOf(protocolPrefix);[/align]
[align=left]System.out.println(url);[/align]
[align=left]if (url.indexOf(protocolPrefix) == 0) {[/align]
[align=left]//strip protocol from the URL. We will getinput to call a native method[/align]
[align=left]url =url.substring(protocolPrefix.length());[/align]
[align=left][/align]
[align=left]//Decode the url string[/align]
[align=left]HashMap callInfo = JsonUtil.read(url,HashMap.class);[/align]
[align=left][/align]
[align=left]if (callInfo == null) {[/align]
[align=left]//TODO:提示调用解析失败[/align]
[align=left]return false;[/align]
[align=left]}[/align]
[align=left]//Get function name. It is a required input[/align]
[align=left]Object functionName =callInfo.get("functionName");[/align]
[align=left]if (functionName == null) {[/align]
[align=left]//TODO:提示未找到调用方法[/align]
[align=left]return false;[/align]
[align=left]}[/align]
[align=left]Object success =callInfo.get("success");[/align]
[align=left]Object error =callInfo.get("error");[/align]
[align=left]Object args =callInfo.get("args");[/align]
[align=left][/align]
[align=left]callNativeFunction((String) functionName,args, success, error);[/align]
[align=left]return false;[/align]
[align=left]}[/align]
[align=left][/align]
[align=left]return true;[/align]
[align=left]}[/align]
[align=left][/align]
[align=left]第三步，利用java反射，调用接口。[/align]
[align=left][/align]
[align=left]/**[/align]
[align=left]* 方法接口调用[/align]
[align=left]*[/align]
[align=left]* @param functionName[/align]
[align=left]* @param args[/align]
[align=left]* @param success[/align]
[align=left]* @param error[/align]
[align=left]*/[/align]
[align=left]private void callNativeFunction(StringfunctionName, Object args, Object success, Object error) {[/align]
[align=left]try {[/align]
[align=left]//使用反射，注意不能对JsFunctions类做混淆处理[/align]
[align=left]Method method =JsFunctions.class.getMethod(functionName, WebView.class, Object.class,Object.class, Object.class);[/align]
[align=left]Object invoke =method.invoke(JsFunctions.getInstance(),mWebView, args, success, error);[/align]
[align=left]} catch (NoSuchMethodException e) {[/align]
[align=left]//TODO:提示未找到调用方法[/align]
[align=left]} catch (InvocationTargetException e) {[/align]
[align=left]e.printStackTrace();[/align]
[align=left]} catch (IllegalAccessException e) {[/align]
[align=left]//TODO:提示权限访问[/align]
[align=left]e.printStackTrace();[/align]
[align=left]}[/align]
[align=left][/align]
[align=left]}[/align]
[align=left][/align]
[align=left]第四步，接口处理类[/align]
[align=left][/align]
[align=left]public class JsFunctions {[/align]
[align=left][/align]
[align=left]/**[/align]
[align=left]* 单例[/align]
[align=left]*/[/align]
[align=left]private static JsFunctions instance = newJsFunctions();[/align]
[align=left][/align]
[align=left]/**[/align]
[align=left]* sayHello接口[/align]
[align=left]* @param webView[/align]
[align=left]* @param args[/align]
[align=left]* @param successFunc[/align]
[align=left]* @param errorFunc[/align]
[align=left]*/[/align]
[align=left]public void sayHello(WebView webView,Object args, Object successFunc, Object errorFunc) {[/align]
[align=left]if (args != null) {[/align]
[align=left]Object name = ((ArrayList) args).get(0);[/align]
[align=left]Log.d(name.toString());[/align]
[align=left]if (successFunc != null)[/align]
[align=left]callJSFunction(webView,successFunc.toString(), args);[/align]
[align=left]} else {[/align]
[align=left]if (errorFunc != null)[/align]
[align=left]callJSFunction(webView,errorFunc.toString(), args);[/align]
[align=left]}[/align]
[align=left]}[/align]
[align=left][/align]
[align=left]/**[/align]
[align=left]* 回调处理[/align]
[align=left]* @param webView[/align]
[align=left]* @param functionName[/align]
[align=left]* @param args[/align]
[align=left]*/[/align]
[align=left]public void callJSFunction(WebView webView,String functionName, Object args) {[/align]
[align=left]String argsJsonStr = null;[/align]
[align=left]if (args != null) {[/align]
[align=left]argsJsonStr = JsonUtil.write2String(args);[/align]
[align=left]}[/align]
[align=left]if (argsJsonStr != null)[/align]
[align=left]webView.loadUrl("javascript:" +functionName + "('" + argsJsonStr + "')");[/align]
[align=left]else[/align]
[align=left]webView.loadUrl("javascript:" +functionName + "()");[/align]
[align=left][/align]
[align=left]}[/align]
[align=left][/align]
[align=left]public static JsFunctions getInstance() {[/align]
[align=left]return instance;[/align]
[align=left]}[/align]
[align=left]}[/align]
[align=left][/align]
好了，就到这里，有什么不足请多多指正。。。当然，开发完APP也是需要进行全方位的检测：www.ineice.com