之前项目做过一些Android和Html5之间js交互方面的东西,今天有时间就总结一下:

一、为什么要进行js交互:

为了方便原生开发和Html之间数据传递,在静态页面的情况下可以改变原生开发的页面;

二、如何进行js交互:

(一)Android端调用H5页面

在Android端主要使用WebView来进行网页的加载,设置属性

// 获取WebSetting对象
WebSettings webSettings = webview.getSettings();
// 设置支持javascript
webSettings.setJavaScriptEnabled(true);
// 将Android里面定义的类对象AndroidJs暴露给javascript
webview.addJavascriptInterface(new AndroidJs(MainActivity.this), "AndroidJs");

调用方式:其中doAlert为H5页面的方法

 webview.loadUrl("javascript:doAlert()");

(二)H5端调用Android页面

H5端代码:

<input type="button" value="打招呼" onclick="AndroidJs.showToast()"/>
<input type="button" value="图书列表" onclick="AndroidJs.showList()"/>

Android端代码:

public class AndroidJs {
private Context mContext; public AndroidJs(Context context) {
this.mContext = context;
} @JavascriptInterface
public void showList() {
new AlertDialog.Builder(mContext)
.setTitle("图书列表")
.setIcon(R.mipmap.ic_launcher)
.setItems(
new String[]{"疯狂java讲义", "疯狂Android讲义",
"轻量级java EE开发"}, null)
.setPositiveButton("确定", null).create().show();
} @JavascriptInterface
public void showToast() { Toast.makeText(mContext, "hello", Toast.LENGTH_LONG).show();
} }

注:AndroidJs是连接Android与Html的桥梁标识,也是一个进行数据交互的类;

注:这里面的方法必须是共有的,类名与标识保持一致;

以上就是简单的js交互流程,备注的地方要特别注意,请多多指教

Android 与H5之间的js交互的更多相关文章

  1. Android中使用WebView与JS交互全解析

    1.概述首先,需要提出一个概念,那就是hybrid,主要意思就是native原生Android和h5混合开发.为什么要这样做呢?大家可以想象一下针对于同一个活动,如果使用纯native的开发方式,An ...

  2. 【Android开发】Webview 和 JS 交互问题

    一,安卓原生调用JS代码 1,js代码: function handlePasteDataFromApp(pasteStr) { showInfo('pasteData: aaaaa' + JSON. ...

  3. Android与H5交互(java与js的交互)

    一.理论概述 1.js调用java方法 直接调用WebView的该方法就可以添加接口了,不过先要启动交互 // 启用javascript mWebView.getSettings().setJavaS ...

  4. Android 和 JS交互方法初探

    起初有个需求,就是需要监听网页的图片点击,然后图片单独跳转到另一个页面单独显示 这里就需要用JS和Android Native方法之间的通信 先说上面的解决办法之前先引出两个Android的方法 1: ...

  5. Android和H5交互-基础篇

    hybrid App开发也不是什么新鲜事了,其中native和h5之间的交互则是必不可少的.Android中是如何和H5交互的? 1.webView加载页面 我们都知道在Android中是通过webV ...

  6. Android与js交互拍照上传资料

    应用场景:h5通知android端拍照,选相册,然后将图片路径上传成功之后,获取到网络路径,将此路径返还给h5界面,并展示出来. android与js快速交互 效果图如下:   1.在Activity ...

  7. Android应用开发 WebView与服务器端的Js交互

    最近公司再添加功能的时候,有一部分功能是用的html,在一个浏览器或webview中展示出html即可.当然在这里我们当然用webview控件喽 WebApp的好处: 在应用里嵌套web的好处有这么几 ...

  8. Android—android与js交互以及相互传参

    Android中可以通过WebView来实现与js的交互,让用户可以在android客户端看到js写的页面,接下来为大家介绍的就是怎样实现此功能: 首先android项目目录下有“assets”文件夹 ...

  9. Android WebView加载本地html并实现Java与JS交互

    最近做的一个项目中,用到自定义地图,将自定义地图转换成html页面,现在需要做的是如何将本地的html加载到android中,并可以实现交互. 相关讲解: 其实webview加载资源的速度并不慢,但是 ...

随机推荐

  1. DBS:同学录

    ylbtech-DatabaseDesgin:ylbtech-cnblogs(博客园)-数据库设计-2,Admin(用户后台) DatabaseName:同学录 Model: Type: Url: 1 ...

  2. 什么是HotSpot VM & 深入理解Java虚拟机 JVM

    参考 http://book.2cto.com/201306/25434.html 另外,这篇文章也是从一个系列中得出的: <深入理解Java虚拟机:JVM高级特性与最佳实践(第2版)> ...

  3. python核心编程学习记录之Web编程

    cgi未完待续

  4. spring boot 使用mybatis-generator

    mybatis-generator官网: http://www.mybatis.org/generator/running/runningWithMaven.html 在pom.xml中的 build ...

  5. 【Hadoop】Flink VS Spark?Drill VS Presto?

    参考资料: drill 官网:http://drill.apache.org/ drill安装使用:https://segmentfault.com/a/1190000002652348 drill简 ...

  6. linux fork的缺点

    Disadvantage of fork linux环境下, JBoss中调用curl下载文件,  发现curl占用的内存和JBoss一样多. Historical Background and Pr ...

  7. 2017.7.18 windows下ELK环境搭建

    参考来自:Windows环境下ELK平台的搭建 另一篇博文:2017.7.18 linux下ELK环境搭建 0 版本说明 因为ELK从5.0开始只支持jdk 1.8,但是项目中使用的是JDK 1.7, ...

  8. json-server模拟接口获取mock数据

    转载:http://blog.csdn.net/stevennest/article/details/76167343 安装json-server 运行以下命令 cnpm install json-s ...

  9. 如何手动编译运行带包 java 程序

    带包的java程序比普通java程序的编译稍微复杂一些.例如下面的例子: package cn.guopeng; import java.util.*; public class hello { pu ...

  10. 会话管理之Cookie技术

    会话管理是web开发中比较重要的环节,这一节主要总结下会话管理中的cookie技术. 1. 何为会话 会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个 ...