最近给公司做一个企业App,Android客户端+Java服务端,总共有十几个模块,其中有几个模块就是从服务端查询数据,手机上的功能有列表展示及下载附件。
我是做Java服务端开发的,不会Android,另外有android开发人员,经过讨论决定这块手机直接访问Java服务端(Java web系统)的页面,源自于开始给公司一个pad应用,也是光查询数据用,采用的是Android的webview访问web的一个url。
其实webview这种做法,最简单,省事,省成本,不用纯Android开发,web页面能访问,没问题,拿到手机上,或pad上测试——基本没什么大问题,有的话也是些css,js兼容性的问题。
所以这个功能我很快就在服务端开发完了,就是为了样式和兼容性,引入了jQuery-1.9.1,jquery.mobile-1.3.2。页面上一个文本输入框,可以输入标题进行查询,下面展示的就是列表。在手机上也测试了,大部分手机都没问题。
后来,交给测试部测试,人家来个压力测试,才1000多条数据,直接就死掉了,因为这个列表没有做分页功能。好了,加分页吧,关键是手机上分页得下拉刷新那种,怎么做,上网一搜,发现都在用开源的iScroll,网上有很多例子,后续也会专门来写这块,所以很快就加入到项目中,分页效果还不错,下拉刷新,上拉加载更多数据。
但是迎来的第一个问题就是那个input输入框怎么都没有焦点,压根不能输入,这必须得解决啊,开始没去网上搜,觉得是个小问题一会儿就能搞定,最后发现不是这么回事。我开始解决办法是页面加载完成后写js让input获得焦点就是设置focus方法了,电脑上好使,手机上不好使。后来Android开发人员说,它在Android端能够调我页面的js方法,这样好啊一试,发现有些手机上好使了,但是有些还是不好使。没办法,我把js一层一层过滤发现是iScroll的问题,只要把这个加载进来就不好使,去掉就好使,带着这个问题再上网搜,晕,发现网上到处是这个问题,而且解决办法千篇一律,就是让iScroll过滤input等html标签:
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) {
target = target.parentNode;
}
if (target.tagName != 'SELECT' && target.tagName != 'TEXTAREA' && target.tagName != 'INPUT') {
e.preventDefault();
}
},
重写这个方法,加上要过滤的标签input等。
按照这个改了后,发现电脑上好使,我用的chrome最新的39,专门为开发webview页装的,手机上还是不行,找了半天原因,还是不知道哪出问题。后来测试版本升级,给卸了重新安装,再测,发现好了,突然明白了是手机上缓存的原因。缓存啊,一直都在关注浏览器的缓存,忽视了手机上的缓存,还是手机开发做的少啊。