Android客户端 — native+html5移动应用混合开发
2011-10-16 12:22
429 查看
选型 native结合html5的混合开发方式
自主开发的面向移动客户端的JS
mobile web Framework (mwf)
mwf框架包含:基础库(节点操作、触摸事件等),控件库(事件调度、缓存、ajax引擎、模板引擎等)、移动库(通知、文件处理、地理位置等)
Patched
Phonegap Framework (phonegap 基础上的patch)
修正了如Fling事件被skip、Focus问题与软键盘处理、Fixed position、Click延迟等问题
Native
Util (项目需求增加的工具类,如消息通知、menu等)
接着4月份开始,该技术开始应用到博客Android的产品。经过团队各位同事的协作,现在产品的雏形如下:
【
技术解析】
客户端和服务器的交互
博客客户端其实可以理解为一个chrome浏览器(webkit引擎),与服务器的交互采用web开发常用的dwr操作数据的方式,这样方便了web开发人员平滑的过度到手机客户端的开发,同时充分发挥出了浏览器调试工具的作用。
客户端数据的缓存(html5)
考虑到移动设备流量的宝贵性及离线的可访问性,产品将用户访问的数据缓存于本地,用户在使用过产品后,后续的使用均默认从缓存获取数据,只有当用户显式的刷新时才会从服务器重新获取数据。
在自主开发mwf框架里集成了Local
Storage 的缓存处理,并且针对本地存储做了两点优化
对每个要存储的数据增加脏数据标志位的判断。解决在实践中遇到Local
Storage 的删除操作完成后,缓存数据并未真正删除的问题。
在本地存储的基础上增加了对象内存缓存,提高了读取数据的性能。
消息的实时通知(html5)
用户的互动操作(如评论、留言、关注、加博友的场景)中采用了实时双向推送技术WebSocket,通过native扩展的接口友好的呈现给用户,该技术的应用很大程度的改善了用户的互动体验。
![](http://www.mhtml5.com/wp-content/uploads/2011/07/5-500x357.png)
通知
拍照、通知栏通知等的实现(
native扩展 )
客户端和手机的相互操作(如拍照,通知栏),采用phonegap暴露的js
api 来调用实现。
![](http://www.mhtml5.com/wp-content/uploads/2011/07/6-500x357.png)
拍照
![](http://www.mhtml5.com/wp-content/uploads/2011/07/7-500x357.png)
文件上传
![](http://www.mhtml5.com/wp-content/uploads/2011/07/8-500x357.png)
通知铃声设置
Css3的应用
![](http://www.mhtml5.com/wp-content/uploads/2011/07/9-500x358.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/12/73e93dfe6814de04c5242b7d6f6b33a4)
androidblog-0.9.1.7beta.rar(550.31K)
下载
自主开发的面向移动客户端的JS
mobile web Framework (mwf)
mwf框架包含:基础库(节点操作、触摸事件等),控件库(事件调度、缓存、ajax引擎、模板引擎等)、移动库(通知、文件处理、地理位置等)
Patched
Phonegap Framework (phonegap 基础上的patch)
修正了如Fling事件被skip、Focus问题与软键盘处理、Fixed position、Click延迟等问题
Native
Util (项目需求增加的工具类,如消息通知、menu等)
接着4月份开始,该技术开始应用到博客Android的产品。经过团队各位同事的协作,现在产品的雏形如下:
【
技术解析】
客户端和服务器的交互
博客客户端其实可以理解为一个chrome浏览器(webkit引擎),与服务器的交互采用web开发常用的dwr操作数据的方式,这样方便了web开发人员平滑的过度到手机客户端的开发,同时充分发挥出了浏览器调试工具的作用。
客户端数据的缓存(html5)
考虑到移动设备流量的宝贵性及离线的可访问性,产品将用户访问的数据缓存于本地,用户在使用过产品后,后续的使用均默认从缓存获取数据,只有当用户显式的刷新时才会从服务器重新获取数据。
在自主开发mwf框架里集成了Local
Storage 的缓存处理,并且针对本地存储做了两点优化
对每个要存储的数据增加脏数据标志位的判断。解决在实践中遇到Local
Storage 的删除操作完成后,缓存数据并未真正删除的问题。
在本地存储的基础上增加了对象内存缓存,提高了读取数据的性能。
消息的实时通知(html5)
用户的互动操作(如评论、留言、关注、加博友的场景)中采用了实时双向推送技术WebSocket,通过native扩展的接口友好的呈现给用户,该技术的应用很大程度的改善了用户的互动体验。
![](http://www.mhtml5.com/wp-content/uploads/2011/07/5-500x357.png)
通知
拍照、通知栏通知等的实现(
native扩展 )
客户端和手机的相互操作(如拍照,通知栏),采用phonegap暴露的js
api 来调用实现。
![](http://www.mhtml5.com/wp-content/uploads/2011/07/6-500x357.png)
拍照
![](http://www.mhtml5.com/wp-content/uploads/2011/07/7-500x357.png)
文件上传
![](http://www.mhtml5.com/wp-content/uploads/2011/07/8-500x357.png)
通知铃声设置
Css3的应用
![](http://www.mhtml5.com/wp-content/uploads/2011/07/9-500x358.png)
androidblog-0.9.1.7beta.rar(550.31K)
下载
相关文章推荐
- 网易博客Android客户端 -- native+html5移动应用混合开发实践
- 网易博客Android客户端 -- native+html5移动应用混合开发实践 【转】
- 网易博客Android客户端 — native+html5移动应用混合开发实践
- HTML5:网易博客Android客户端 — native+html5移动应用混合开发实践
- 移动开发----android Intent调用地图应用客户端
- 原生还是混合? APP还是小程序?看看移动应用开发的正确姿势
- Android移动应用开发学习笔记(二)——用户注册
- Android应用开发-小巫CSDN博客客户端之嵌入有米广告
- Android应用开发-小巫CSDN博客客户端Jsoup篇
- 精品Android讲堂--“面向移动终端的应用开发前景及android开发基础实例”[
- 基于Android平台淘宝网手机客户端实战开发(共四季,涉及各类技术应用)
- 小程序开发文档:移动应用支持微信小程序类型分享(Android应用)
- android4.2开发手机新闻移动客户端
- Hybird App ( 混合模式移动应用)开发初体验
- Android应用开发-小巫CSDN博客客户端开发开篇
- Golang 开发移动应用的OpenGL(Android为例)的渲染管线
- phonegap 开发入门 PhoneGap官方网站上有详细的入门示例教程,这里,我针对使用PhoneGap进行Android移动应用的开发对其官网的Get Started进行一些介绍、补充。 Ste
- Icenium:Doug Seven谈针对iOS与Android构建混合移动应用
- 移动混合开发之android文件管理新建文件和删除文件
- Android开发者收入仅相当于iOS应用24%(同样做移动开发,Android开发者赚的就比iPhone少,利益分成是根源)