- 1、本文档共29页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
移动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
您可能关注的文档
- 2014年研究生学位论文开题报告.ppt
- 2014年研课标说教材·环境教育知识树.ppt
- 2014年演讲.ppt
- 2014年演示毕业论文答辩.ppt
- 2014年燕山大学 研究生学位论文开题报告.ppt
- 2014年扬州星火太阳能照明有限公司销售部工作计划.ppt
- 2014年扬子电热水器可行性分析报告.ppt
- 2014年阳泉电大工商管理(本科)专业导学群运作情况介绍.ppt
- 2014年养老院项目可行性分析报告.ppt
- 2014年养生养老房产项目可行性分析报告.ppt
- 江苏省灌云高级中学2023-2024学年高三上学期第一次月考地理试题含答案.docx
- 备战2024年高考物理一轮重难点复习 第十三章 近代物理.docx
- 江苏省高邮市一中2021-2022学年高三上学期第一次月考语文试题(原卷版).docx
- 江苏省华罗庚中学2023-2024学年高三上学期12月阶段检测数学试卷含答案.docx
- 江苏省海门中学2023-2024学年高三上学期第一次调研考试地理试题及答案.docx
- 备战2024年高考物理一轮重难点复习 第九章 恒定电流.docx
- 江苏省高邮市2023-2024学年高三下学期3月学情调研数学试题含答案.docx
- 备战2024年高考物理一轮重难点复习 实验十一:探究影响感应电流方向的因素.docx
- 备战2024年高考物理一轮重难点复习 实验三:验证平行四边形定则.docx
- 备战2024年高考物理一轮重难点复习 第十四章 光.docx
文档评论(0)