java热血征途触屏版_手机触屏版页面开发总结

在最初进行JS 框架的选型， 选择的是jQuery + jquery.mobile。

框架选型问题：

【1】大小问题， jQuery 是 277KB ，jquery.mobile 是 451KB ，当用户处于弱网络时，这个大小对于手机端的加载来讲，完全是一场灾难。

【2】抛开 jquery.mobile 的大小不说， 对于移动端的开发而言， jquery.mobile并无出色的优势可言。在使用的过程中jquery.mobile  会给页面的DOM元素附加居多无用的CSS样式名， 大大减低了DOM布局的不稳定性。

框架选型解决办法：

【1】zepto.js 是一款专为 移动端而生的JS 框架，压缩前大小为 54.6KB   压缩后之后只有 9.7KB 大大增加了JS的下载速度。

【2】 zepto.js 的使用和 JQ 几乎一模一样， 大大减小了学习成本， 只要用过JQ 的， 直接用就好了，且他不会给页面的 dom元素附加垃圾样式。

tap事件点透：

点击事件尽量减少使用  click ， 而改用 tap， 原因在于 click 点击会出现 300ms左右的延时。

但是在使用 tap 作为点击事件的时候， 当你点击的元素定位方式为 固定定位 或者是 绝对定位时， 会出现点透的情况。

如上图， 灰色为半透明遮罩层， 用来做会弹出框的背景，遮住APP页面，点击 A 时，遮罩层消失， 点击 B 时 ， 进入 【100%本息保障】 栏目的详情页面， 如果此时 会在 A 上绑定 tap 事件。 当你点A 的时候你会发现一个神奇的现象， 遮罩层会消失， 但是消失后页面会进入到 【100%本息保障】 栏目的详情页面 。 是因为 tap 事件被点透了。

tap事件点透解决办法：

e.preventDefault(); // 阻止“默认行为”

是不是觉得很简单单不要紧，最主要的是完美的解决了tap的点透问题 ，这个有点类似 原生JS 中的阻止事件冒泡， 关于事件冒泡， 在此不做解释和记录。

zepto.js 中的animate问题：

在移动端，经常会处理一些动画效果， 比方页面的图片焦点轮播效果， 弹出框的渐隐效果， zepto.js 中提供了一个处理动画的函数，animate， 在处理PC端的动画时，此函数非常优雅， 但是在处理速度不如PC的移动端来说， animate 函数就有点心有余而力不足了， 在处理动画时， 勉强可以完成， 但是在一些性能较差的手机上， 动画效果并不明显， 甚至会明显看到动画很卡。

zepto.js 中的animate问题处理办法：

touchslider.js 是一款专门处理移动端页面 图片焦点轮播效果的JS插件， 这款插件非常小，只有几KB大， 代码量也不大， 那天下午读过插件源码， 其实逻辑并不复杂， 主要是 JS + CSS3 来处理动画的， 用JS 对动画进行初始化处理， 而动画的执行则交给CSS3， 大家都知道， CSS3中的  animation 和 transition 有兴趣的则可以自己私下去了解。

webapp页面数据缓存问题：

在制作页面的过程中，页面的离线缓存卡了我很长一段时间，中间各种尝试，各种纠结，其中的心酸且听老衲细细道来。

html5提供了多种页面的离线缓存解决办法。

第一种：application cache

application  是一种较简单的数据缓存方式， 可将你要进行缓存的文件写入到 name.manifest配置文件中。但是研究了一段时间发现此方案不可行，原因在于，只能对写入了配置项的内容进行缓存，且当使用手机360等软件清理手机缓存时， 缓存的数据会被清理掉。

第二种：localstorage 和 sessionstorage

于是想到了第二种解决方案，localstorage 和  sessionstorage ， 这两种方式都可以将网络数据存储在本地， 前者保存的数据在浏览器关闭后， 依然存在手机中， 即使是你卸载掉此应用，如若不是你手动删除数据，数据将永久存在手机中。 而后者保存的数据会随着浏览器的关闭而被清理掉， 所以选择了使用 localstorage 。 但是仅仅有数据， 必须要有页面框架让其渲染。 就像是水一样， 如果没有杯子盛水，水永远不可能成为杯子的形状，现在数据有了，但是需要一个容器来装载它。 而当手机没有移动网络是， 我们无法从网络上获取页面，即使是有数据， 也无用， 于是用了一个不太好的方法， 将静态页面放到 webapp包中，这样的好处在于无须去网络下载CSS ， JS 等内容， 数据的加载直接用 ajax 就好了！

到这里， 问题貌似得到了解决， 且慢， 又遇到问题了， 我如何判断手机是否有网络当然， web端可以通过 ajax 向服务器发送一个请求是否失败， 如果失败则证明无网络， 这个办法看似可行， 但是， 当用户处于弱网络时， ajax  请求必然会很慢， 有非常大的可能会请求失败， 虽然只是弱网络还是有网络的。那怎么呢可以让 安卓 和 IOS 来进行网络判断 ， 然后将网络参数 token 带在 url 地址后面， 如: http://www.baidu.comoken=0 当传入的 token=0时， 为无网络 ； token=1 时为有网络。 IOS 一切正常， 看似问题解决了一样， 但是， 骚年， 不要紧， 在安卓4.0下测试， 无法获取到参数， 这是因为， 安卓 4.0 系统不支持将参数带在 url 后面，才刚刚看到曙光，在发现此问题后， 又陷入迷茫， 不过不要紧， 男人嘛就应该激流勇进， 迎难而上。 于是找 安卓开发沟通，找解决办法， 在一番痛苦的查找后，发现可以通过 安卓 调用 webapp端 JS 来完成传参，测试成功。于是大功告成，

localstorage 的写入方式

var json_data = {id:12,name:”yang”,email:”aaa@aaa.com”};

storage.setItem(“json_data”,JSON.stringify(json_data));

localstorage 的读取方式

var json_data = JSON.parse(storage.getItem(“json_data”)) ;

注：localstorage 只能保存 5M左右大小的数据，1M = 1024KB  1KB= 1024字节， 按一个汉子两个字节来算， 大概可以存储2621440个汉字，如果是英文字母或者是数字的话可以存储5242880 个， 这个大小完全够用。

第三种： webSQL

看名字就知道， webSQL 就是一个web端的数据库，IE9~IE9+、chrome、Firefox、 Opera、Safari。webSQL和 localstorage区别在于， webSQL可以建立多张数据表， 每一张表相当于是一个localstorage ，很明显在存储的数据大小上远远要大于 localstorage ，但是复杂程度也是远远高于 localstorage 的，webSQL的使用和 localstorage 差不多，就不做细细解说了！

文章知识点与官方知识档案匹配，可进一步学习相关知识Java技能树首页概览92005 人正在系统学习中 相关资源：Ztrans丹诚软件Z39.50客户端-其它工具类资源-CSDN文库

来源：丹宇