【高级资料】2015年移动web开发经验总结(单东林).ppt

移动Web开发经验总结
CMC CRM Share-SRD New Business Dept . 单东林.
项目介绍
技术演进
经验总结
辽宁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
: 模板引擎
HTML
+
JSP
HTML
+
手动拼接
+
JSON
HTML
+
模板引擎
+
JSON
需要注意的地方
API 应用的封装程度尽量高,前端应用尽量不要包含业务逻辑
模板依旧选用的是handlebars,在移动端有待改进
前端技术选型——jQuery&jQueryMobile
底层核心库:jQuery
进行底层DOM操作
封装Ajax方法
UI库:jQuery Mobile
使用它的样式库,如List,Form…
使用它提供的方法,如init,pagechange…
?
缺少样式库支持
脚本插件也不够丰富
前端技术选型——UI库
滚动:iScroll
处理局部滚动
滚动性能接近原生
可定制性非常好
V
Q:使用overflow:auto不行吗?
A:在移动浏览器上,滚动条显示有问题,并且交互体验很差,几乎用不了。
定制横向或纵向滚动
是否显示滚动条
可定制滚动条样式及效果
惯性效果
Snap效果