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

《移动Web开发经验总结(单东林)x》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

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

3、ML，CSS和JavaScript构建跨平台的移动应用1，建立了一套Native到JS和JS到Native的双向通道2，能打包成各种平台应用前端技术架构——模板&JSON后端负责输出JSON数据前端使用模板引擎进行页面渲染和交互处理数据库，服务API(输出JSON)APPWebMobile…前端后端前端技术架构——模板&JSONHandlebars.js:模板引擎HTML+JSPHTML+手动拼接+JSONHTML+模板引擎+JSON需要注意的地方API应用的封装程度尽量高，前端应用尽量不要包含业务逻辑模板依旧选用的

4、是handlebars，在移动端有待改进前端技术选型——jQuery&jQueryMobile底层核心库：jQuery进行底层DOM操作封装Ajax方法UI库：jQueryMobile使用它的样式库，如List，Form…使用它提供的方法，如init，pagechange…为什么不用Zepto.js?缺少样式库支持脚本插件也不够丰富前端技术选型——UI库滚动：iScroll处理局部滚动滚动性能接近原生可定制性非常好V4.0Q：使用overflow:auto不行吗？A：在移动浏览器上，滚动条显示有问题，并且交互体验很差

5、，几乎用不了。定制横向或纵向滚动是否显示滚动条可定制滚动条样式及效果惯性效果Snap效果前端技术选型——UI库滑动：Swipe针对webkit的slider组件简单，无依赖，可定制可以设置回调可以设置自动滚动HTML结构简单V2.0前端技术选型——UI库弹出层：Popup使用position:absolute和opacity实现前端新技术方案Grunt：自动化构建工具，类似Ant、Maven。SASS：CSS预处理，能在CSS中使用变量。SeaJs：前端模块化管理。Bootstrap：CSS和HTML的前端工具包。响

6、应式设计：使页面适合多种分辨率，通过media属性来控制。前端新技术方案——响应式设计响应式：传统式：

7、et"type="text/css"href=“css.css"/>经验总结类似于jsp的include方法非常方便的引入公用文件，HTML开发模式的弊端终于解决了用法：HTML引入公用文件<#include"/res/module/sys_top.inc"/>！！！感谢超哥在百忙之中的帮忙。localStorage，大小5MB数据缓存在本地，减少请求，加快访问速度用法：提供4个方法案例：访问一次菜单就缓存，重新登录时清空缓存HTML5本地缓存nbhtml5mobi.utils.cacheManager.get()n

8、bhtml5mobi.utils.cacheManager.update()nbhtml5mobi.utils.cacheManager.del()nbhtml5mobi.utils.cacheManager.clearAll()tap，swipe事件不能在pc上使用，没有手机设备怎么办？分辨率大小不同，没有这么多分辨率的手机怎么办？如何在PC