為什么要寫一個App
首先解釋下寫出來的這個App，其實無任何功能，只是用HTML和CSS模仿JD移動端界面寫的一個適配移動端的Web界面。本篇主要內容是介紹如何使用PhoneGap把開發出來的mobile web app快速打包成Native App。最近還在學習HTML&CSS以及Javascript，偶然想想學這些有什么用，一方面可以做Web系統的前端開發，另一方面也可以做移動端的Web App。剛好最近了解到PhoneGap，研究了一下它的框架平台，花了兩個晚上終於把一個web系統變成了一個移動終端App。如果是做外包項目或者簡單應用App，感覺用PhoneGap還是可以，能夠使用一套Web代碼快速的實現多個平台App。例如IOS、Android、Windows Phone、WebOS等等。
先介紹代碼
要讓我們的web代碼能夠打包成Native App。首先必須要有一個index.html頁面，並且需要添加一些額外代碼。在header上需要添加一個name為viewport的meta節點。代碼如下：
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
viewport用來初始化視窗參數，這些參數包括應用內容在多大的屏幕上顯示以及內容的縮放級別等等。initial-scale指定加載的內容按多大的縮放比例顯示，上面initial-scale為1表示應用內容按100%顯示。maximum-scale、minimum-scale控制縮放的最大最小比例。userscalable屬性控制用戶是否允許控制scale和zoom，就如使用兩個手指縮放內容。
接下來需要在body結尾之前添加一段js引用代碼，代碼如下：
<script type="text/javascript" src="cordova.js"></script>
cordova是PhoneGap的js庫，提供了一套接口，用來訪問本地設備的硬件操作。例如可以操作攝像機、聯系人、GPS等。cordova引入之后還得在body結尾之前添加一段js代碼，用來初始化app。代碼如下：
<script type="text/javascript"> app.initialize(); </script>
app.initialize()是自定義的一個方法。app是一個全局對象，app對象實現如下：
var app = { // 應用構造函數 initialize: function() { this.bindEvents(); }, // 綁定事件監聽 // // 綁定任何事件需要在啟動時綁定 // '之間包括：load', 'deviceready', 'offline', and 'online'. bindEvents: function() { document.addEventListener('deviceready', this.onDeviceReady, false); }, // deviceready事件 onDeviceReady: function() { app.receivedEvent('deviceready'); }, //deviceready綁定的具體事件 receivedEvent: function(id) { changeElementOpacityByScroll($(".jd-search-cover")); }, //改變元素透明度 changeElementOpacityByScroll:function(ele){ $(window).bind("scroll", function(event){ //所有內容的高度 var scrollTotalHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) //已被滾動的高度 var winScrollHeight = Math.max(document.body.scrollTop, document.documentElement.scrollTop); var ratio = winScrollHeight / scrollTotalHeight; var opacity; //元素透明度變化，是在滾動條位置占比在0-20%的范圍內。 if(ratio > 0.2){ opacity = .8; }else if(ratio <= 0){ opacity = 0; }else { // 20% * 4 = 。8正好是透明度的最大值 opacity = ratio * 4.0; } if(opacity){ $(ele).css("opacity", opacity); } }) } };
上段代碼表示在應用啟動時注冊deviceready事件，上面代碼的核心也是deviceready事件，它是cordova提供的一個事件。這個事件標明cordova的設備API已經加載完成，我們可以使用cordova的API操作設備。然后在deviceready事件中添加加載完成的初始化代碼，相當於頁面的onload事件。
最后附上index.html頁面的主要代碼，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 添加viewportmeta標簽元素 --> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" /> <title>專業網上購物平台品質保障！ - 京東商城</title> <link rel="stylesheet" type="text/css" href="css/base.css"> <link rel="stylesheet" type="text/css" href="css/index.css"> <link rel="stylesheet" type="text/css" href="css/themes/default/jquery.mobile-1.4.5.min.css"> </head> <body> <section data-role="page" id="main"> <section class="jd-section"> <header class="section-wrapper"> <div class="header-home-wrapper "> <div class="jd-search-cover"></div> <div class="js-search-icon"> <span class="jd-search-icon-logo"> <i class="jd-icon"></i> </span> </div> <form class="jd-search-form"> <div class="jd-search-form-box"> <span class="jd-search-form-icon jd-sprite-icon"></span> <div class="js-search-form-input"> <input type="text" placeholder="夏日暢飲，可口可樂滿99減50"/> </div> </div> </form> <div class="jd-login-icon"> <a href="#"><span>登錄</span></a> </div> </div> <div> <img style="width: 100%;" src="images/adv.jpg"> </div> </header> <article class="section-wrapper"> <div class="ui-grid-c"> <div class="ui-block-a"> <div class="jd-nav-item"> <div> <img src="images/chaoshi.png"> </div> <div style="text-align: center;"> <span>京東超市</span> </div> </div> </div> <div class="ui-block-b"> <div class="jd-nav-item"> <div> <img src="images/jinkou.png"> </div> <div style="text-align: center;"> <span>全球購</span> </div> </div> </div> <div class="ui-block-c"> <div class="jd-nav-item"> <div> <img src="images/chongzhi.png"> </div> <div style="text-align: center;"> <span>充值中心</span> </div> </div> </div> <div class="ui-block-d"> <div class="jd-nav-item"> <div> <img src="images/shishang.png"> </div> <div style="text-align: center;"> <span>服裝城</span> </div> </div> </div> <div class="ui-block-a"> <div class="jd-nav-item"> <div> <img src="images/licai.png"> </div> <div style="text-align: center;"> <span>理財</span> </div> </div> </div> <div class="ui-block-b"> <div class="jd-nav-item"> <div> <img src="images/juan.png"> </div> <div style="text-align: center;"> <span>領卷</span> </div> </div> </div> <div class="ui-block-c"> <div class="jd-nav-item"> <div> <img src="images/wuliu.png"> </div> <div style="text-align: center;"> <span>物流查詢</span> </div> </div> </div> <div class="ui-block-d"> <div class="jd-nav-item"> <div> <img src="images/guanzhu.png"> </div> <div style="text-align: center;"> <span>關注</span> </div> </div> </div> </div> </article> ...省略了其他代碼 <footer class="bottom-bar-panel" data-role="footer" data-position="fixed"> <ul class="horizontal-ul"> <li class="column-5"> <a class="nav-bottom-link" href="#main"> <img src="images/navigate/main.png"> </a> </li> <li class="column-5"> <a class="nav-bottom-link" href="#main"> <img src="images/navigate/category.png"> </a> </li> <li class="column-5"> <a class="nav-bottom-link" href="#main"> <img src="images/navigate/find.png"> </a> </li> <li class="column-5"> <a class="nav-bottom-link" href="#main"> <img src="images/navigate/shoppingCart.png"> </a> </li> <li class="column-5"> <a class="nav-bottom-link" href="#main"> <img src="images/navigate/myself.png"> </a> </li> </ul> </footer> </section> </section> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/jd.js"></script> <script type="text/javascript"> app.initialize(); </script> </body> </html>
需要准備哪些軟件
前端開發：NodeJs（使用版本v4.4.2）、Git（使用版本2.7.2）、WebStorm（使用版本11.0.3）。
android環境：Java SDK（使用版本jdk-8u91）、android studio（使用版本143.2821654）。
框架平台：PhoneGap（使用 版本0.3.3）、PhoneGap Developer App（移動端手機App，用於手機端調試）、Cordova（命令行工具）。
PhoneGap介紹
首先，PhoneGap是一個平台，它能夠讓一個開發人員開發出能夠運行在不同平台的移動端設備上的App。開發人員只需要熟悉HTML、CSS、Javascript技術。PhoneGap平台可以把開發人員寫的HTML、CSS和Javscript文件打包部署到各種移動端App（例如IOS、Android等等）。但使用Web端技術實現的App是沒有權限直接訪問設備上的文件系統和攝像頭等，PhoneGap有一套Bridge機制可以讓Javscript運行在WebView上去調用本地代碼，從而實現本地操作。也就相當於PhoneGap為我們提供了一套本地操作的接口，這套操作接口的JS庫就是Cordova。接口包括操作攝像頭、聯系人、文件系統、音視頻播放、錄像、網絡訪問等。
如果有些本地功能PhoneGap沒有實現怎么辦？PhoneGap也支持插件模式，開發人員可以自己實現某些功能，然后通過插件形式附加到PhoneGap項目中。但需要說明的是，插件都是基於Native開發的，例如Android或者IOS平台。所以要添加插件，開發人員不得不熟悉Native（例如Android或者IOS）開發。
搭建過程
這里主要介紹PhoneGap的搭建過程。像NodeJs、Git、WebStorm的安裝這里我們不再做介紹了。NodeJs為我們提供了命令行工具，我們可通過npm下載各種js庫。Git用於代碼管理。WebStorm是一個Web開發的IDE工具。
第一步，安裝客戶端
首先我得下載一個PhoneGap桌面客戶端，PhoneGap官網上為我們提供了IOS和Window系統的下載鏈接。由於我們在Windows 10系統上開發，所以我需要下載Windows版本的客戶端，下載地址鏈接請點擊Windows Installer。安裝的過程直接點下一步知道完成即可。打開PhoneGap客戶端，可看到主界面如下所示：
第二步，安裝移動端調試App
PhoneGap提供了各個平台的調試App，我們可以直接通過這些App來查看和調試我們的程序，而不需要安裝各個平台的SDK。下載鏈接：
由於Google在國內被封，所以不怎么好下載。這里我提供雲盤上的下載地址，密碼為k2cy。
下載安裝后，可看到如下界面：
第三步，創建PhoneGap項目
點擊PhoneGap客戶端左欄的“+”號，然后選擇Create new PhoneGap project…。界面如下：
創建一個新的項目需要我們填寫一些參數，界面如下：
Local Path選擇我們項目創建的路徑，Name為項目名稱（例如FirstApp），Id為項目命名空間（例如hi.mobile.firstapp，和java的包名有點相似）。參數填寫完之后，點擊“Create project”創建項目。
項目創建后，我們到代碼目錄去查看一下生成的代碼，可看到有這幾個文件夾：
對於這幾個文件夾，目前我們只用關系www，通過文件夾名稱就可看出和web相關。打開文件夾，查看到的目錄結構如下：
www下的目錄結構和我們經常創建的web項目目錄很相似。沒錯，這個目錄正是用於存放我們自己寫的web項目，所以我們可以把原有的這些文件全部刪掉，然后直接把我們寫的web代碼拷貝到這個目錄下。如果想讓代碼能夠跑起來，我們還得修改index.html界面內容，具體怎么修改請查看前面“先代碼介紹”部分。
第四步，使用Cordova調試項目
項目搭建完之后，我們需要調試代碼。調試代碼依賴於cordova命令行工具，需要使用npm下載cordova。打開node.js命令行工具，執行以下命令：
npm install -g cordova
可能需要等待一段時間，請耐心。cordova安裝完后，我們就可以調試代碼。如何調試代碼？首先我們需要在PhoneGap客戶端主界面啟動Web服務，在下面的界面中我們通過點擊”>”圖標啟動服務。
服務啟動后主界面底部能夠看到”Server is running on http://192.168.1.*:3000”提示，表示服務已經啟動成功。既然是一個http地址，那么也可以直接在瀏覽器上訪問。打開chrome瀏覽器，輸入上面的http地址，項目運行如下：
運行結果是不是和京東首頁很想，但只是一些html和css效果。接下來我們還需要在手機端查看運行情況。這里就得提到之前安裝的移動終端調試app程序，打開手機上的PhoneGap app，運行界面如下：
在地址欄中輸入PhoneGap PC客戶端啟動的服務地址，然后點擊“Connect”，app會提示“succes”。表示鏈接服務成功，接下來就可以看到手機上代碼運行效果。界面如下：
到目前為止，我們能夠在pc端和手機端調試我們的項目了。接下來的工作就是敲代碼、調試、敲代碼、調試，直到開發完成。項目開發完成之后，就得考慮如何把項目打包成app。
第五步，打包項目為Android App
其實打包的過程比較簡單，直接使用cordova執行幾條命令即可打包，麻煩的是需要安裝android環境。在“需要准備哪些軟件”中有說到android環境，包括java sdk和android studio。其實應該是java sdk和anroid sdk，但android sdk下載比較麻煩，我們可以直接安裝一個android studio，它本身也包含了android sdk。
java sdk和android studio的安裝都比較簡單，基本上都是直接下一步下一步。安裝完成之后需要配置環境變量。包括：
（1）JAVA_HOME:指向java sdk安裝目錄
（2）ANDROID_HOME：指向android sdk的安裝目錄。默認安裝目錄為X:\Users\PC登錄名\AppData\Local\Android\sdk。
（3）在系統變量PATH中添加兩個路徑：
X:\Users\PC登錄名\AppData\Local\Android\sdk\platform-tools
X:\Users\PC登錄名\AppData\Local\Android\sdk\tools
android環境配置完成后需要在PhoneGap項目中添加android平台。打開NodeJs命令行工具把路徑切換到我們PhoneGap項目目錄下。然后執行命令：
$ cordova platform add android #ios命令為cordova platform add ios
上面的命令執行的時間比較長，執行過程中根據打印的日志可以看到下載了很多jar包，其實就是下載android app的依賴環境。命令執行完成后，PhoneGap項目目錄下的platform文件夾下多了一個android文件夾，android目錄結構如下：
現在PhoneGap項目中android平台已經添加了，接着就可以直接把項目build成一個android版本app。執行如下命令:
$ cordova build android
上面的命令執行完后，打開platforms\android\build\outputs\apk目錄，看到生成一個叫做android-debug.apk，這個就是我們最終build成的android應用安裝包。如下圖所示：
另外，也可通過下面的命令使用andoroid模擬器調試應用。命令如下：
$ cordova emulate android
剩下的操作就是把構建成的apk安裝包在手機上安裝，安裝完后就可以像其他app一樣正常使用。
附上參考網站
（1）PhoneGap官網的Get Started：http://phonegap.com/getstarted/
（2）比較全面的介紹如何搭建PhoneGap項目：https://www.smashingmagazine.com/2014/02/four-ways-to-build-a-mobile-app-part3-phonegap/
（3）怎么把我們的代碼變成PhoneGap能執行的代碼：http://docs.phonegap.com/develop/hello-world-explained/
（4）Android平台環境部署：http://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html
另外，代碼我放到了Github上，用來做測試的可去下載：
https://github.com/heavis/PhoneGap.git
如果本篇內容對大家有幫助，請點擊頁面右下角的關注。如果覺得不好，也歡迎拍磚。你們的評價就是博主的動力！下篇內容，敬請期待！