移动Web开发经验总结.pptxVIP

移动Web开发经验总结;项目介绍 技术演进 经验总结;辽宁CRM-G3项目;技术演进;整体架构方案——Hybrid架构;整体架构方案——Hybrid架构;前端技术架构——模板JSON;前端技术架构——模板JSON;前端技术选型——jQueryjQueryMobile;前端技术选型——UI库;前端技术选型——UI库;前端技术选型——UI库;前端新技术方案;前端新技术方案——响应式设计;经验总结; 类似于jsp的include方法 非常方便的引入公用文件，HTML开发模式的弊端终于解决了 用法：; localStorage，大小5MB 数据缓存在本地，减少请求，加快访问速度 用法：提供4个方法 案例：访问一次菜单就缓存，重新登录时清空缓存; tap，swipe事件不能在pc上使用，没有手机设备怎么办？分辨率大小不同，没有这么多分辨率的手机怎么办？如何在PC的浏览器上开发？ chrome设置模拟器，可以支持触摸事件，tap，touch，swipe等 设置：;HTML5中的viewport设置;注：iphone宽度默认为980px，设置viewport后为320px；Android某型号是800，WindowsPhone7是1024。; 环境仍不成熟 兼容性问题相比桌面端更严重 iPhone 完胜 Android ;感谢聆听; zepto分很多模块 官方下载的是标准版，没有包含所有模块 建议挑选自己需要扩展模块，然后使用nodejs打包 方法： modules = (env[‘MODULES’] || ‘zepto event … selector touch).split( ) 我们选择的模块; 选择器及 jQuery的差异 以下选择器不支持 :button :text :submit :radio :checkbox :first :last :even :odd :selected :visible :hidden [name!=‘value’] 等等 为什么 Zepto 使用了 document.querySelectorAll 接口 该接口只支持 CSS3 Selector，而以上选择器属于jQuery的Sizzle扩展 如果包含selector模块能够支持部分： :first :last :selected :visible :hidden …; .height() .width() 无法计算隐藏元素尺寸 没有 .innerHeight() .outerWidth() 等; click 事件比 tap 事件晚触发大约 200 ms 没有原生的 tap 事件 通过组合 touchstart，touchmove ，touchend 实现了 tap 还有以下组合事件：;使用jQuery还是使用Zepto？; box-shadow属性、颜色渐变属性会导致效率问题 数字键盘type=number不能使用placeholder属性，改用type=tel就行 position:fixed引起残影，遮不住下面的东西，改用absolute 去掉点击高亮： -webkit-tap-highlight-color:rgba(255,255,255,0); -webkit-focus-ring-color:rgba(0,0,0,0); display:none不好使的时候，可以换换visibility: hidden placeholder显示的字不会垂直居中，需要对文本框应用line-height: normal; 做完后测试，测试。合并功能后，再测试。