移动Web开发经验总结课件

1、移动Web开发经验总结CMC CRM Share-SRD New Business Dept . 单东林 . 2014.4.4 项目介绍技术演进经验总结辽宁CRM-G3项目项目介绍河南ESOP集团联系人G3项目 基于移动终端设备(平板，手机，移动终端) 采用Hybrid架构 使用模板引擎进行页面渲染 使用jQuery+jQuery Mobile进行页面开发 使用HTML5本地存储，CSS3，响应式设计等新技术移动终端项目：技术演进整体架构方案Hybrid架构NativeWebAppHybridNative的优势： 直接调用系统提供的API接口，如访问通讯录 直接使用系统提供的GUI，如菜单，按

2、钮缺点： 代码无法共用，如苹果object-c，android-java 必须去App商店更新WebApp的优势： 支持多种平台，完全用HTML、CSS和avaScript来编写，开发成本低缺点： 只能调用系统提供的部分API接口，如gis定位 不能使用GUI工具包Hybrid的优势： 直接访问Native API 跨平台Web技术 系统更新直接整体架构方案Hybrid架构JSWebviewNativeios，Android，wp7PhoneGap让Web 开发人员能够使用熟悉的HTML，CSS 和JavaScript 构建跨平台的移动应用1，建立了一套Native 到JS和JS到Native

3、的双向通道2，能打包成各种平台应用前端技术架构模板&JSON 后端负责输出JSON数据 前端使用模板引擎进行页面渲染和交互处理数据库，服务API (输出JSON)APPWebMobile前端后端前端技术架构模板&JSON Handlebars.js : 模板引擎HTML+JSPHTML+手动拼接+JSONHTML+模板引擎+JSON需要注意的地方 API 应用的封装程度尽量高，前端应用尽量不要包含业务逻辑 模板依旧选用的是handlebars，在移动端有待改进前端技术选型jQuery&jQueryMobile底层核心库：jQuery 进行底层DOM操作 封装Ajax方法UI库：jQuery M

4、obile 使用它的样式库，如List，Form 使用它提供的方法，如init，pagechange为什么不用Zepto.js ? 缺少样式库支持 脚本插件也不够丰富前端技术选型UI库滚动：iScroll处理局部滚动滚动性能接近原生可定制性非常好V 4.0Q：使用overflow:auto不行吗？A：在移动浏览器上，滚动条显示有问题，并且交互体验很差，几乎用不了。定制横向或纵向滚动是否显示滚动条可定制滚动条样式及效果惯性效果Snap效果前端技术选型UI库滑动：Swipe针对webkit的slider组件简单，无依赖，可定制可以设置回调可以设置自动滚动HTML结构简单V 2.0前端技术选型UI库

5、弹出层：Popup 使用position:absolute和opacity实现前端新技术方案 Grunt：自动化构建工具，类似Ant、Maven。 SASS：CSS预处理，能在CSS中使用变量。 SeaJs：前端模块化管理。 Bootstrap：CSS和HTML的前端工具包。 响应式设计：使页面适合多种分辨率， 通过media属性来控制。 前端新技术方案响应式设计 响应式： 传统式：经验总结 类似于jsp的include方法 非常方便的引入公用文件，HTML开发模式的弊端终于解决了 用法：HTML引入公用文件！感谢超哥在百忙之中的帮忙。 localStorage，大小5MB 数据缓存在本地，减

6、少请求，加快访问速度 用法：提供4个方法 案例：访问一次菜单就缓存，重新登录时清空缓存HTML5 本地缓存nbhtml5mobi.utils.cacheManager.get()nbhtml5mobi.utils.cacheManager.update()nbhtml5mobi.utils.cacheManager.del()nbhtml5mobi.utils.cacheManager.clearAll() tap，swipe事件不能在pc上使用，没有手机设备怎么办？分辨率大小不同，没有这么多分辨率的手机怎么办？如何在PC的浏览器上开发？ chrome设置模拟器，可以支持触摸事件，tap，to

7、uch，swipe等 设置：设置浏览器模拟器HTML5中的viewport设置注：iphone宽度默认为980px，设置viewport后为320px；Android某型号是800，WindowsPhone7是1024。 环境仍不成熟 兼容性问题相比桌面端更严重 iPhone 完胜 Android 移动Web开发总结设备太多，测试难以全面覆盖，特别是Android分辨率的处理很麻烦第三方浏览器太烂，Bug多浏览器支持不够，很多HTML5，CSS3高级属性不支持。可用的组件较少对HTML5，CSS3支持目前最好版本不同导致差异几乎没有第三方浏览器内核与Safari一样异常bug少，动画性能好感谢

8、聆听Q&A zepto分很多模块 官方下载的是标准版，没有包含所有模块 建议挑选自己需要扩展模块，然后使用nodejs打包 方法： modules = (envMODULES | zepto event selector touch).split( ) 我们选择的模块Zepto使用经验默认包含：zepto event ajax form ie 选择的模块：detect fx fx_methods assets data selector touch 选择器与 jQuery的差异 以下选择器不支持 :button :text :submit :radio :checkbox :first :la

9、st :even :odd :selected :visible :hidden name!=value 等等 为什么 Zepto 使用了 document.querySelectorAll 接口 该接口只支持 CSS3 Selector，而以上选择器属于jQuery的Sizzle扩展 如果包含selector模块能够支持部分： :first :last :selected :visible :hidden Zepto使用经验 .height() .width() 无法计算隐藏元素尺寸 没有 .innerHeight() .outerWidth() 等Zepto使用经验元素尺寸计算解决方案：借

10、鉴jQuery，将不可见元素临时置为可见，取得高宽后再恢复 click 事件比 tap 事件晚触发大约 200 ms 没有原生的 tap 事件 通过组合 touchstart，touchmove ，touchend 实现了 tap 还有以下组合事件： longTap doubleTap / singleTap swipe，swipeLeft，swipeRight，swipeUp, swipeDownZepto使用经验用tap而不是click！但是tap事件可能会引发点透事件。使用jQuery还是使用Zepto？河南ESOP：jQuery + jQuery Mobile辽宁G3： Zepto + ? box-shadow属性、颜色渐变属性会导致效率问题 数字键盘type=number不能使用placeholder属性，改用type=tel就行 position:fixed引起残影，遮不住下面的东西，改用absolute 去掉点击高亮： -webkit-tap-highlight-color:rgba(255,255,255,0); -webkit-focus-ring-col