网易博客Android客户端 -- native+html5移动应用混合开发实践 【转】
2014-06-27 10:32
627 查看
【项目历程】[/b] 历时三个月,经过交互、前端设计、开发、测试,近期网易博客Android客户端即将面世,届时广大使用Android 手机的博友们可以随地随地 写日志、心情,评论,推荐。 早在去年年底左右,技术组已经着手调研技术可行性,最后选型 native结合html5的混合开发方式,并于今年3月底发布了第一个可行性示例。 此时积累了如下实践成果:自主开发的面向移动客户端的JS mobile web Framework (mwf)
mwf框架包含:基础库(节点操作、触摸事件等),控件库(事件调度、缓存、ajax引擎、模板引擎等)、移动库(通知、文件处理、地理位置等)
Patched Phonegap Framework (phonegap 基础上的patch)
修正了如Fling事件被skip、Focus问题与软键盘处理、Fixed position、Click延迟等问题
Native Util (项目需求增加的工具类,如消息通知、menu等)
接着4月份开始,该技术开始应用到博客Android的产品。经过团队各位同事的协作,现在产品的雏形如下:
Native+html5的混合开发【功能简介】 [/b] 网易博客Android V1.0 功能概况:
“发布日志、心情,图片日志”等基础发布功能:
“浏览个人中心动态、他人博客、日志、心情、相册”等基础阅读功能:
“推荐、评论、留言、处理各种消息中心”等基本博客操作功能:
【 技术解析】[/b]客户端和服务器的交互[/b]
博客客户端其实可以理解为一个chrome浏览器(webkit引擎),与服务器的交互采用web开发常用的dwr操作数据的方式,这样方便了web开发人员平滑的过度到手机客户端的开发,同时充分发挥出了浏览器调试工具的作用。
客户端数据的缓存(html5)[/b]
考虑到移动设备流量的宝贵性及离线的可访问性,产品将用户访问的数据缓存于本地,用户在使用过产品后,后续的使用均默认从缓存获取数据,只有当用户显式的刷新时才会从服务器重新获取数据。
在自主开发mwf框架里集成了Local Storage 的缓存处理,并且针对本地存储做了两点优化 对每个要存储的数据增加脏数据标志位的判断。解决在实践中遇到Local Storage 的删除操作完成后,缓存数据并未真正删除的问题。
在本地存储的基础上增加了对象内存缓存,提高了读取数据的性能。
消息的实时通知[/b](html5)[/b]
用户的互动操作(如评论、留言、关注、加博友的场景)中采用了实时双向推送技术WebSocket,通过native扩展的接口友好的呈现给用户,该技术的应用很大程度的改善了用户的互动体验。
[align=center] 通知[/align]
拍照、通知栏通知等的实现( native扩展 )[/b]
客户端和手机的相互操作(如拍照,通知栏),采用phonegap暴露的js api 来调用实现。
拍照
文件上传
通知铃声设置
Css3的应用[/b]
[align=center]圆角、渐变、阴影、变换 (如图)[/align][align=center]
[/align][align=center]来自:http://blog.163.com/kevin2_0/blog/static/2493792011626111637530/[/align]
mwf框架包含:基础库(节点操作、触摸事件等),控件库(事件调度、缓存、ajax引擎、模板引擎等)、移动库(通知、文件处理、地理位置等)
Patched Phonegap Framework (phonegap 基础上的patch)
修正了如Fling事件被skip、Focus问题与软键盘处理、Fixed position、Click延迟等问题
Native Util (项目需求增加的工具类,如消息通知、menu等)
接着4月份开始,该技术开始应用到博客Android的产品。经过团队各位同事的协作,现在产品的雏形如下:
Native+html5的混合开发【功能简介】 [/b] 网易博客Android V1.0 功能概况:
“发布日志、心情,图片日志”等基础发布功能:
“浏览个人中心动态、他人博客、日志、心情、相册”等基础阅读功能:
“推荐、评论、留言、处理各种消息中心”等基本博客操作功能:
【 技术解析】[/b]客户端和服务器的交互[/b]
博客客户端其实可以理解为一个chrome浏览器(webkit引擎),与服务器的交互采用web开发常用的dwr操作数据的方式,这样方便了web开发人员平滑的过度到手机客户端的开发,同时充分发挥出了浏览器调试工具的作用。
客户端数据的缓存(html5)[/b]
考虑到移动设备流量的宝贵性及离线的可访问性,产品将用户访问的数据缓存于本地,用户在使用过产品后,后续的使用均默认从缓存获取数据,只有当用户显式的刷新时才会从服务器重新获取数据。
在自主开发mwf框架里集成了Local Storage 的缓存处理,并且针对本地存储做了两点优化 对每个要存储的数据增加脏数据标志位的判断。解决在实践中遇到Local Storage 的删除操作完成后,缓存数据并未真正删除的问题。
在本地存储的基础上增加了对象内存缓存,提高了读取数据的性能。
消息的实时通知[/b](html5)[/b]
用户的互动操作(如评论、留言、关注、加博友的场景)中采用了实时双向推送技术WebSocket,通过native扩展的接口友好的呈现给用户,该技术的应用很大程度的改善了用户的互动体验。
[align=center] 通知[/align]
拍照、通知栏通知等的实现( native扩展 )[/b]
客户端和手机的相互操作(如拍照,通知栏),采用phonegap暴露的js api 来调用实现。
拍照
文件上传
通知铃声设置
Css3的应用[/b]
[align=center]圆角、渐变、阴影、变换 (如图)[/align][align=center]
[/align][align=center]来自:http://blog.163.com/kevin2_0/blog/static/2493792011626111637530/[/align]
相关文章推荐
- HTML5:网易博客Android客户端 — native+html5移动应用混合开发实践
- 网易博客Android客户端 — native+html5移动应用混合开发实践
- 网易博客Android客户端 -- native+html5移动应用混合开发实践
- Android客户端 — native+html5移动应用混合开发
- 移动开发----android Intent调用地图应用客户端
- 手机网络应用客户端软件开发实践简介
- 手机网络应用客户端软件开发实践简介
- Icenium:Doug Seven谈针对iOS与Android构建混合移动应用
- 一、东软实践项目2-基于android平台的应用开发:实现页面之间的跳转
- 用.Net打造一个移动客户端(Android/IOS)的服务端框架NHM(三)——搭建Android开发环境,用Hibernate生成Android项目的Model层
- 手机网络应用客户端软件开发实践简介
- 基于Android移动终端的搜索客户端应用【团队项目】
- 精品Android讲堂--“面向移动终端的应用开发前景及android开发基础实例”[
- open source HTML 5移动应用 -Exlive 人员定位客户端(BlackBerry 10, Android, iPhone)
- 二、东软实践项目2-基于android平台的应用开发:简单用户登陆
- Android应用开发从入门到实践
- android安卓手机智能客户端-----移动社区客户端应用
- SAP企业移动平台开发探索系列6 – 使用SUP开发Android离线应用
- 淘宝网手机客户端应用开发见解带android版源码下载
- Android开发者收入仅相当于iOS应用24%(同样做移动开发,Android开发者赚的就比iPhone少,利益分成是根源)