android webview和ji交互分析
webview ,用网页来布局。 Android 的 webview 是基于 webkit 内核,不过他的运行效果和 firefox 上一模一样,所以写的时候都是先用 firefox 测试,测试 OK 了再放到程序里面看效果,基本上不会有什么问题。其实 android 的 webview 跟 iphone 的 webview 差不多, iphone 上的 webview 比 android 上的强大多了。
谈一下研究 webview 的一些成果:
一. 加载资源的速度不慢,但是资源多了,就很慢。图片、 css 、 js 、 html 这些资源每个大概需要 10-200ms ,一般都是 30ms 就 ok 了。如果一个页面上的资源很多,就很浪费时间。
二. Js 和 css 的执行速度。开始的时候,我的页面都是用 js 生成 DOM ,添加样式等也用 js 添加。后来发现,加载一个页面居然要 5-6 秒。然后我就怀疑是不是 js 的执行效率不高,然后就把能用 css 的地方都用 css ,能直接写到 html 上的就不用 js 动态生成。结果,速度并没有多大的提升,最多提升了 1 秒。看来, Js 的执行速度虽然比不上 css ,但是还不至于慢到那种程度。那会是什么原因使得页面加载速度这么慢?经过仔细的排查,最终发现,是因为我用了 jQuery 框架。
Webview 加载页面的顺序是这样的:先加载 html ,然后从里面解析出 css 、 js 文件和页面上写死的图片资源进行加载,如果 webkit 的缓存里面有,就不加载。加载完这些资源之后,就进行 css 的渲染和 js 的执行。 Css 的渲染一般不需要很长时间,几十毫秒就 ok 。关键是 js 的执行,如果用了 jQuery ,则执行起来需要 5-6 秒。而在这段时间,如果不在 webview 里设置背景,网页部分是白色的,很难看。这是一个很糟糕的用户体验。所以如果用网页布局程序,最好别用很大的 js 框架。
三. 网页和 Java 之间的互调。这个功能是 iphone 里面就有的,网上也有很多资料,可以告诉我们怎么做,这些都是很简单、很基本的。我研究了一段时间,总结一下:
1. Java 调用 js 里面的函数,速度并不令人满意,大概一次一两百毫秒吧,如果要做交互性很强的事情,这种速度会让人疯掉的。而反过来就不一样了, js 去调 java 的方法,速度很快,基本上 40-50 毫秒一次。所以尽量用 js 调用 java 方法,而不是 java 去调用 js 函数。
2. Java 调用 js 的函数,没有返回值,而 Js 调用 java 方法,可以有返回值。返回值可以是字符串,也可以是对象。如果是字符串,有个很讨厌的问题,第 3 点我会讲的。如果是对象,这个对象会被转换为 js 的对象,直接可以访问里面的方法。但是我不推荐 java 返回给 js 的是对象,除非是必须。因为 js 收到 java 返回的对象,会产生一些交换对象,而如果这些对象的数量增加到了 500 或 600 以上,程序就会出问题。所以尽量返回基本数据类型或者字符串。
3. Js 调用 java 的方法,返回值如果是字符串,你会发现这个字符串是 native 的,不能对它进行一些修改操作,比如想对它 substr ,取不到。怎么解决呢?转成 locale 的。使用 toLocaleString() 函数就可以了。不过这个函数的速度并不快,转化的字符串如果很多,将会很耗费时间。
四. 网页上拖动元素。网页上有一个 div ,想要拖动它到另外一个地方,怎么做?如果用 PC 上的网页做法,监听 onmousedown 、 onmousemove 和 onmouseup 就可以了。但是在手机上,事件模型就不一样了。在网页上点击,拖动,然后释放,手离开屏幕的时候, webview 才会触发 onmousedown 、 onmousemove 、 onmouseup 事件。所以,要想拖动,不能这么做。这个问题困扰我很长时间,后来发现 iphone 上的做法,才解决了。 Iphone 上的 webview 有专为触摸屏设计的事件 ontouchstart 、 ontouchmove 、 ontouchend ,这几个事件的响应是实时的,就能解决拖动的问题了。
五. 一些小问题。 Webview 里面的网页,如果有 input ,需要输入,但是点上去却没反应,输入法不出来。这种情况是因为 webview 没有获取焦点。需要在 java 里面给 webview 设置一下 requestFocus() 就行了。
六. Android 上的 webview 和 iphone 的 webview 区别。目前为止,我发现的区别有这么几个:
1 . Android 上, webview 不支持多点触控,没有 ongesture 系列事件,而 iphone 上有。
2 . Android 上的 webview 不支持透明, iphone 上可以。
浏览器控件是每个开发环境都具备的,这为马甲神功提供了用武之地,windows的有webbrowser,android和ios都有webview。只是其引擎不同,相对于微软的webbrowser,android及ios的webview的引擎都是webkit,对Html5提供支持。本篇主要介绍android的webview之强大。
A. webview组件如何使用
1) 添加权限:AndroidManifest.xml中必须使用许可"android.permission.INTERNET",否则会出Web page not available错误。
2) 在要Activity中生成一个WebView组件:WebView webView = new WebView(this);或者可以在activity的layout文件里添加webview控件:
<WebViewandroid:id="@+id/wv"android:layout_width="fill_parent"android:layout_height="fill_parent"android:text="@string/hello"/>
3) 设置WebView基本信息:
如果访问的页面中有Javascript,则webview必须设置支持Javascript。
webview.getSettings().setJavaScriptEnabled(true);
触摸焦点起作用
requestFocus();
取消滚动条
this.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY);
4) 设置WevView要显示的网页:
互联网用:webView.loadUrl("http://www.google.com");
本地文件用:webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在:assets文件中
5) 如果希望点击链接由自己处理,而不是新开Android的系统browser中响应该链接。给WebView添加一个事件监听对象(WebViewClient)并重写其中的一些方法:
shouldOverrideUrlLoading:对网页中超链接按钮的响应。当按下某个连接时WebViewClient会调用这个方法,并传递参数:按下的url。比如当webview内嵌网页的某个数字被点击时,它会自动认为这是一个电话请求,会传递url:tel:123,如果你不希望如此可通过重写shouldOverrideUrlLoading函数解决:
6) 如果用webview点链接看了很多页以后,如果不做任何处理,点击系统“Back”键,整个浏览器会调用finish()而结束自身,如果希望浏览的网页回退而不是退出浏览器,需要在当前Activity中处理并消费掉该Back事件。
覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法。
public boolean onKeyDown(int keyCoder,KeyEvent event){if(webView.canGoBack() && keyCoder == KeyEvent.KEYCODE_BACK){webview.goBack(); //goBack()表示返回webView的上一页面return true;}return false;}
B. Webview与js交互
Webview与js的双向交互才是android的webview强大所在,也是马甲精神能够彻底执行的基础保障。
首先,webview可以定义一个在其内嵌页面中可以触发的事件
wv.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");private final class DemoJavaScriptInterface{DemoJavaScriptInterface(){}public void clickonAndroid( final String order){mHandler.post(newRunnable(){@Overridepublic void run(){jsonText="{"name":""+order+""}";wv.loadUrl("javascript:wave("+jsonText+")");}});} }
通过以上代码,即可实现在其内嵌网页中触发window.demo.clickOnAndroid(str)事件并传参数str给webview。Webview接收到str之后,可以通过以上代码触发其内嵌页面中的js函数wave(str)。这样就可以实现网页触发webview的事件并传参数,webview接收参数并调用js函数。
下面看我的Html脚本:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="jquery.js"></script><script>function toclient(){var order=$("#val").val();window.demo.clickonAndroid(order);}function wave(str){//alert(str.name); $("#fromclient").text(str.name);}</script></head><body>这是一个html页面<br/>输入一个字符串:<br/><input id="val" /><input type="submit" value="点击提交给客户端"onclick="toclient();"/><br /> 显示返回:<label id="fromclient"></label></body></html>
通过脚本看到wave(str)函数是负责将原来传给webview的数据重新拿回页面,效果图如下:
另外,如果你想获取页面的一些处理数据并交给webview客户端处理,可在wave函数里将数据alert,然后webview中重写WebChromeClient的onJsAlert函数,具体代码如下
wv.setWebChromeClient(new MyWebChromeClient());final class MyWebChromeClient extends WebChromeClient{@Overridepublic booleanonJsAlert(WebView view, String url, String message, final JsResult result) { //message就是wave函数里alert的字符串,这样你就可以在android客户端里对这个数据进行处理 result.confirm(); } return true; }
android webview和ji交互分析相关推荐
- Android WebView与JavaScript交互详解
近期工作项目中遇到Android的WebView与js交互问题,之前也知道有这方面的技术可以实现.但在用的过程中,却发现还是需要用电心思. 现把我所了解的分享给大家,希望可以帮助到做类似项目的童鞋. ...
- Android WebView与JS交互入门
2019独角兽企业重金招聘Python工程师标准>>> 首先在Anndroid代码中对WebView进行初始化 webView = (WebView) findViewById(R. ...
- android和webview交互,android webview与原生交互
demo.html完整示例 demo 点击调用android代码 点击调用android代码并传递参数 function androidCallJs() { document.getElementBy ...
- Android WebView 与 JS 交互
2019独角兽企业重金招聘Python工程师标准>>> 在android activity webView的使用,activity中执行html中的js 方法, 和在html 中 调 ...
- Android WebView与js交互通信
事出有因,那天我看到手厅的客户端里,在网页webview中点击网络设置后,跳转到了手机的网络设置界面,然后就搜了一下,原来是html中js与androidApp之间的交互.这么说的太费劲了,还是上截图 ...
- Android—WebView与JS交互
Html文件: WebView与JS交互方式: 1. 前提: WebSettings webSettings = webView.getSettings(); // 设置与Js交互的权限 webSet ...
- Android WebView和JavaScript交互
JavaScript在现在的网页设计中用得很多,Android 的WebView可以载入网页,WebView也设计了与JavaScript通信的桥梁.这篇主要介绍一下WebViewk控件如何和Java ...
- Android WebView 性能优化
原文出处:http://motalks.cn/2016/09/11/Android-WebView-JavaScript-3/ WebView相关阅读 Android WebView 和 javaSc ...
- Android WebView 和 javaScript的互相调用(三)
原文出处:http://motalks.cn/2016/08/27/Android-WebView-JavaScript-2/ WebView相关阅读 Android WebView 和 javaSc ...
最新文章
- Nodejs开发微信公众号中控服务
- [luoguP4306][JSOI2010]连通数
- 校内网用户为什么那么多?
- shell习题第6题:监听80端口
- [Swift]随slider变化而变化的圆
- Java MemoryMapped文件的功能
- 设计模式----2(简单工厂模式的概念,简单工厂模式的实现,简单工厂模式的优缺点)
- MongoDB 数据库创建、删除、表(集合) 创建删除、数据的增、删、改、查
- 红帽和Mirantis宣告结束OpenStack合作
- GridView 水平方向滑动
- JBPM节点分支之Group节点分析
- java html报表设置_快逸报表中html事件属性的使用
- excel计算式自动计算_全套Excel版工程自动计算表格+实用小工具,高效工作不加班...
- java jdk 1.5下载_jdk 1.5 64位
- 02-Sentinel-2 L1C级数据bat和Python脚本批量大气校正
- C语言中如何定义全局变量
- R语言使用order函数按照两个数据列的值排序data.table数据(主变量降序排序、次变量升序排序)
- Grafana 介绍和使用
- 5G智慧校园建设顶层设计方案智慧校园大脑建设方案
- 【前端开发学习】7.Django
热门文章
- cd linux menu.lst,怎么把cdlinux做成u盘启动?u盘启动cdlinux制作准备工具方法
- 根据手机sim卡获取运营商信息
- 1+X Web前端(初级)理论题考试样题及答案(建议收藏)
- C#Winform的DataGridView控件使用详解2—DataGridView表格样式设置及表格操作
- 【GD32】从0开始学GD32单片机(13)—— ADC模数转换器外设详解+PS2遥杆例程
- Windows PowerShell 中启动 Nginx 报错解决方案
- unity保存游戏对象到mysql_非常好用的游戏数据保存类:ScriptableObject
- mac 连接windows远程桌面软件Parallels Client
- PHP Warning: file_put_contents(..):failed to open stream: Permission denied in...
- ums网管应用unix系统的常用操作 (五)--iteye技术网站