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

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2014/4/4,#,移动,Web,开发经验总结,CMC,CRM Share-SRD New Business,Dept.,单东林,.2014.4.4,移动Web开发经验总结CMC CRM Share-SRD N,1,项目介绍,技术演进,经验总结,项目介绍,2,辽宁,CRM-G3,项目,项目介绍,河南,ESOP,集团联系人,G3,项目,基于移动终端设备,(,平板，手机，移动终端,),采用,Hybrid,架构,使用模板引擎进行页面渲染,使用,jQuery+jQuery Mobile,进行页面开发,使用,HTML5,本地存储，,CSS3,，响应式设计等新技术,移动终端项目：,辽宁CRM-G3项目项目介绍河南ESOP集团联系人G3项目,3,技术演进,技术演进,4,整体架构方案,Hybrid,架构,Native,WebApp,Hybrid,Native,的优势：,直接调用系统提供的,API,接口，如访问通讯录,直接使用系统提供的,GUI,，如菜单，按钮,缺点：,代码无法共用，如苹果,object-c,，,android-java,必须去,App,商店更新,WebApp,的优势：,支持多种平台，完全用,HTML,、,CSS,和,avaScript,来编写，开发成本低,缺点：,只能调用系统提供的部分,API,接口，如,gis,定位,不能使用,GUI,工具包,Hybrid,的优势：,直接访问,Native API,跨平台,Web,技术,系统更新直接,整体架构方案Hybrid架构NativeWebAppHy,5,整体架构方案,Hybrid,架构,JS,Webview,Native,ios,，,Android,，,wp7,PhoneGap,让,Web,开发人员能够使用熟悉的,HTML,，,CSS,和,JavaScript,构建跨平台的移动应用,1,，建立了一套,Native,到,JS,和,JS,到,Native,的双向通道,2,，能打包成各种平台应用,整体架构方案Hybrid架构JSNativePhoneG,6,前端技术架构,模板,&JSON,后端负责输出,JSON,数据,前端使用模板引擎进行页面渲染和交互处理,数据库，服务,API(,输出,JSON),APP,Web,Mobile,前端,后端,前端技术架构模板&JSON 后端负责输出JSON数据数据,7,前端技术架构,模板,&JSON,Handlebars.js:,模板引擎,HTML,+,JSP,HTML,+,手动拼接,+,JSON,HTML,+,模板引擎,+,JSON,需要注意的地方,API,应用的封装程度尽量高，前端应用尽量不要包含业务逻辑,模板依旧选用的是,handlebars,，在移动端有待改进,前端技术架构模板&JSON Handlebars.js,8,前端技术选型,jQuery&jQueryMobile,底层核心库：,jQuery,进行底层,DOM,操作,封装,Ajax,方法,UI,库：,jQuery Mobile,使用它的样式库，如,List,，,Form,使用它提供的方法，如,init,，,pagechange,为什么不用,Zepto.js?,缺少样式库支持,脚本插件也不够丰富,前端技术选型jQuery&jQueryMobile底层核,9,前端技术选型,UI,库,滚动：,iScroll,处理局部滚动,滚动性能接近原生,可定制性非常好,V 4.0,Q,：,使用,overflow:auto,不行吗？,A,：,在移动浏览器上，滚动条显示有问题，并且交互体验很差，几乎用不了。,定制横向或纵向滚动,是否显示滚动条,可定制滚动条样式及效果,惯性效果,Snap,效果,前端技术选型UI库滚动：iScroll处理局部滚动V 4,10,前端技术选型,UI,库,滑动：,Swipe,针对,webkit,的,slider,组件,简单，无依赖，可定制,可以设置回调,可以设置自动滚动,HTML,结构简单,V 2.0,前端技术选型UI库滑动：Swipe针对webkit的sl,11,前端技术选型,UI,库,弹出层：,Popup,使用,position:absolute,和,opacity,实现,前端技术选型UI库弹出层：Popup 使用positio,12,前端新技术方案,Grunt,：自动化构建工具，类似,Ant,、,Maven,。,SASS,：,CSS,预处理，能在,CSS,中使用变量。,SeaJs,：前端模块化管理。,Bootstrap,：,CSS,和,HTML,的前端工具包。,响应式设计：使页面适合多种分辨率，,通过,media,属性来控制。,前端新技术方案 Grunt：自动化构建工具，类似Ant、Ma,13,前端新技术方案,响应式设计,响应式：,传统式：,前端新技术方案响应式设计 响应式：link re,14,经验总结,经验总结,15,类似于,jsp,的,include,方法,非常方便的引入公用文件，,HTML,开发模式的弊端终于解决了,用法：,HTML,引入公用文件,！,感谢超哥在百忙之中的帮忙。,类似于jsp的include方法HTML引入公用文件#i,16,localStorage,，大小,5MB,数据缓存在本地，减少请求，加快访问速度,用法：提供,4,个方法,案例：访问一次菜单就缓存，重新登录时清空缓存,HTML5,本地缓存,nbhtml5mobi.utils.cacheManager.,get,(),nbhtml5mobi.utils.cacheManager.,update,(),nbhtml5mobi.utils.cacheManager.,del,(),nbhtml5mobi.utils.cacheManager.,clearAll,(),localStorage，大小5MBHTML5 本地缓存n,17,tap,，,swipe,事件不能在,pc,上使用，没有手机设备怎么办？分辨率大小不同，没有这么多分辨率的手机怎么办？如何在,PC,的浏览器上开发？,chrome,设置模拟器，可以支持触摸事件，,tap,，,touch,，,swipe,等,设置：,设置浏览器模拟器,tap，swipe事件不能在pc上使用，没有手机设备怎么办,18,HTML5,中的,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,23,zepto,分很多模块,官方下载的是标准版，没有包含所有模块,建议挑选自己需要扩展模块，然后使用,nodejs,打包,方法：,modules=(envMODULES|,zepto event selector touch).split(),我们选择的模块,Zepto,使用经验,默认包含：,zepto event ajax form ie,选择的模块：,detect fx fx_methods assets,data selector touch,zepto分很多模块Zepto使用经验默认包含：,24,选择器与,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,Zepto,使用经验,选择器与 jQuery的差异Zepto使用经验,25,.height().width(),无法计算隐藏元素尺寸,没有,.innerHeight().outerWidth(),等,Zepto,使用经验,元素尺寸计算,解决方案：借鉴,jQuery,，将不可见元素临时置为可见，取得高宽后再恢复,.height().width()无法计算隐藏元素尺,26,click,事件比,tap,事件晚触发大约,200 ms,没有原生的,tap,事件,通过组合,touchstart,，,touchmove,，,touchend,实现了,tap,还有以下组合事件：,longTap,doubleTap/singleTap,swipe,，,swipeLeft,，,swipeRight,，,swipeUp,swipeDown,Zepto,使用经验,用,tap,而不是,click,！,但是,tap,事件可能会引发点透事件。,click 事件比 tap 事件晚触发大约 200 ms,27,使用,jQuery,还是使用,Zepto,？,河南,ESOP,：,jQuery+jQuery Mobile,辽宁,G3,：,Zepto +,?,使用jQuery还是使用Zepto？河南ESOP：jQuer,28,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;,做完后测试，测试。合并功能后，再测试。,其他,以下问题在三星,GT-P6800,平板（,android4.0.4,）出现,box-shadow属性、颜色渐变属性会导致效率问题 其他,29,