详解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()就可以。

以上就是为大家分享的Android JS相互调用的具体方法,希望对大家的学习有所帮助。

(0)

相关推荐

  • android调用国家气象局天气预报接口json数据格式解释

    国家气象局提供了三种数据的形式 网址在: http://www.weather.com.cn/data/sk/101010100.html http://www.weather.com.cn/data/cityinfo/101010100.html http://m.weather.com.cn/data/101010100.html 最后一种是解析最全面的. 数据解析格式: 第一个网址提供的json数据为: 复制代码 代码如下: {"weatherinfo":{"city&

  • Android和JavaScript相互调用的方法

    本文实例讲述了Android和JavaScript相互调用的方法.分享给大家供大家参考,具体如下: Html页面和Java代码结合的方式一般用在界面经常被更改 的情况下,可以讲html放在网络中,软件一打开就会访问网络获取到最新的界面.缺点是会受到网络信号的影响,从而导致访问速度慢. 1.用WebView来显示HTML代码 2.允许WebView执行JavaScript 复制代码 代码如下: webView.getSettings().setJavaScriptEnabled(true); 3.

  • Android中 webView调用JS出错的解决办法

    问题 webView调用JS出错. 复制代码 代码如下: class TestJS {         ......         public TestJS(){         }                 public void save(String data){                        webView.loadUrl("javascript: alert(" + data +")");         }         ..

  • Android中在WebView里实现Javascript调用Java类的方法

    为了方便网页和Android应用的交互,Android系统提供了WebView中JavaScript网页脚本调用Java类方法的机制.只要调用addJavascriptInterface方法即可映射一个Java对象到JavaScript对象上. 1.映射Java对象到JavaScript对象上 复制代码 代码如下: mWebView = (WebView) findViewById(R.id.wv_content); mWebView.setVerticalScrollbarOverlay(tr

  • android webview中使用Java调用JavaScript方法并获取返回值

    在android平板上用webview打开一个网页,调用里面的javascript方法,同时相互传参. 网上例子很少啊,基本都不能获取返回值,贴一个自己最后调试完的代码如下: Java: 复制代码 代码如下: protected void onCreate(Bundle savedInstanceState) { ........ x = (WebView)this.findViewById(R.id.webView_viewTable); x.setScrollBarStyle(View.SC

  • 详解Android JS相互调用

    最近在研究Android.JS相互调用,之前没怎么接触过,只知道loadUrl()就可以加载一个网页了,研究过之后发现Android可以调JS,JS也可以调Android原生控件,很开心啊.下面小编就开始喽: 原理就是Java和JS调用,在Android中是通过WebView来实现的. 下面先说一下简单的Android和JS相互调用 首先通过loadurl()来加载网页 WebView开启JS脚本执行 Android端提供JS调用的交互接口 简单的看一下代码: mWebView=(MyWebVi

  • Android WebView使用方法详解 附js交互调用方法

    目前很多Android app都内置了可以显示web页面的界面,会发现这个界面一般都是由一个叫做WebView的组件渲染出来的,学习该组件可以为你的app开发提升扩展性. 先说下WebView的一些优点: --可以直接显示和渲染web页面,直接显示网页 --webview可以直接用html文件(网络上或本地assets中)作布局 --和JavaScript交互调用 一.基本使用 首先layout中即为一个基本的简单控件: <WebView android:id="@+id/webView1

  • Android WebView的使用方法及与JS 相互调用

    Android WebView的使用方法及与JS 相互调用 1.添加网络权限 <uses-permission android:name="android.permission.INTERNET" /> 2.WebSettings 对访问页面进行设置. WebView mWebView = new WebView(this); WebSettings webSettings = mWebView .getSettings();//支持获取手势焦点,输入用户名.密码或其他 m

  • 详解Android.activity销毁流程的工作原理

    继续我们的源码解析,上一篇文章我们介绍了Activity的启动流程,一个典型的场景就是Activity a 启动了一个Activity b,他们的生命周期回调方法是: onPause(a) –> onCreate(b) –> onStart(b) –> onResume(b) –> onStop(a) 而我们根据源码也验证了这样的生命周期调用序列,那么Activity的销毁流程呢?它的生命周期的调用顺序又是这样的呢? 这里我们我做一个简单的demo,让一个Activity a启动A

  • 详解Android 进程

    多进程 如果需要的时候,app可以创建多进程. 在进程里面 各类组件元素的清单文件条目 . . 和 - 均支持 android:process 属性,此属性可以指定该组件应在哪个进程运行. 默认进程就是主进程.其他进程一般来说都是子进程. 2个activity在不同的进程里面,可以刷新UI吗? <activity android:name=".androidsample.ActivityProgressB" android:process=":progressb&quo

  • 详解Android广播Broadcast的启动流程

    目录 正文 广播的注册 广播的解注册 广播的发送 总结 正文 本文整体阅读下来相对Activity和Service的启动流程较容易,比较贴近我们日常代码开发习惯.我们曾经有个整机项目,多个APP跨进程交互,本来想采用AIDL进行的,但最终考虑到项目工期和其他同事的能力,最终在采用广播方式进行IPC. 那时,自己也在想,这么多个APP相互发信息,数据量也大,对整机性能有影响么?会不会存在丢失和内存问题.一脸茫然,网上也不会有类似信息告诉总结这种情况,本文也不会总结这个答案,因为看完之后心中自然有数

  • 详解 vue.js用法和特性

    前  言 最近用Vue.js做了一个数据查询平台,还做了一个拼图游戏,突然深深的感到了vue的强大. Vue.js是一套构建用户界面(user interface)的渐进式框架.与其他重量级框架不同的是,Vue 从根本上采用最小成本.渐进增量(incrementally adoptable)的设计.Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动. Vue.j

  • 详解Android中Intent对象与Intent Filter过滤匹配过程

    如果对Intent不是特别了解,可以参见博文<详解Android中Intent的使用方法>,该文对本文要使用的action.category以及data都进行了详细介绍.如果想了解在开发中常见Intent的使用,可以参见<Android中Intent习惯用法>. 本文内容有点长,希望大家可以耐心读完. 本文在描述组件在manifest中注册的Intent Filter过滤器时,统一用intent-filter表示. 一.概述 我们知道,Intent是分两种的:显式Intent和隐式

  • 详解android 通过uri获取bitmap图片并压缩

    详解android 通过uri获取bitmap图片并压缩 很多人在调用图库选择图片时会在onActivityResult中用Media.getBitmap来获取返回的图片,如下: Uri mImageCaptureUri = data.getData(); Bitmap photoBmp = null; if (mImageCaptureUri != null) { photoBmp = MediaStore.Images.Media.getBitmap(ac.getContentResolve

  • 详解 Android中Libgdx使用ShapeRenderer自定义Actor解决无法接收到Touch事件的问题

    详解 Android中Libgdx使用ShapeRenderer自定义Actor解决无法接收到Touch事件的问题 今天在项目中实现了一个效果,主要是画一个圆.为了后续使用方便,将这个圆封装在一个自定义Actor(CircleActot)中,后续想显示一个圆的时候,只要创建一个CircleActor中即可. 部分代码如下所示: package com.ef.smallstar.unitmap.widget; import android.content.res.Resources; import

随机推荐