AppCan VS PhoneGap - 對比兩大移動開發平臺

時間 2019-11-07

原文原文鏈接

要說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中自帶的模擬器查看效果：

<!--塊容器開始-->
<div class="ub ub-ver uba  uc-a1 t-wh ">   
    <div class="ubb b-gra  c-m1 uinn uc-t1">
        <!--按鈕開始-->
        <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>
        <!--按鈕結束-->
    </div>
    <div class="ubb b-gra  c-m1 uinn ">
        <!--按鈕開始-->
        <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>
        <!--按鈕結束-->
    </div>   
</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的相似代碼（文字內容部分刪掉了）：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Multi-page template</title>
    <link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>
</head>

   
<body>

<!-- Start of first page: #one -->
<div data-role="page" id="one" >

    <div data-role="header">
        <h1>Multi-page</h1>
    </div><!-- /header -->

    <div data-role="content" >   
        <h2>Page One</h2>
        <p><a href="#two" data-role="button" data-transition="slide">加載page "two"</a></p>   
        <p><a href="#three" data-role="button" data-transition="slide">加載page "three"</a></p>   
    </div><!-- /content -->
   
    <div data-role="footer" data-theme="d" data-position="fixed">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page one -->


<!-- Start of second page: #two -->
<div data-role="page" id="two" data-theme="a">

    <div data-role="header" data-position="fixed">
        <h1>Two</h1>
        <a href="#one" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
    </div><!-- /header -->

    <div data-role="content" data-theme="a">   
        <h2>Hybrid app</h2>
</div><!-- /content -->
   
    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page two -->

<!-- Start of three page: #three -->
<div data-role="page" id="three" data-theme="a">

    <div data-role="header" data-position="fixed">
        <h1>three</h1>
        <a href="#one" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
    </div><!-- /header -->

    <div data-role="content" data-theme="a">   
        <h2>異步加載網絡數據</h2>
        <a href="javascript:void(0)" onclick="getdata()" data-role="button" data-mini="true">Ajax get Data</a>
        <ul data-role="listview" data-inset="true" data-theme="b" data-dividertheme="f">
                <li data-role="list-divider">時間</li>
                <li id="bt">請求開始時間：</li>
                <li id="et">請求結束時間：</li>
            </ul>
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
                <li data-role="list-divider" id="title"></li>
                <div id="content"></div>
            </ul>
    </div><!-- /content -->
    <script>
        function getdata(){
            var d = new Date().getTime();
            document.getElementById("bt").innerHTML = "請求開始時間："+d;
            $.getJSON("http://te.3g2win.com/case/?jsoncallback=?",function(data){
                var e = new Date().getTime();
                document.getElementById("et").innerHTML = "請求結束時間："+e;
                document.getElementById("title").innerHTML = data.title;
                document.getElementById("content").innerHTML = data.content;
            });
        }
    </script>
    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page three -->

</body>
</html>

phonegap打成安裝包

把寫好的網頁包放到android原生開發環境下，經過android原生環境生成安裝包的方式生成：

對比javascript

經過這個小demo，咱們總結下phonegap和appcan的異同點。 php

相同點：

都是用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插件須要的一些圖片資源。

附件給出兩個安裝包以及兩個網頁包的代碼:

點擊此處