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

时间: 2024-10-11 07:45:51

App Webview与内嵌web交互实现的相关文章

1、内嵌web ,web内用api对象

1. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <meta name=&q

015-Spring Boot 定制和优化内嵌的Tomcat

一.内嵌web容器 参看http://www.cnblogs.com/bjlhx/p/8372584.html 查看源码可知提供以下三种: 二.定制优化tomcat 2.1.配置文件配置 通过application.properties配置tomcat 端口配置:server.port=10001 地址配置:server.adress=192.168.1.1     通过ServerProperties查看到tomcat变量,进入即可配置,如下 启用日志配置: server.tomcat.acc

Android内嵌网页webview点击其中的链接跳转到我们应用内的Activity

在一个大的Android项目中,由于客户端来不及更新和实现,经常会内嵌一些网页(在一些大型的互联网公司,PC的产品总是跑在客户端的前面),比如活动页面,通常可以内嵌用html5实现的页面,可以适配手机.但是这些网页中有好多链接,但是这些链接有些内容有是我们客户端已经实现的,比如有一个注册链接,其实客户端也实现了注册功能,我们不想再继续跳转到网页注册,而是打开客户端某个注册Activity,可以通过以下方式来实现: xml 文件,如下: java代码如下: ? 1 2 3 4 5 6 7 8 9

WPF内嵌Flsh并交互

将flash嵌入WPF页面: //添加加载flash的控件 // 创建 host 对象            System.Windows.Forms.Integration.WindowsFormsHost host = new System.Windows.Forms.Integration.WindowsFormsHost(); // 实例化 axShockwaveFlash1            axShockwaveFlash1 = new AxShockwaveFlashObjec

用vue做app内嵌页遇到的坑

公司要求用vue做一个微信端的网站,其中还包含一些app的内嵌页.开始的时候没想那么多,就直接用vue-cli搭了一个单页的vue项目,可随着项目越做越大,页面越来越多,问题就开始暴露出来了. 众所周知,单页面程序优点是在页面初始化时加载相应的HTML.JavaScript 和 CSS,一旦页面加载完成了,就不用再做其他的加载和跳转了,极大的提升了页面的流畅性,提供良好的用户体验.那么问题来了,把所有东西都放在初始化的时候做,就造成了页面首次加载需要更长的等待时间.而对于那些作为app内嵌的页面

第03篇. 标准Web项目Jetty9内嵌API简单启动

一直以来,想改变一些自己早已经习惯的事情. 到了一定年龄,便要学会寡言,每一句话都要有用,有重量. 喜怒不形于色,大事淡然,有自己的底线. --胖先生 昨天,简单的说了一下关于Jetty9的配置,大家都在使用Maven的年代,而胖先生再弄标准web项目中内嵌服务器,这是给我的学生准备的,如果有对这个方面吐槽的请绕行! 第一步,在STS[或Eclipse]中搭建一个动态的WEB项目,对于大家应该是一个小CASE,这里我使用的是上一节课做的SpringMVC+MyBatis的项目的登录示例. 第二步

[小程序开发] 微信小程序内嵌网页web-view开发教程

为了便于开发者灵活配置小程序,微信小程序开放了内嵌网页能力.这意味着小程序的内容不再局限于pages和large,我们可以借助内嵌网页丰富小程序的内容.下面附上详细的开发教程(含视频操作以及注意事项) 一.小程序内嵌网页web-view教程 1) 微信公众平台,登录小程序账号 2) 左侧-设置-开发设置-业务域名-配置 3) 小程序管理员微信扫码 4) 填写小程序业务域名,域名需ICP备案 5) 下载校检文件上传至服务器指定目录,保存 6) 小程序业务域名配置完成7) 打开微信开发者工具,添加小

小程序 webView 内嵌h5

前端时间搞了小程序跑h5的流程,趁着这段稍微空闲的时间整理下,和大家一起分享下 1.内嵌h5,小程序场景判断 wx.miniprogram.getev(fn)  ,   该方法是微信提供的api,注意的是,该方法是异步的 .引用微信的JS-SDK版本要相应版本(推荐用JSSDK 1.3.2或者以上),否则会出现方法不存在,或者其他问题. 2 web-view 中转,写个公用跳转页面(用的是wepy框架) <template> <web-view src="{{pageUrl}}

web端,qq互联以及微信登录接入流程(内嵌页面)总结

前言 实习过程中,我参与了web版相册管家的开发,负责登陆页面的前后端逻辑. 需要在登陆页接入QQ互联和微信扫码登陆,而且是用页面内嵌方式.回头来看其实两者都有文档指导,步骤清楚,并不复杂.但是第一次接触难免踩坑,在此梳理如下,方便今后开发参考. QQ互联 开发文档 https://wiki.connect.qq.com/%E7%BD%91%E7%AB%99%E5%BA%94%E7%94%A8%E6%8E%A5%E5%85%A5%E6%B5%81%E7%A8%8B 应用申请 申请appid和ap