移动Web开发经验总结(单东林)课件

移动Web开发经验总结CMCCRMShare-SRDNewBusinessDept.单东林.2014.4.4

'''移动Web开发经验总结CMCCRMShare-SRDN1项目介绍技术演进经验总结'''项目介绍'''2辽宁CRM-G3项目项目介绍河南ESOP集团联系人G3项目基于移动终端设备(平板，手机，移动终端)

采用Hybrid架构

使用模板引擎进行页面渲染

使用jQuery+jQueryMobile进行页面开发

使用HTML5本地存储，CSS3，响应式设计等新技术移动终端项目：'''辽宁CRM-G3项目项目介绍河南ESOP集团联系人G3项目3技术演进'''技术演进'''4整体架构方案——Hybrid架构NativeWebAppHybridNative的优势：

直接调用系统提供的API接口，如访问通讯录

直接使用系统提供的GUI，如菜单，按钮缺点：代码无法共用，如苹果object-c，android-java必须去App商店更新WebApp的优势：支持多种平台，完全用HTML、CSS和avaScript来编写，开发成本低缺点：只能调用系统提供的部分API接口，如gis定位

不能使用GUI工具包Hybrid的优势：直接访问NativeAPI跨平台Web技术

系统更新直接'''整体架构方案——Hybrid架构NativeWebAppHy5整体架构方案——Hybrid架构JSWebviewNativeios，Android，wp7PhoneGap——让Web开发人员能够使用熟悉的HTML，CSS和JavaScript构建跨平台的移动应用1，建立了一套Native到JS和JS到Native的双向通道2，能打包成各种平台应用'''整体架构方案——Hybrid架构JSNativePhoneG6前端技术架构——模板&JSON后端负责输出JSON数据

前端使用模板引擎进行页面渲染和交互处理数据库，服务API(输出JSON)APPWebMobile…前端后端'''前端技术架构——模板&JSON后端负责输出JSON数据数据7前端技术架构——模板&JSON

Handlebars.js:模板引擎HTML+JSPHTML+手动拼接+JSONHTML+模板引擎+JSON需要注意的地方API应用的封装程度尽量高，前端应用尽量不要包含业务逻辑模板依旧选用的是handlebars，在移动端有待改进'''前端技术架构——模板&JSONHandlebars.js8前端技术选型——jQuery&jQueryMobile底层核心库：jQuery

进行底层DOM操作

封装Ajax方法UI库：jQueryMobile

使用它的样式库，如List，Form…

使用它提供的方法，如init，pagechange…为什么不用Zepto.js?

缺少样式库支持

脚本插件也不够丰富'''前端技术选型——jQuery&jQueryMobile底层核9前端技术选型——UI库滚动：iScroll处理局部滚动滚动性能接近原生可定制性非常好V4.0Q：使用overflow:auto不行吗？A：在移动浏览器上，滚动条显示有问题，并且交互体验很差，几乎用不了。定制横向或纵向滚动是否显示滚动条可定制滚动条样式及效果惯性效果Snap效果'''前端技术选型——UI库滚动：iScroll处理局部滚动V410前端技术选型——UI库滑动：Swipe针对webkit的slider组件简单，无依赖，可定制可以设置回调可以设置自动滚动HTML结构简单V2.0'''前端技术选型——UI库滑动：Swipe针对webkit的sl11前端技术选型——UI库弹出层：Popup使用position:absolute和opacity实现'''前端技术选型——UI库弹出层：Popup使用positio12前端新技术方案

Grunt：自动化构建工具，类似Ant、Maven。SASS：CSS预处理，能在CSS中使用变量。SeaJs：前端模块化管理。Bootstrap：CSS和HTML的前端工具包。响应式设计：使页面适合多种分辨率，

通过media属性来控制。

'''前端新技术方案Grunt：自动化构建工具，类似Ant、Ma13前端新技术方案——响应式设计响应式：<linkrel="stylesheet"type="text/css"media="screenand(max-device-width:320px)"href=“css320.css"/> <linkrel="stylesheet"type="text/css"media="screenand(max-device-width:640px)"href=“css640.css"/>传统式：<linkrel="stylesheet"type="text/css"href=“css.css"/>'''前端新技术方案——响应式设计响应式：<linkre14经验总结'''经验总结'''15类似于jsp的include方法非常方便的引入公用文件，HTML开发模式的弊端终于解决了

用法：HTML引入公用文件<#include"/res/module/sys_top.inc"/>！！！感谢超哥在百忙之中的帮忙。'''类似于jsp的include方法HTML引入公用文件<#i16

localStorage，大小5MB

数据缓存在本地，减少请求，加快访问速度

用法：提供4个方法案例：访问一次菜单就缓存，重新登录时清空缓存HTML5本地缓存nbhtml5mobi.utils.cacheManager.get()nbhtml5mobi.utils.cacheManager.update()nbhtml5mobi.utils.cacheManager.del()nbhtml5mobi.utils.cacheManager.clearAll()'''localStorage，大小5MBHTML5本地缓存n17tap，swipe事件不能在pc上使用，没有手机设备怎么办？分辨率大小不同，没有这么多分辨率的手机怎么办？如何在PC的浏览器上开发？chrome设置模拟器，可以支持触摸事件，tap，touch，swipe等设置：设置浏览器模拟器'''tap，swipe事件不能在pc上使用，没有手机设备怎么办18HTML5中的viewport设置'''HTML5中的viewport设置'''19注：iphone宽度默认为980px，设置viewport后为320px；Android某型号是800，WindowsPhone7是1024。'''注：iphone宽度默认为980px，设置viewport后20环境仍不成熟兼容性问题相比桌面端更严重iPhone完胜Android

移动Web开发总结设备太多，测试难以全面覆盖，特别是Android分辨率的处理很麻烦第三方浏览器太烂，Bug多浏览器支持不够，很多HTML5，CSS3高级属性不支持。可用的组件较少对HTML5，CSS3支持目前最好版本不同导致差异几乎没有第三方浏览器内核与Safari一样异常bug少，动画性能好'''环境仍不成熟移动Web开发总结设备太多，测试难以全面覆盖，21感谢聆听Q&A'''感谢聆听Q&A'''22''''''23zepto分很多模块官方下载的是标准版，没有包含所有模块

建议挑选自己需要扩展模块，然后使用nodejs打包方法：modules=(env[‘MODULES’]||‘zeptoevent…selectortouch').split('')我们选择的模块Zepto使用经验默认包含：zeptoeventajaxformie选择的模块：detectfxfx_methodsassetsdataselectortouch'''zepto分很多模块Zepto使用经验默认包含：'''24选择器与jQuery的差异以下选择器不支持:button:text:submit:radio:checkbox:first:last:even:odd:selected:visible:hidden[name!=‘value’]等等为什么Zepto使用了document.querySelectorAll接口

该接口只支持CSS3Selector，而以上选择器属于jQuery的Sizzle扩展

如果包含selector模块能够支持部分：:first:last:selected:visible:hidden…Zepto使用经验'''选择器与jQuery的差异Zepto使用经验'''25

.height().width()无法计算隐藏元素尺寸没有.innerHeight().outerWidth()等Zepto使用经验元素尺寸计算解决方案：借鉴jQuery，将不可见元素临时置为可见，取得高宽后再恢复'''.height().width()无法计算隐藏元素尺26click事件比tap事件晚触发大约200ms没有原生的tap事件通过组合touchstart，touchmove，touchend实现了tap

还有以下组合事件：longTapdoubleTap/singleTapswipe，swipeLeft，swipeRight，swipeUp,swipeDownZepto使用经验用tap而不是click！！！但是tap事件可能会引发点透事件。'''click事件比tap事件晚触发大约200ms27使用jQuery还是使用Zepto？河南ESOP：jQuery+jQueryMobile辽宁G3：Zepto+?'''使用jQuery还是使用Zepto？河南ESOP：jQuer28

box-shadow属性、颜色渐变属性会导致效率问题数字键盘type=number不能使用placeholder属性，改用type=tel就行

position:fixed引起残影，遮不住下面的东西，改用absolute去掉点击高亮：-webkit-tap-highlight-color:rgba