文档章节

App Webview与内嵌web交互实现

 红豆与绿豆
发布于 2015/10/16 11:53
字数 636
阅读 90
收藏 4

实现的逻辑大体是这样的,APPwebview可以拦截请求的链接地址,通过与内嵌界面约定请求前缀(如: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://打头的请求地址时,就会把后面的请求内容解析出来。。。上代码。

 

      刚刚链接里面已经有IOSWeb的代码了,并且说明的明白。我这里补充一下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


© 著作权归作者所有

共有 人打赏支持
粉丝 3
博文 49
码字总数 21798
作品 0
南昌
起点海外版 Hybrid App-内嵌页优化实践

本文作者:刘文涛 原创声明:本文为阅文前端团队 YFE 成员出品,请尊重原创,转载请联系公众号 (id: yuewen_YFE) 获取授权,并注明作者、出处和链接。 今年年初我司开启了起点品牌的海外之旅...

阅文集团前端团队
06/25
0
0
微信小程序与内嵌网页交互实现支付功能

上个月,小程序开放了新功能,支持内嵌网页,所以我就开始了小程序内嵌网页之路,之前我只是个小安卓。 小程序webview.PNG 内嵌网页中可使用JSSDK 1.3.0提供的接口,可坑就来了,居然不支持支...

陈树鸿
2017/12/17
0
0
android WebView详解

浏览器控件是每个开发环境都具备的,这为马甲神功提供了用武之地,windows的有webbrowser,android和ios都有webview。只是其引擎不同,相对于微软的webbrowser,android及ios的webview的引擎...

amigos_wu
2012/06/25
0
1
android WebView总结

浏览器控件是每个开发环境都具备的,这为马甲神功提供了用武之地,windows的有webbrowser,android和ios都有webview。只是其引擎不同,相对于微软的webbrowser,android及ios的webview的引擎...

迷途d书童
2012/03/28
8.2K
1
Android:最全面的 Webview 详解

前言 现在很多App里都内置了Web网页(Hyprid App),比如说很多电商平台,淘宝、京东、聚划算等等,如下图 那么这种该如何实现呢?其实这是Android里一个叫WebView的组件实现的。今天我将全面...

临江仙卜算子
07/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

计算卷积神经网络浮点数运算量

前言 本文主要是介绍了,给定一个卷积神经网络的配置之后,如何大概估算它的浮点数运算量。 相关代码:CalFlops,基于MXNet框架的 Scala 接口实现的一个计算MXNet网络模型运算量的demo。 正文...

Ldpe2G
今天
1
0
Sql语言与MySql数据库

1. 数据库简介 1. 数据库,就是存储数据的仓库,只能通过sql语言来访问,数据库也是一个文件系统。通常,MySQL、Oracle等数据库,也被称为关系型数据库,其保存的不仅仅只是数据,还包括数据...

江左煤郎
今天
1
0
IDEA 取消自动import .*

打开设置 > Editor > Code Style > Java > Scheme Default > Imports ① 将 Class count to use import with "*" 改为 99 (导入同一个包的类超过这个数值自动变为 * ) ② 将 Names count ......

乔老哥
今天
3
0
PostGIS学习笔记(开篇)

PostGIS事实上算是笔者开始写博客的第一篇内容。而事实上那篇博文的内容并不丰富,笔者对PostGIS的了解仍然不多,然而17年在OSGeo课程学习时对PostGIS又有了进一步了解,并逐步发现它的强大。...

胖胖雕
今天
3
0
【Centos】在nginx服务器中配置php和mysql

接上一章《【Centos】利用Vultr服务器和namesilo布网》(https://my.oschina.net/u/3776619/blog/2051986),在Centos中配置好nginx,并在iptables中开启了80端口,和为了远程mysql操作方便开...

yongh701
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部