`

AppCan VS PhoneGap - 对比两大移动开发平台

阅读更多

 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中自带的模拟器查看效果: 

01 <!--块容器开始-->
02 <divclass="ub ub-ver uba  uc-a1 t-wh ">  
03     <div class="ubb b-gra  c-m1 uinn uc-t1">
04         <!--按钮开始-->
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>
06         <!--按钮结束-->
07     </div>
08     <div class="ubb b-gra  c-m1 uinn ">
09         <!--按钮开始-->
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>
11         <!--按钮结束-->
12     </div>  
13 </div>
14 <!--块容器结束-->

 

 

第二个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的类似代码(文字内容部分删掉了): 

01 <!DOCTYPE html>
02 <html>
03  
04 <head>
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>
11 </head>
12  
13     
14 <body>
15  
16 <!-- Start of first page: #one -->
17 <div data-role="page" id="one" >
18  
19     <div data-role="header">
20         <h1>Multi-page</h1>
21     </div><!-- /header -->
22  
23     <div data-role="content">  
24         <h2>Page One</h2>
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>  
27     </div><!-- /content -->
28     
29     <div data-role="footer" data-theme="d" data-position="fixed">
30         <h4>Page Footer</h4>
31     </div><!-- /footer -->
32 </div><!-- /page one -->
33  
34  
35 <!-- Start of second page: #two -->
36 <div data-role="page" id="two" data-theme="a">
37  
38     <div data-role="header" data-position="fixed">
39         <h1>Two</h1>
40         <a href="#one" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
41     </div><!-- /header -->
42  
43     <div data-role="content"data-theme="a">  
44         <h2>Hybrid app</h2>
45 </div><!-- /content -->
46     
47     <div data-role="footer" data-position="fixed">
48         <h4>Page Footer</h4>
49     </div><!-- /footer -->
50 </div><!-- /page two -->
51  
52 <!-- Start of three page: #three -->
53 <div data-role="page" id="three" data-theme="a">
54  
55     <div data-role="header" data-position="fixed">
56         <h1>three</h1>
57         <a href="#one" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
58     </div><!-- /header -->
59  
60     <div data-role="content"data-theme="a">  
61         <h2>异步加载网络数据</h2>
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>
67             </ul>
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>
71             </ul>
72     </div><!-- /content -->
73     <script>
74         function getdata(){
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;
82             });
83         }
84     </script>
85     <div data-role="footer" data-position="fixed">
86         <h4>Page Footer</h4>
87     </div><!-- /footer -->
88 </div><!-- /page three -->
89  
90 </body>
91 </html>


  


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插件需要的一些图片资源。


附件给出两个安装包以及两个网页包的代码
 点击此处 

分享到:
评论
1 楼 wpy126 2013-07-03  
你这种比较根本不公平
​AppCan 用了多个页面,jqm内容都放到了一个页面。 
​AppCan你open了只是个two.html内容页,jqm你用href="#two"这种是刷新整个页,里边包括首页和两个内容页的内容以及ajax异步请求数据页,用URL(锚)定到这个页面里所谓的第二个内容页的html部分。
​AppCan open的新页时,新页盖到了index页上,index页就没关闭返回时只是把原打开index页移到了到了最上边。而jqm每次都是整个大页面来了个刷新。

相关推荐

    Appcan-UI-Class-速查手册

    Appcan是一款强大的移动应用开发工具,它提供了丰富的UI组件来帮助开发者快速构建出美观且功能完善的移动应用界面。本手册中的知识点将围绕着这些UI类展开,涵盖其功能、应用场景及如何与其他类协同工作等内容。 ##...

    appcan-plugin-audio-android:appcan-plugin-audio-android

    AppCan作为一款跨平台的移动应用开发工具,其核心理念是“一次编写,多端运行”。它支持iOS、Android以及微信小程序等多个平台,通过其丰富的API接口和组件,开发者可以利用Web技术创建功能丰富的原生应用。其中,...

    appcan-plugin-pay-android:appcan-plugin-pay-android

    【appcan-plugin-pay-android】是针对AppCan移动应用开发平台的一个支付插件,主要用于实现Android设备上的支付功能。AppCan是一个HTML5 App开发工具,它允许开发者使用HTML、CSS和JavaScript来构建原生的移动应用。...

    appcan-plugin-sina-android:appcan-plugin-sina-android

    【描述】中提到的"appcan-plugin-sina-android"两次,这可能暗示这个插件是专门针对AppCan开发环境设计的,AppCan是一个HTML5移动应用开发平台,它允许开发者用HTML5技术构建原生的移动应用。这个插件的作用可能是...

    appcan-plugin-pdfreader-android:appcan-plugin-pdfreader-android

    1. **AppCan框架**:AppCan是一个基于HTML5的跨平台移动应用开发框架,它提供了一套完整的工具链,包括IDE、API、组件库等,使得开发者可以用Web技术开发原生应用。 2. **PDF阅读器**:PDF(Portable Document ...

    appcan-plugin-contact-android:appcan-plugin-contact-android

    AppCan是一个知名的HTML5跨平台移动应用开发框架,它允许开发者使用HTML、CSS和JavaScript来创建原生应用。此插件可能是AppCan框架的一个扩展,用于在Android平台上访问和操作联系人信息。 【描述】"appcan-plugin-...

    appcan-plugin-downloadermgr-android:appcan-plugin-downloadermgr-android

    appcan-plugin-downloadermgr-android appcan-plugin-downloadermgr-android

    appcan-plugin-alipay-android:appcan-plugin-alipay-android

    《AppCan支付宝插件在Android平台的应用开发详解》 在移动应用开发领域,AppCan作为一款强大的HTML5+原生混合开发工具,以其便捷高效的特点深受开发者喜爱。本篇文章将聚焦于AppCan如何与支付宝集成,通过“appcan-...

    appcan-plugin-timemachine-ios:appcan-plugin-timemachine-ios

    【appcan-plugin-timemachine-ios】是一个专门为AppCan平台开发的iOS插件,它主要针对的是iOS设备。AppCan是一个跨平台的移动应用开发框架,它允许开发者使用HTML5、CSS3和JavaScript来构建原生的移动应用。而这个...

    appcan-plugin-imagebrowser-android:appcan-plugin-imagebrowser-android

    AppCan 是一款跨平台的移动应用开发框架,允许开发者使用 HTML5、CSS3 和 JavaScript 技术构建原生移动应用。此插件的引入,意味着开发者可以利用原生的 Android 图片浏览功能,同时保持 HTML5 开发的便捷性。 ...

    appcan-plugin-qq-android:appcan-plugin-qq-android

    【appcan-plugin-qq-android】是一个专门为AppCan移动应用开发框架设计的插件,用于集成Android平台上的QQ社交功能。这个插件使得开发者无需深入理解QQ SDK的复杂性,就能在自己的App中轻松添加QQ登录、分享、邀请等...

    appcan-plugin-timemachine-android:appcan-plugin-timemachine-android

    【appcan-plugin-timemachine-android】是一个专门为AppCan平台开发的Android插件,它主要针对的是移动应用的回退功能,允许用户在应用程序中实现类似于时光机的效果,即可以回溯到之前的某个操作状态,这对于某些...

    appcan-plugin-xmlhttpmgr-android:appcan-plugin-xmlhttpmgr-android

    在移动应用开发领域,AppCan作为一款强大的HTML5+Hybrid App开发框架,提供了一系列的插件来增强原生功能,XMLHttpRequestManager就是其中的一个关键组件。这个插件专为Android平台设计,允许开发者在Web端进行网络...

    appcan-plugin-filemgr-android:appcan-plugin-filemgr-android

    AppCan 是一个跨平台的移动应用开发框架,它允许开发者使用 HTML5、JavaScript 和 CSS3 来构建原生的 iOS 和 Android 应用。此插件的目的是扩展 AppCan 的能力,使其能够更方便地处理设备上的文件操作,如读取、写入...

    appcan-plugin-zip-android:appcan-plugin-zip-android

    总之,appcan-plugin-zip-android插件是AppCan开发中的一个重要工具,它简化了Android应用中ZIP文件的操作。开发者可以通过调用提供的API,实现高效且安全的ZIP文件处理功能,满足各种场景的需求。了解和掌握这些...

    Appcan JSSDK-1.1.4-20180416.zip

    **Appcan JSSDK-1.1.4-20180416.zip** 是一个专为Appcan移动应用开发平台提供的JavaScript SDK更新版本,发布于2018年4月16日。这个压缩包包含了最新的JSSDK,用于增强原生移动应用的功能,并简化与Web页面的交互...

    AppCan移动应用在线开发平台

    AppCan移动应用在线开发平台是一款专注于HTML5技术的跨平台开发工具,主要针对Android、iOS、Blackberry、WebOS、Symbian以及Windows Phone等操作系统。该平台以其免费、低门槛和高效的特点,吸引了众多开发者,尤其...

    appcan-plugin-baidumap_old-android:appcan-plugin-baidumap_old-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验证体系, ...

    AppCan移动应用快速开发平台概述

    ### AppCan移动应用快速开发平台概述 #### 一、AppCan平台简介 AppCan移动快速开发平台是一款基于HTML5技术的跨平台快速开发解决方案。它为开发者提供了利用HTML5+CSS3+JavaScript技术来快速创建高质量移动应用的...

Global site tag (gtag.js) - Google Analytics