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

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