文档章节

Android Webview 和Javascript交互,实现Android和JavaScript相互调用

切切歆语
 切切歆语
发布于 2017/02/10 17:43
字数 701
阅读 160
收藏 0

#程序员薪资揭榜#你做程序员几年了?月薪多少?发量还在么?>>>

在Android的开发过程中、遇到一个新需求、那就是让Java代码和Javascript代码进行交互、在IOS中实现起来很麻烦、而在Android中相对来说容易多了、Android对这种交互进行了很好的封装、我们可以很简单的用Java代码调用WebView中的js函数、也可以用WebView中的js来调用Android应用中的Java代码。

案例主要包含了:

  1.  Html中调用Android方法
  2. Android调用JS方法无参数
  3. Android调用JS方法有参数
  4. Android调用JS方法有参数且有返回值处理方式1
  5. Android调用JS方法有参数且有返回值处理方式2(Android4.4以上)

1:创建JS对象

webView.addJavascriptInterface(new JsInterface(), "obj");
public class JsInterface {
	//JS中调用Android中的方法 和返回值处理的一种方法
		
	/****
          * Html中的点击事件 onclick
	  *  <input type="button" value="结算" onclick="showToast('12')">
	  * @param toast
	  */
	@JavascriptInterface
	public void showToast(String toast) {
	  Toast.makeText(MainActivity.this, "你的商品价格是:¥"+toast, Toast.LENGTH_SHORT).show();
	}
}
 function showToast(toast) { 
	var money=toast*3;
	javascript:obj.showToast(money);
}

2:

webView.loadUrl("javascript:funFromjs()");
function funFromjs(){
    document.getElementById("helloweb").innerHTML="div显示数据,无参数";
}

3:

webView.loadUrl("javascript:funJs('Android端传入的信息,div标签中显示,含参数')");
function funJs(msg){
   document.getElementById("hello2").innerHTML=msg;
}

4: 

webView.loadUrl("javascript:sum(6,6)");
/***
 * Android代码调用获取J是中的返回值
 * 
 * @param result
*/
   @JavascriptInterface
   public void onSum(int result) { 
	Toast.makeText(MainActivity.this, "Android调用JS方法且有返回值+计算结果=="+result, Toast.LENGTH_SHORT).show();
   } 
function sum(i,m){ 
    var result = i*m; 
    document.getElementById("h").innerHTML= "Android调用JS方法且有返回值--计算结果="+result; 
    javascript:obj.onSum(result) 
} 

5:

 webView.evaluateJavascript("sumn(6,11)", new ValueCallback<String>() {
         @Override
	 public void onReceiveValue(String value) {
	     Toast.makeText(MainActivity.this, "返回值"+value, Toast.LENGTH_SHORT).show();
           }
});
function sumn(i,m){ 
     var result = i*m; 
     document.getElementById("hh").innerHTML= "Android调用JS方法且有返回值--计算结果="+result; 
     return result;
} 

   注意:

1、Java 调用 js 里面的函数、效率并不是很高、估计要200ms左右吧、做交互性很强的事情、这种速度很难让人接受、而js去调Java的方法、速度很快、50ms左右、所以尽量用js调用Java方法

2、Java 调用 js 的函数、没有返回值、调用了就控制不到了

3、Js 调用 Java 的方法、返回值如果是字符串、你会发现这个字符串是 native 的、转成 locale 的才能正常使用、使用 toLocaleString() 函数就可以了、不过这个函数的速度并不快、转化的字符串如果很多、将会很耗费时间

4、网页中尽量不要使用jQuery、执行起来需要5-6秒、最好使用原生的js写业务脚本、以提升加载速度、改善用户体验。

注:使用的是本地的Html文件,不过在网络链接的Html文件也是可以实现的。   

源码点击下载

© 著作权归作者所有

切切歆语
粉丝 23
博文 350
码字总数 237675
作品 0
杭州
程序员
私信 提问
加载中

评论(0)

[Hybrid App]--Android混合开发,Android、Js的交互

AndroidJs通信 Hybird App Hybrid 开发:JsBridge - Web 和客户端的桥 Hybrid开发中,web页面往往会跟native进行交互,而JSBridge就是web页面和native进行通信的桥梁,通过JSBridge可以实现w...

osc_8wyy9cyu
2019/03/28
3
0
使用Kotlin:让Android与JS交互的详解

先来说说什么是JS交互: 说的俗一点就是通过我们项目中的控件来调用HTML里的JS代码,也可以通过JS来调用项目中的代码。 Android与JS之间的桥梁就是WebView了,我们是通过WebView来实现他们的...

富江___
2018/06/11
0
0
WebView深度学习(一)之WebView的基本使用以及Android和js的交互

前言:随着市场需求的不断变化,原生安卓已经无法满足客户的需要了,现在很多app都在使用Android和h5的交互实现某些功能,比如商品详情页,文章详情页面,商品点评页面,还有某些复杂的展示页...

aweiloveandroid
2017/07/01
0
0
Android混合开发之WebView与Javascript交互

前言: 最近公司的App为了加快开发效率选择了一部分功能采用H5开发,从目前市面的大部分App来讲,大致分成Native App、Web App、Hybrid App三种方式,个人觉得目前以Hybrid App居多,单纯的数...

总李写代码
2016/10/21
0
0
Android WebView与H5交互方式混合开发

前言 概括 一、WebSettings 设置属性 (1)支持webview进行页面缩放; *这里有个坑,为了防止webview缩放时退出崩溃,最好写上如下代码: (2) 支持JS; (3)支持页面多窗口; (4)支持J...

艾阳丶
03/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring中@Import的三种情况

我们在使用Spring框架中,特别是框架级的功能,经常看到有@Import导入功能, 我就介绍下它能导入什么,首先声明下@Import是注解,导入类型可分为三类: 1. 导入配置 @Configuration,类似于s...

董广明
32分钟前
13
0
Java中的类型推断和lambda表达式

简介 java是强类型的编程语言,每个java中使用到的变量都需要定义它的类型,否则会编译失败。强类型语言的好处就是可以尽可能的在编译期间就发现代码中可能出现的问题,从而减少在运行时出现...

flydean
32分钟前
20
1
How to install Docker on CentOS8

How to install Docker on CentOS8 Step 1, Prepare Update OS # yum update -y Install download tool wget # yum install wget -y Step 2, Install containerd.io To install docker in ......

Iridium
33分钟前
11
0
Java字节码

Java字节码对于虚拟机,就好像汇编语言对于计算机,属于基本执行指令。每一个Java字节码指令是一个byte数字,并且有一个对应的助记符。 Java虚拟机常用指令 常量入栈指令 常量入栈指令的功能...

算法之名
今天
66
0
腾讯副总裁魏颖:提瓢入市,倚杖而归

  魏颖,腾讯公司副总裁,2008 年加入腾讯,全面负责公司薪酬福利、绩效管理、员工关系以及海外业务人力资源。   ————————   很多人对人力资源(HR)工作的理解就是一些人事流...

alkcendkljk
今天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部