通常在混合app中经常会使用js调用native的方法,一般是:

window.nativeApp.call(XXX);

直接调用native方法,对于简单的处理倒是可以,如果需要回调呢?期待的方式是:

window.nativeApp.call(XXX,function(res){
//XXX处理回调
});

这样处理才更符合项目的需求!

基于这样的思路,自己实现了基于Webview拓展了新功能,代码已上传到git:

https://github.com/cmlbeliever/RX-Volley

核心类为CrossWebview,Extension

下面分析下native处理回调的实现方式:

主要实现步骤:

  1. 将需js的回调函数保存起来
  2. 本地执行业务代码
  3. 调用js的回调函数

下面分别分析每个步骤

1、原先直接调用native方法,需要改成调用带有保存回调函数功能的方法,在此方法中保存回调函数,然后调用native方法。Android在Webview上是允许直接执行js的

webview.loadUrl("javascript:xxxx");

在webview初始化完成后,实例化具有保存回调功能的方法,js代码如下

        window.#{alias}Exports={};
window.#{alias}Extension={};
var #{alias}Counter = 0;
var #{alias}SuccessCbs = {}; window.#{alias}Extension.callbackJs=function (message) {
var data=message;
var cb;
if(data.native_id){
cb = #{alias}SuccessCbs[data.native_id];
};
if (cb) {
cb(data);
};
}; window.#{alias}Exports.callNative = function(params,callback) {
if(callback){
#{alias}Counter++;
#{alias}SuccessCbs[#{alias}Counter] = callback;
}
try{
params = JSON.parse(params);
}catch(e){
}
window.#{alias}.postMessage(#{alias}Counter,JSON.stringify({
native_id: #{alias}Counter,
params: params
}));
};

#{alias}是为了在一个webview添加多个native实例提供的占位符。后面会处理

window.#{alias}Exports.callNative 方会保存js的回调函数,并且调用native方法!

2、java类处理

接收到js的调用请求后,native处理自己的业务逻辑,首先要注册js回调:

webView.addExtension("native", new MyExtension());
class MyExtension extends Extension {
@Override
@JavascriptInterface
public void postMessage(int instanceId, final String message) {
//
webView.post(new Runnable() {
@Override
public void run() {
try {
JSONObject paramObject = new JSONObject(message);
JSONObject object = new JSONObject();
object.put("native_id", paramObject.getInt("native_id"));
object.put("result", "我是系统返回:" + System.currentTimeMillis());
webView.callJs("native", object);
} catch (Exception e) {
}
}
});
}
}

3、处理回调

若干时间后,指定的业务逻辑处理后,回调js,只需要调用callJs方法即可

     webView.callJs("native", object);
demo:
public void callJs(View v) throws Exception {
JSONObject object = new JSONObject();
object.put("native_id", 1);
object.put("result", "我是系统主动调用:" + System.currentTimeMillis());
webView.callJs("native", object);
}

callJs会调用步骤1保存的回调函数!

这样一个js调用native,native回调js的闭环就完整的实现了。

4、多次回调处理

由于业务需要,可能会出现js调用一次native后,native需要回调多次js方法

此插件完成回调的前提要求是js调用过native。之后再native就可以无限次调用js

具体的实现方式到git上查看,下面贴出CrossWebview代码

package com.cml.framework.crosswebview;

import android.annotation.TargetApi;
import android.content.Context;
import android.os.Build;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.util.Log;
import android.webkit.WebView; import org.json.JSONObject; import java.util.HashMap;
import java.util.Map; /**
* Created by cmlBeliever on 2016/2/3.
*/
public class CrossWebview extends WebView { private static final String TAG = CrossWebview.class.getSimpleName(); public static final String NATIVE_ID = "native_id"; private Map<String, Extension> extensions = new HashMap<String, Extension>(); public CrossWebview(Context context) {
super(context);
} public CrossWebview(Context context, AttributeSet attrs) {
super(context, attrs);
} public CrossWebview(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
} @TargetApi(Build.VERSION_CODES.LOLLIPOP)
public CrossWebview(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
} public CrossWebview(Context context, AttributeSet attrs, int defStyleAttr, boolean privateBrowsing) {
super(context, attrs, defStyleAttr, privateBrowsing);
} @Override
public void addJavascriptInterface(Object object, String name) {
throw new IllegalStateException("addJavascriptInterface not support! see addExtension !!");
} /**
* 添加拓展功能,多个相同的extension只会保存第一个
*
* @param extension
*/
public void addExtension(String alias, Extension extension) { if (TextUtils.isEmpty(alias)) {
throw new IllegalArgumentException("alias can not be null!!");
} if (extensions.containsKey(alias)) {
return;
}
this.extensions.put(alias, extension);
super.addJavascriptInterface(extension, alias); String baseJs = new JsBuilder(getContext(), alias).build(); loadUrl(baseJs);
} /**
* 调用js的方法
* @param alias
* @param object
*/
public void callJs(String alias, JSONObject object) { if (object.optInt(NATIVE_ID, -1) == -1) {
if (Log.isLoggable(TAG, Log.WARN)) {
Log.w(TAG, "callJs() : native_id is required!!");
}
return;
} String jsFormat = "javascript:window.%sExtension.callbackJs(%s)";
loadUrl(String.format(jsFormat, alias, object.toString()));
} static class JsBuilder {
private String baseJs;
private String alias; public JsBuilder(Context context, String alias) {
baseJs = context.getString(R.string.js_format);
this.alias = alias;
} public String build() {
baseJs = baseJs.replace("#{alias}", alias);
return "javascript:" + baseJs;
}
} }

Js调用Android回调处理的更多相关文章

  1. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

  2. [转]JS调用Android里面的方法,Android调用JS里面的方法

    FROM : http://blog.csdn.net/hj563308597/article/details/45197709 Android WebView 在公司Android的开发过程中遇到一 ...

  3. PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码

    PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) ...

  4. js调用android本地java代码

    js调用android本地java代码 当在Android上使用WebView控件开发一个Web应用时,可以创建一个通过Javascript调用Android端java代码的接口.也就是可以通过Jav ...

  5. WebView中JS调用Android Method 遇到的坑整理

    WebView是android中常用的一个组件,其作用是展示网页,并让网页和android app进行一些业务逻辑上的交互. 其坑无数,相信用过的都知道,一个一个来解决吧. 1.怎么互调: <! ...

  6. JS调用android逻辑方法

    1.安卓打开webview时做如下配置 并做一回调接口 这里注意的是 参数 FULIBANG   和 回调接口方法  jsCallWebView 一会在JS里会用到 ================= ...

  7. 通过js调用android原生方法

    有时候我们有这样一个需求,监听html中控件的一些事件.例如点击html中某个按钮,跳转到别的activity,复制某段文本. 首先是对webview的设置: myWebView = (WebView ...

  8. Android与JS混编(js调用android相机)

       参考android相机调用,http://blog.csdn.net/yanzi1225627/article/details/33028041/,谢谢 相机怎么调用就不做赘述了,下面是js调用 ...

  9. WebView之js调用Android类的方法传递数据

    1,具体的思路如下: 在android中写一个Activity,里面写一个webview,这个webview加载本地的一个html文件,显示这个网页,这个网页包括一个用户名和密码的输入框和两个按钮(只 ...

随机推荐

  1. [Php][linux][nginx] 安装总结

    就想总结一份安装环境文档,因为文档很多问题也很多,总结一份自己的安装文档! 首先,环境CentOS7,linux环境,windows! 1. 网络配置! vi /etc/sysconfig/netwo ...

  2. 关于对vue-router的优化(详尽版)

    这两天总结了关于vue-router优化的几点技法,做个笔记 在基于vue的移动端app中,通过vue-router可以便捷的进入某一路由或回退到上一路由,但是若不对vue-router做相关优化处理 ...

  3. redis:String字符串类型(三)

    字符串拼接(如果key不存在则创建):append name " applesnt" 获取字符串的长度:strlen name 127.0.0.1:6379> set nam ...

  4. 漫谈LiteOS-端云互通组件-MQTT开发指南(下)

    1.介绍 SDK简介 Agent Tiny是部署在具备广域网能力.对功耗/存储/计算资源有苛刻限制的终端设备上的轻量级互联互通中间件,您只需调用API接口,便可实现设备快速接入到物联网平台以及数据上报 ...

  5. swoole--服务平滑重启

    参考来源:https://wiki.swoole.com/wiki/page/p-server/reload.html shell代码: echo "loading..." pid ...

  6. 美国在线CEO:雅虎被Verizon收购或导致裁员

    北京时间9月13日消息,据外媒报道,AOL首席执行官蒂姆·阿姆斯特朗(Tim Armstrong)称,雅虎.AOL和Verizon整合业务,将导致"部分工作岗位的变化". 阿姆斯特 ...

  7. 在CentOS 7中安装配置JDK8

    为什么80%的码农都做不了架构师?>>>   ###说明 参考博客:http://blog.csdn.net/czmchen/article/details/41047187 系统环 ...

  8. 团队中的 Node.js 具体实践

    前天,我们公司前端团队的几个人一起去大搜车参加了芋头所组织的「搜车 Node Party」.这是我第一次参加与 Node.js 相关的线下聚会,如果不算「杭JS」的话. 聚会现场 这次聚会的主题全部是 ...

  9. WCF客户端和服务的实现

    WCF客户端和服务 ?服务器端: – 定义和实现服务契约 – 为服务类型构建ServiceHost实例,暴露endpoints – 打开通讯通道 ?客户端: – 需要服务契约的一个副本和关于endpo ...

  10. C语言编程入门题目--No.12

    题目:判断101-200之间有多少个素数,并输出所有素数. 1.程序分析:判断素数的方法:用一个数分别去除2到sqrt(这个数),如果能被整除, 则表明此数不是素数,反之是素数. 2.程序源代码: # ...