http://my.oschina.net/liux/blog/65119
要说hybrid app 框架的典范,Phonegap和AppCan无疑是最受大家关注的。先说明,本人是App的开发者,对手机上的web app也研究一段时间。本文以技术角度去阐述一个事实:为什么AppCan比Phonegap开发出来的应用会比较好。
其实要从技术上来讲的话,phonegap只是提供本地API,以及一个打包器,大部分的UI、UE的都是交由phonegap推荐的jquerymobile,sencha touch等js+css框架来实现。而为何phonegap比较受大家关注呢,一方面是它出来比较早,推广时间较长;另一方面它是开源的,很多android native开发者都对其进行了插件扩展,能够满足一些开发需求。然而,经过对手机版(ios,android)webkit研究过一段时间后,一个不争的事实是手机版webkit有诸多问题,特别是在android碎片化的情况下,不同版本,不同手机对某一个css属性表现的就不一样。这对于一个要做跨平台开发的框架来说,是不能接受的,也达不到跨平台的初衷。下面我利用appcan+AppCan UI2.0开发一个简单的app,同时也利用phonegap+jquerymobile去开发同样的一个app。
首先我们先看一下AppCan应用与PhoneGap应用视频对比:
http://v.youku.com/v_show/id_XNDIzODg2MjY0.html
下面是开发介绍:
AppCan开发
首先,关于UI,AppCan的UI,即css文件,按照控件的类型(按钮、列表等)拆分的比较细,这样,如果一个应用中用不到的控件,开发者可以把这些css文件删除掉。利用AppCan 的开发环境,创建一个工程,并创建几个页面。其整个工程截图如下:
这个demo要做的是三个UI,第一个就两个按钮,第二个是展示内容用的,内容有3w多字。第三个ui是一个网络跨域获取数据的例子。
第一个ui,由于是只有两个按钮,只用一个index.html,利用AppCan IDE选择按钮控件,生成代码并利用AppCan IDE中自带的模拟器查看效果:
02 |
< div class = "ub ub-ver uba uc-a1 t-wh " >
|
03 |
< div class = "ubb b-gra c-m1 uinn uc-t1" >
|
05 |
< div ontouchstart = "zy_touch('btn-act',getpageone)" class = "btn uba b-bla uinn5 c-blu c-m2 uc-a t-wh ulev1" >加载page "two"</ div >
|
08 |
< div class = "ubb b-gra c-m1 uinn " >
|
10 |
< div ontouchstart = "zy_touch('btn-act',getpagetwo)" class = "btn uba b-bla uinn5 c-blu c-m2 uc-a t-wh ulev1" >加载page "three"</ div >
|
第二个UI:即内容展示页,展示的内容有3W多字,由于内容区域需要用到滚动条,因此可以用到浮动窗口。即two.html是展示头部,内容区域,底部,其中内容区域只是一个div,并没有内容。而index_content.html是显示内容用的,放到一个浮动窗口中去加载,并且此浮动窗口盖到two.html那个窗口中,大小正好和内容区域div一样。这里为什么说在有滚动条的情况下,要用浮动窗口替代呢。因为css的position:fixed在android2.2版本,ios5中才开始支持,并且ios5中还会存在问题,因此如果一个页面布局想要头部,底部固定,中间区域带滚动条的,将会出现问题。AppCan可以很好的借助native的方式解决了此问题。
第三个UI:是为了测试下jquery的$.getJSON跨域异步请求方法,以及AppCan的uexXmlHttpMgr这个方法的响应速度,经过测试,两种方式相差无几。需要提的是uexXmlHttpMgr还有比较强大的功能,不在本文讨论范围之内。
AppCan打包
上述三个UI做好之后,直接用AppCan IDE中打包即可:
JqueryMobile开发
根据jquerymobile官网上例子,搭建上述三个UI的类似代码(文字内容部分删掉了):
05 |
< meta charset = "utf-8" >
|
06 |
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
|
07 |
< title >Multi-page template</ title >
|
08 |
< link rel = "stylesheet" href = "css/jquery.mobile-1.0.1.min.css" />
|
09 |
< script src = "js/jquery.js" ></ script >
|
10 |
< script src = "js/jquery.mobile-1.0.1.min.js" ></ script >
|
17 |
< div data-role = "page" id = "one" >
|
19 |
< div data-role = "header" >
|
23 |
< div data-role = "content" >
|
25 |
< p >< a href = "#two" data-role = "button" data-transition = "slide" >加载page "two"</ a ></ p >
|
26 |
< p >< a href = "#three" data-role = "button" data-transition = "slide" >加载page "three"</ a ></ p >
|
29 |
< div data-role = "footer" data-theme = "d" data-position = "fixed" >
|
36 |
< div data-role = "page" id = "two" data-theme = "a" >
|
38 |
< div data-role = "header" data-position = "fixed" >
|
40 |
< a href = "#one" data-icon = "home" data-iconpos = "notext" data-direction = "reverse" >Home</ a >
|
43 |
< div data-role = "content" data-theme = "a" >
|
47 |
< div data-role = "footer" data-position = "fixed" >
|
53 |
< div data-role = "page" id = "three" data-theme = "a" >
|
55 |
< div data-role = "header" data-position = "fixed" >
|
57 |
< a href = "#one" data-icon = "home" data-iconpos = "notext" data-direction = "reverse" >Home</ a >
|
60 |
< div data-role = "content" data-theme = "a" >
|
62 |
< a href = "javascript:void(0)" onclick = "getdata()" data-role = "button" data-mini = "true" >Ajax get Data</ a >
|
63 |
< ul data-role = "listview" data-inset = "true" data-theme = "b" data-dividertheme = "f" >
|
64 |
< li data-role = "list-divider" >时间</ li >
|
65 |
< li id = "bt" >请求开始时间:</ li >
|
66 |
< li id = "et" >请求结束时间:</ li >
|
68 |
< ul data-role = "listview" data-inset = "true" data-theme = "c" data-dividertheme = "f" >
|
69 |
< li data-role = "list-divider" id = "title" ></ li >
|
70 |
< div id = "content" ></ div >
|
75 |
var d = new Date().getTime();
|
76 |
document.getElementById("bt").innerHTML = "请求开始时间:"+d;
|
77 |
$.getJSON("http://te.3g2win.com/case/?jsoncallback=?",function(data){
|
78 |
var e = new Date().getTime();
|
79 |
document.getElementById("et").innerHTML = "请求结束时间:"+e;
|
80 |
document.getElementById("title").innerHTML = data.title;
|
81 |
document.getElementById("content").innerHTML = data.content;
|
85 |
< div data-role = "footer" data-position = "fixed" >
|
phonegap打成安装包
把写好的网页包放到android原生开发环境下,通过android原生环境生成安装包的方式生成:
对比
通过这个小demo,我们总结下phonegap和appcan的异同点。
相同点:
- 都是用html+css+js技术区实现此demo的ui,ue部分
- 都能生成安装包
不同点:
- phonegap负责打包(此demo没有用到本地API),jquerymobile负责页面UI、UE;AppCan两者都提供,且打包无需native开发环境。
- jquerymobile方案中,所有的page都在一个html页面中。AppCan方案中,不同的page可以放到不同的html中,甚至更灵活的,同一个page中的内容区域可以用单独的html来展示。
- 生成安装包大小,phonegap比较小,appcan比较大。这是因为appcan带了android,ios的启动图片。以及里面一些native插件需要的一些图片资源。
附件给出两个安装包以及两个网页包的代码:
点击此处
分享到:
相关推荐
Appcan
appcan-plugin-pdfreader-android appcan-plugin-pdfreader-android
appcan-plugin-imagebrowser-android appcan-plugin-imagebrowser-android
appcan-plugin-filemgr-android appcan-plugin-filemgr-android
appcan-plugin-downloadermgr-android appcan-plugin-downloadermgr-android
appcan-plugin-qq-android appcan-plugin-qq-android
appcan-plugin-zip-android appcan-plugin-zip-android
appcan-plugin-audio-android appcan-plugin-audio-android
appcan-plugin-sina-android appcan-plugin-sina-android
appcan-plugin-xmlhttpmgr-android appcan-plugin-xmlhttpmgr-android
appcan-plugin-contact-android appcan-plugin-contact-android
appcan-plugin-pay-android appcan-plugin-pay-android
appcan-plugin-alipay-android appcan-plugin-alipay-android
appcan-plugin-timemachine-ios appcan-plugin-timemachine-ios
appcan-plugin-timemachine-android appcan-plugin-timemachine-android
appcan-plugin-baidumap_old-android uexBaiduMap(iOS)封装的是iOS SDK v1.2.2版本, uexBaiduMap(Android)封装的是Android SDK v1.3.5版本。 百度官方声明: iOS SDK自v2.0.2版本开始采用了全新的Key验证体系, ...
JSSDK-1.1.4-20180416.zip,Appcan最新的jssdk,在开发工具中替换代码中的js和css即可
AppCan MEAP V3企业移动应用平台技术白皮书
appcan-android appcan-android引擎 参考 QQ交流群:173758265 生成引擎包步骤: 新建Android Studio工程Engine_AppCan clone 引擎代码到工程Engine_AppCan git clone ...
正益无线自主研发的Hybrid App(混合应用)引擎AppCan,支持跨平台移动应用开发,集合了Web App和Native App的各自优势,即降低了开发难度,又保留了原生体验。该引擎提供丰富的移动设备能力API,如调用摄像头、...