之前项目做过一些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. CURL简单使用

    学习地址:https://yq.aliyun.com/articles/33262 curl的简单使用步骤 要使用cURL来发送url请求,具体步骤大体分为以下四步: 1.初始化2.设置请求选项3.执 ...

  2. Snapdragon profiler连不上 android手机

    adb devices也是空 开发者选项里面该开的都开了 就可以了 对了数据线不对也会连不上...

  3. ES6中的async函数

    一.概述 async 函数是 Generator 函数的语法糖 使用Generator 函数,依次读取两个文件代码如下 var fs = require('fs'); var readFile = f ...

  4. ES6中的迭代器(Iterator)和生成器(Generator)(二)

    一.内建迭代器 迭代器是ES6的一个重要组成部分,在ES6中,已经默认为许多内建类型提供了内建迭代器,只有当这些内建迭代器无法实现目标时才需要自己创建.通常来说当定义自己的对象和类时才会遇到这种情况, ...

  5. 【Zookeeper】Zookeeper部署笔记

    Zookeeper部署笔记 .上传zk安装包 .解压 .配置(先在一台节点上配置) .1添加一个zoo.cfg配置文件 $ZOOKEEPER/conf mv zoo_sample.cfg zoo.cf ...

  6. 利用chrony和ntp搭建时间同步服务器

    利用chrony和ntp搭建时间同步服务器 环境说明 系统版本    CentOS 6.9 x86_64 Network Time Protocol(NTP,网络时间协议)用于同步它所有客户端时钟的服 ...

  7. 2017.3.31 spring mvc教程(六)转发、重定向、ajax请求

    学习的博客:http://elf8848.iteye.com/blog/875830/ 我项目中所用的版本:4.2.0.博客的时间比较早,11年的,学习的是Spring3 MVC.不知道版本上有没有变 ...

  8. 《大话操作系统——做坚实的project实践派》(3)

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbG1ub3M=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...

  9. 数据库设计--数据流图(DFD)

    1.数据流图的定义 数据流图(DFD)是结构化分析方法中使用的工具,它以图形的方式描绘数据在系统中流动和处理的过程, 因为它仅仅反映系统必须完毕的逻辑功能.所以它是一种功能模型. 在结构化开发方法中. ...

  10. LeetCode题目:Minimum Path Sum

    原题地址:https://leetcode.com/problems/minimum-path-sum/ 大意:给出一个二维数组(int类型),求出从左上角到右下角最短的路径. 解决方法:动态规划 c ...