MyException - 我的異常網
當前位置:我的異常網» 移動開發 » AppCan VS PhoneGap - 對照兩大移動開發平臺

cf手游无影:AppCan VS PhoneGap - 對照兩大移動開發平臺

cf手游刷枪永久枪软件 www.yqwdk.icu  網友分享于:2013-02-28  瀏覽:101次
AppCan VS PhoneGap - 對比兩大移動開發平臺

cf手游刷枪永久枪软件 www.yqwdk.icu ?//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應用視頻對比:?
//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("//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插件需要的一些圖片資源。


附件給出兩個安裝包以及兩個網頁包的代碼:?
?點擊此處?

文章評論

軟件開發程序錯誤異常cf手游刷枪永久枪软件Copyright © 2009-2015 MyException 版權所有