2014年移动Web开发经验总结(单东林).ppt

移动Web开发经验总结 CMC CRM Share-SRD New Business Dept . 单东林 . 2014.4.4 项目介绍 技术演进 经验总结 辽宁CRM-G3项目 项目介绍 河南ESOP集团联系人G3项目 基于移动终端设备(平板，手机，移动终端) 采用Hybrid架构 使用模板引擎进行页面渲染 使用jQuery+jQuery Mobile进行页面开发 使用HTML5本地存储，CSS3，响应式设计等新技术 移动终端项目： 技术演进 整体架构方案——Hybrid架构 Native WebApp Hybrid Native的优势： 直接调用系统提供的API接口，如访问通讯录 直接使用系统提供的GUI，如菜单，按钮 缺点： 代码无法共用，如苹果object-c，android-java 必须去App商店更新 WebApp的优势： 支持多种平台，完全用HTML、CSS和avaScript来编写，开发成本低 缺点： 只能调用系统提供的部分API接口，如gis定位 不能使用GUI工具包 Hybrid的优势： 直接访问Native API 跨平台Web技术 系统更新直接 整体架构方案——Hybrid架构 JS Webview Native ios， Android， wp7 PhoneGap——让Web 开发人员能够使用熟悉的HTML，CSS 和JavaScript 构建跨平台的移动应用 1，建立了一套Native 到JS和JS到Native的双向通道 2，能打包成各种平台应用 前端技术架构——模板JSON 后端负责输出JSON数据 前端使用模板引擎进行页面渲染和交互处理 数据库，服务 API (输出JSON) APP Web Mobile … 前端 后端 前端技术架构——模板JSON Handlebars.js : 模板引擎 HTML + JSP HTML + 手动拼接 + JSON HTML + 模板引擎 + JSON 需要注意的地方 API 应用的封装程度尽量高，前端应用尽量不要包含业务逻辑 模板依旧选用的是handlebars，在移动端有待改进 前端技术选型——jQueryjQueryMobile 底层核心库：jQuery 进行底层DOM操作 封装Ajax方法 UI库：jQuery Mobile 使用它的样式库，如List，Form… 使用它提供的方法，如init，pagechange… 为什么不用Zepto.js ? 缺少样式库支持 脚本插件也不够丰富 前端技术选型——UI库 滚动：iScroll 处理局部滚动 滚动性能接近原生 可定制性非常好 V 4.0 Q：使用overflow:auto不行吗？ A：在移动浏览器上，滚动条显示有问题，并且交互体验很差，几乎用不了。 定制横向或纵向滚动 是否显示滚动条 可定制滚动条样式及效果 惯性效果 Snap效果 前端技术选型——UI库 滑动：Swipe 针对webkit的slider组件 简单，无依赖，可定制 可以设置回调 可以设置自动滚动 HTML结构简单 V 2.0 前端技术选型——UI库 弹出层：Popup 使用position:absolute和opacity实现 前端新技术方案 Grunt：自动化构建工具，类似Ant、Maven。 SASS：CSS预处理，能在CSS中使用变量。 SeaJs：前端模块化管理。 Bootstrap：CSS和HTML的前端工具包。 响应式设计：使页面适合多种分辨率， 通过media属性来控制。 前端新技术方案——响应式设计 响应式：link rel=stylesheet type=text/css media=screen and (max-device-width:320px) href=“css320.css / link rel=stylesheet type=text/css media=screen and (max-device-width:640px) href=“css640.css / 传统式：link rel=stylesheet type=text/css href=“css.css / 经验总结 类似于jsp的include方法 非常方便的引入公用文件，HTML开发模式的弊端终于解决了 用法： HTML引入公用文件 #include /res/module/sys_top.inc / ！！！感谢超哥在百忙之中的帮忙。 localStorage，大小5MB 数据缓存在本地，减少请求，加快访问速度 用法：提供4个方法 案例：访问一次菜单就缓存，重新登录时清空缓存 HTML5 本地缓存 nbht