1. 程式人生 > >將html檔案打包成apk

將html檔案打包成apk

                  區別

cordova.參考教程

下面詳細介紹下phone gap

PhoneGap是一能夠讓你用普通的web技術編寫出能夠輕鬆呼叫API介面和進入應用商店的HTML5應用開發平臺。

PhoneGap就是一種中介軟體技術,可以通過搭建一個webview來執行網頁程式,並且可以提供呼叫底層API的介面。

#PhoneGap安裝與配置

#安裝與配置

使用NodeJS來管理開發。從下面的網址下載NodeJS。

如圖,NodeJS會判斷作業系統,不同系統INSTALL按鈕指向的連結也不同。

1.png

從windows開始選單選擇“Node.js command prompt”應用,並執行。會開啟一個命令列工具,這將自動設定npm管理器環境。

 鍵入  npm install phone gap
回車執行後會自動下載最新版本的PhoneGap,過段時間即可安裝完成。安裝完成後,可在下面的位置看到phonegap資料夾,說明下載安裝完成。
C:\Users\使用者名稱\AppData\Roaming\npm\node_modules\

##建立PhoneGap for Android開發和測試環境

要為Android開發原生應用程式,以前一般會使用Eclipce這個IDE,並且在上面安裝專門用於android開發的外掛:ADT。

同時進行android應用程式開發需要Android SDK 支援。

adt,sdk可以在下面的網站下載(需要翻牆)

##android studio更強大,更方便,省去了adt 這一步

http://developer.android.com/sdk

###安裝ANT和配置環境

PhoneGap需要Apache Ant來編譯工程,因此需要裝Apache Ant,可以從下面的網址下載:

http://ant.apache.org/bindownload.cgi

下載的ANT僅僅是個壓縮包,只需解壓到一個目錄就行。我將之解壓到(D:\Application\Android\ant)目錄下,然後還要配置環境變數ANT_HOME指向這個檔案位置。

cordova下載ant同樣

為了在命令列中方便使用ant命令,我們可以將ant的bin路徑新增到PATH變數中。

;%ANT_HOME%\bin

這裡的%ANT_HOME%實際上是使用前面定義的ANT_HOME環境變數。

###配置Android環境

此外,還要配置Android環境變數。新增ANDROID_HOME環境變數,指向SDK目錄(D:\Application\Android\sdk),然後新增到PATH中。

;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

##建立PhoneGap工程

下面我們使用PhoneGap來建立一個工程。使用管理員身份開啟一個命令列視窗(cmd),使用cd命令進入一個目錄,將會在該目錄建立工程。

使用PhoneGap create命令建立工程,命令如下:

phonegap create <工程路徑> <包名> <工程名>

例如:

phonegap create helloapp  "HelloWorld"

執行後在目錄下找到PhoneGap工程,如圖:

###為PhoneGap工程新增Android平臺

PhoneGap工程建立完成後還不知道要在哪種平臺上開發和部署程式,可選的平臺有很多,如Android,IOS,WP8,blackberry10等等。如果你要新增哪個平臺,就必須事先新增這個平臺的SDK。現在建立Android平臺。

首先cd進入PhoneGap工程目錄

cd kypapp(目錄名)

然後呼叫下面命令新增Android平臺。

phonegap build android

並且在F:\kypapp\platforms目錄下,將可以看到配置好的Android資料夾。

##使用ADT進行PhoneGap開發

啟動Eclipse。(後面講android studio)

初次啟動需要指定Android SDK的目錄。單機“Browser…”按鈕導航到D:\Application\Android\sdk目錄。

點選OK後就可以進入開發環境了。

  • 步驟1 在主選單上選擇“File > New > Project”選單欄,開啟就能看到Android相關工程 
  • 步驟2 選擇“Android Project from Existing Code”目錄,點選Next 
  • 步驟3 點選“Browser…”按鈕,導航到F:\kypapp\platforms\android目錄(剛剛用PhoneGap新增的Android平臺目錄),將會在下面建立兩個工程。 
  • 步驟4 右擊HelloWorld主目錄,選擇“Properties > Resource Filters”,刪除“Exclude all:”下面的兩條資訊(選中,點選右側Remove),然後點選OK。 會發現assets底下多了個www資料夾啦。然後res下面的www資料夾可以刪掉了。
  • 還有就是html文件放這裡

 刪除或註釋掉下面一行程式碼:

loadUrl(launchUrl);

替換為下面這行程式碼:

super.loadUrl("file:///android_asset/www/index.html");
##用android studio 操作差不多,初次啟動時會讓下載idk,好像是的,裝很久了,記得不是很清楚 (完成cordova,node.js安裝前提下) installgrade #module 是這樣的

html檔案位置如圖


##配置版本資訊
開啟gen根目錄

配置相關資訊,主要是project

上述操作完成後,在Terminal欄中鍵入


cordova build android


一系列編譯後


鍵入
cordova build android-- --ant--release


完成