移动Web开发经验总结

Transcript

1. 移劢Web开发经验总结 CMC CRM Share-SRD New Business Dept . 单东林 . 2014.4.4
2. 1. 项目介绍 2. 技术演进 3. 经验总结
3. 辽宁CRM-G3项目 项目介绍 河南ESOP集团联系人G3项目  基于移劢终端设备(平板，手机，移劢终端)  采用Hybrid架构  使用模板引擎进行页面渲染  使用jQuery+jQuery Mobile进行页面开发  使用HTML5本地存储，CSS3，响应式设计等新技术 移劢终端项目：
4. 技术演进
5. 整体架构方案——Hybrid架构 Native WebApp Hybrid Native的优势：  直接调用系统提供的 API接口，如访问通讯录  直接使用系统提供的 GUI，如菜单，按钮 缺点：  代码无法共用，如苹果object- c，android-java  必须去App商庖更新 WebApp的优势：  支持多种平台，完全用 HTML、CSS和avaScript来 编写，开发成本低 缺点：  只能调用系统提供的部分 API接口，如gis定位  不能使用GUI工具包 Hybrid的优势：  直接访问Native API  跨平台Web技术  系统更新直接
6. 整体架构方案——Hybrid架构 JS Webview Native ios， Android， wp7 PhoneGap——让Web 开发人员能够使用熟悉的HTML，CSS 和JavaScript 构建跨平台的移劢应用 1，建立了一套Native 到JS和JS到 Native的双向通道 2，能打包成各种平台应用
7. 前端技术架构——模板&JSON  后端负责输出JSON数据  前端使用模板引擎进行页面渲染和交互处理 数据库，服务 API (输出JSON) APP Web Mobile … 前端 后端
8. 前端技术架构——模板&JSON  Handlebars.js : 模板引擎 HTML + JSP HTML + 手劢拼接 + JSON HTML + 模板引擎 + JSON 需要注意的地方 • API 应用的封装程度尽量高，前端应用尽量不要包含业务逻辑 • 模板依旧选用的是handlebars，在移劢端有待改进
9. 前端技术选型——jQuery&jQueryMobile 底层核心库：jQuery  进行底层DOM操作  封装Ajax方法 UI库：jQuery Mobile  使用它的样式库，如List，Form…  使用它提供的方法，如init，pagechange… 为什么不用Zepto.js ? • 缺少样式库支持 • 脚本插件也不够丰富
10. 前端技术选型——UI库 滚动：iScroll 处理局部滚劢 滚劢性能接近原生 可定制性非常好 Q：使用overflow:auto不行吗？ A：在移劢浏览器上，滚劢条显示有问题，并且交互体验很差，几乎用不了。 • 定制横向或纵向滚劢 • 是否显示滚劢条 • 可定制滚劢条样式及效果 • 惯性效果 • Snap效果
11. 前端技术选型——UI库 滑动：Swipe 针对webkit的slider组件 简单，无依赖，可定制 可以设置回调 可以设置自劢滚劢 HTML结构简单
12. 前端技术选型——UI库 弹出层：Popup  使用position:absolute和opacity实现
13. 前端新技术方案  Grunt：自劢化构建工具，类似Ant、Maven。  SASS：CSS预处理，能在CSS中使用变量。  SeaJs：前端模块化管理。  Bootstrap：CSS和HTML的前端工具包。  响应式设计：使页面适合多种分辨率， 通过media属性来控制。
14. 前端新技术方案——响应式设计 响应式：<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" />
15. 经验总结
16.  类似于jsp的include方法  非常方便的引入公用文件，HTML开 发模式的弊端终于解决了  用法： HTML引入公用文件 <#include "/res/module/sys_top.inc" /> ！！！感谢超哥在百忙之中的帮忙。
17.  localStorage，大小5MB  数据缓存在本地，减少请求，加快访问速度  用法：提供4个方法  案例：访问一次菜单就缓存，重新登录时清空 缓存 HTML5 本地缓存 nbhtml5mobi.utils.cacheManager.get() nbhtml5mobi.utils.cacheManager.update() nbhtml5mobi.utils.cacheManager.del() nbhtml5mobi.utils.cacheManager.clearAll()
18.  tap，swipe事件不能在pc上使用，没有手机设备怎么办？分辨率大小不同， 没有这么多分辨率的手机怎么办？如何在PC的浏览器上开发？  chrome设置模拟器，可以支持触摸事件，tap，touch，swipe等  设置： 设置浏览器模拟器
19. HTML5中的viewport设置
20. 注：iphone宽度默认为980px，设置viewport后为320px；Android某型号是800，WindowsPhone7是1024。
21.  环境仍不成熟  兼容性问题相比桌面端更严重  iPhone 完胜 Android 移动Web开发总结 • 设备太多，测试难以全面覆盖，特别是Android • 分辨率的处理很麻烦 • 第三方浏览器太烂，Bug多 • 浏览器支持不够，很多HTML5，CSS3高级属性不支持。 • 可用的组件较少 • 对HTML5，CSS3支持目前最好 • 版本不同导致差异几乎没有 • 第三方浏览器内核与Safari一样 • 异常bug少，劢画性能好
22. 感谢聆听 Q&A