Android JS相互调用详解

简介: 版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/49497227 Android JS相互调用详解最近在研究Android、JS相互调用,之前没怎么接触过,只知道loadUrl()就可以加载一个网页了,研究过之后发现Android可以调JS,JS也可以调Android原生控件,很开心啊。
版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/49497227

Android JS相互调用详解

最近在研究Android、JS相互调用,之前没怎么接触过,只知道loadUrl()就可以加载一个网页了,研究过之后发现Android可以调JS,JS也可以调Android原生控件,很开心啊。下面小编就开始喽:
原理就是Java和JS调用,在Android中是通过WebView来实现的。

下面先说一下简单的Android和JS相互调用
首先通过loadurl()来加载网页
WebView开启JS脚本执行
Android端提供JS调用的交互接口
简单的看一下代码:

mWebView=(MyWebView)findViewById(R.id.wv_container_information);
        mWebSetting = mWebView.getSettings();
        mWebSetting.setJavaScriptEnabled(true);
//js调用Android中的方法
        mWebView.addJavascriptInterface(this, "XXX");//XXX未html中的方法
        /**
     * 客户端提供send_comment方法被js调用
     * by:chenhe at:2015/09/28
     *
     * @param uuid     uuid
     * @param fun_name 调用的方法名
     * @param json     js给客户端的json
     */
    @JavascriptInterface
    public void send_comment(final String uuid, final String fun_name, final String json) {

        new Thread(new Runnable() {
            @Override
            public void run() {
                commend = CommandFactory.getInstance().createCommand(fun_name);
                if (commend != null) {
                    commend.setFun_name(fun_name);
                    commend.setmHandler(mHandler);
                    commend.setParam(json);
                    commend.setUuid(uuid);
                    commend.setWebView(mWebView);
                    commend.do_result(context);
                }
            }
        }).start();
    }

这里通过mWebView.addJavascriptInterface()实现调用JS中的方法,也就是说第二个参数为网页中的方法叫XXX();它里面的参数则为我下面send_command();方法中的参数然后我再做一些操作。最后通过loadurl();就实现调用了。很简答相信大家也都会用,也都用过,那么下面给大家详细介绍一下怎样通过这样的调用来实现JS调用Android端的一些控件。


步骤

首先JS调用客服端的某个方法,将需要的参数传递过来

然后客户端根据JS的需求去执行相关操作

执行完操作之后回掉JS方法

具体实现

第一步就是上面所描述的过程

这里省略了(其中fun_name就是JS要调的方法名字举个例子:比如它想要客户端实现弹出Dialog,那么web端定义一个方法名为:popup.alert)

客服端通过方法名字来执行相关操作

通过方法名我们本地去弹出Dialog,或者根据服务器返回的json数据来执行一些其他复杂的操作,我这里就不具体说明了,可以有很多,比如打开通讯录选择联系人、获取手机唯一标识符、设置导航栏、、弹出日期选择框等等。

执行完相关操作再回调JS的方法将信息返回给JS

比如上面的打开通讯录选择联系人之后我们可以将联系人的手机号姓名等属性通过Json返回给JS。
大体思路就是这样,看一下代码:

“`
@JavascriptInterface
public void send_comment(final String fun_name, final String json) {

    //根据fun_name处理不同业务
    new Thread(new Runnable() {
        @Override
        public void run() {
            //注意此处必须是异步处理
            JSONObject jsonObject = null;
            try {
                jsonObject = new JSONObject(json);
            } catch (JSONException e) {
                e.printStackTrace();
            }
            String title = jsonObject.optString("title");
            String message = jsonObject.optString("message");
            //TODO:根据message执行相关操作
            Message msg = new Message();
            msg.what = 0;
            msg.obj = jsonObject;
            handler.senMessage(msg);
        }
    }).start();
}

/**
 * 回掉JS方法将处理信息返回给JS
 * @param isSuccess
 * @param json
 */
public void returnToJs(final boolean isSuccess, final JSONObject json){
    Log.d("----", "javascript:app_result('" + isSuccess + "','" + json.toString() + "')");
            String data = "javascript:app_result('" + isSuccess + "','" + json.toString() + "')";
            webView.loadUrl(data);
}

private Handler handler = new Handler(){
    @Override
    public void handleMessage(Message msg) {
        super.handleMessage(msg);
        if (msg.what==0){
            //TODO:执行相关操作
            returnToJs(true, (JSONObject) msg.obj);
        }
    }
};

这样就实现了基本的JS调Android原生控件了,主要是和JS配合好就能完美实现了,现在好多的APP都用的这种方式来实现。所以说弄清楚这一块很有必要,其实也没什么,说是JS调用Android,其实就是Android这边提供一个java接口来loadurl()就可以。
因为小编是第一次用MD来编写的博客,所以说样式上可能不太好看,请大家见谅。如果说这边文章看的不太懂的话可以私聊小编,小编会给大家详细讲解的。
源码已经同步到我的GitHub上了
https://github.com/Hankkin/AndroidJSDemo/tree/master

相关文章
|
消息中间件 移动开发 JavaScript
JSBridge:混合开发中的双向通信[Android、iOS&JavaScript]
WebView 是移动端中的一个控件,它为 JS 运行提供了一个沙箱环境。WebView 能够加载指定的 url,拦截页面发出的各种请求等各种页面控制功能,JSB 的实现就依赖于 WebView 暴露的各种接口。由于历史原因,IOS以8为分界,Android以4.4为分界,分为高低两个版本。而它们的区别在于 —— 回调。高版本可以通过执行回调拿到 JS 执行完毕的返回值,然后准确进行下一步操作。而低版本无法执行回调!Hybrid App 的核心。
JSBridge:混合开发中的双向通信[Android、iOS&JavaScript]
|
4月前
|
移动开发 JavaScript Java
Android与JS互相调
Android与JS互相调
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的高校后勤网上报修系统安卓app附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的高校后勤网上报修系统安卓app附带文章源码部署视频讲解等
48 0
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的安卓的微博客系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的安卓的微博客系统附带文章和源代码部署视频讲解等
45 2
|
4月前
|
Web App开发 JavaScript 前端开发
Android端使用WebView注入一段js代码实现js调用android
Android端使用WebView注入一段js代码实现js调用android
70 0
|
6月前
android-agent-web中js-bridge案例
android-agent-web中js-bridge案例
96 2
|
6月前
|
存储 移动开发 JavaScript
【原生】sd.js帮助您简化繁重的获取数据、存储数据(CRUD)骚操作(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)
【原生】sd.js帮助您简化繁重的获取数据、存储数据(CRUD)骚操作(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)
|
JavaScript 前端开发 Android开发
Android AgentWeb WebView 与js交互总结
Android AgentWeb WebView 与js交互总结
333 0
|
JavaScript 前端开发 容器
JQuery javascript实现父子页面相互调用
JQuery javascript实现父子页面相互调用
106 0
|
JavaScript
js子级窗口相互调用父级的方法
js子级窗口相互调用父级的方法
js子级窗口相互调用父级的方法