1. 程式人生 > >小白心得:將編好的網頁封裝成APP

小白心得:將編好的網頁封裝成APP

如何將寫好的HTML頁面封裝成APP以及如何在虛擬模擬器上開啟。

由於博主也是一個徘徊在APP開發門外的一名路人,這篇部落格僅供小白參考(文章太過粗糙,僅僅是參考)。

要知道,目前市場上有很多APP是採用H5編寫的介面,或許是因為原生開發對於前端的靈活性並不是那麼符合目前市場上的需求,因此在這裡介紹如何使用Apache Cordova和Ant將網頁封裝成Android APP。在使用Cordova之前,我們需要安裝一下四項工具:

  1. NodeJS
  2. JAVA的JDK
  3. Android的SDK
  4. Apache Ant

JDK和SDK的安裝這裡不再贅述,不知道的同學自行百度。

    進入網頁後,點選zip的連結進行下載,版本選擇最新的即可。

    Ant不需要安裝,下載解壓即可。

設定使用者變數

JDK、SDK、Ant都準備好之後,必須在系統環境變數中指定工具路徑。右鍵 計算機----屬性----高階系統設定----環境變數

    在系統變數區單擊“新建”按鈕。

    在“變數名”輸入JAVA_HOME(變數名可自己定義),在“變數值”中輸入你電腦上的JDK的存放路徑。博主的路徑如下:

    確定之後,再次點選新建,設定SDK的變數。 在“變數名”輸入ANDROID_SDK(變數名可自己定義),在“變數值”中輸入你電腦上的SDK的存放路徑。博主的路徑如下:

    接下來是設定Apache Ant的使用者變數。

    三個變數新建完成之後,還要設定Path變數的變數值。

    在Path中的變數值輸入如下4個路徑,每個路徑變數之間以英文分號 ; 隔開。(新變數與原來的變數直接同樣要以分號隔開)

  •  %JAVA_HOME%\bin\
  • %ANT_HOME%\bin\
  • %ANDROID_SDK%\tools\
  • %ANDROID_SDK%\platform-tools\       

三個必要工具安裝完成以後,開啟命令提示符視窗(cmd),檢查工具是否安裝成功。測試命令分別是:    

  • java -version
  • ant -version
  • adb version    (此處沒有間隔符-)

如果三個工具安裝成功,會分別顯示版本資訊,如果某一項沒有安裝成功,命令列會顯示“不是內部或外部命令,也不是可執行的程式或批處理檔案”。如果是找不到命令,大多數是因為你的變數設定路徑的時候不正確。檢視一下是否路徑寫錯或者遺漏。

通過npm安裝Cordova

    在此之前我們還要先安裝NodeJS,下載地址:http://nodejs.org 開啟官網之後單擊install,下載並安裝NodeJS。安裝完成之後,就可以使用npm命令去安裝Cordova。開啟CMD視窗(避免安裝出現錯誤,建議以管理員身份開啟CMD,右鍵cmd----以管理員身份執行)。輸入下列語法安裝Cordova

npm install -g cordova

    NodeJS安裝完成時會自動增加環境變數,如果上述命令無法執行,檢查一下你的Path變數中有沒有自動新增進去。

Cordova安裝完成之後,開啟AVD Manager新建安卓模擬器

AVD Manger應用程式一般在SDK目錄下可以找到,找不到的同學(比如博主的SDK目錄就是沒有AVD Manager),可以從AndroidStudio裡面直接點選開啟。如下圖紅圈所示:

    開啟之後新建模擬器,新建完成之後可以點選右邊的啟動按鈕即可啟動模擬器了。但是我們現在還不需要啟動,因為我們接下來要將自己寫的網頁包裝成apk

將網頁轉換成Android App

    Android的軟體安裝檔案必須是apk檔案,只要將apk檔案匯入模擬器,就可在模擬器上安裝你的app。那麼我們先要得到apk檔案。

    (a)建立專案。開啟cmd,輸入如下命令:

cordova create hello com.example.hello HelloWorld

輸入這個建立命令之前,需要進入某個碟符如D盤,再輸入上面的命令,那麼將會在D盤自動生成一個HelloWorld專案。create後面的三個引數,分別對應的是資料夾名稱(hello)、App id(com.example.hello) 、app名稱(HelloWorld)。建立完以後,開啟D盤的hello資料夾,會有如下幾個子目錄,其中www就是放置你自己網頁的資料夾。如圖:

    (b)新增Android平臺(首先在cmd進入專案資料夾,即hello資料夾)進入之後輸入如下命令:

cordova platform add android

    (c)建立APP,生成apk檔案。(還是在專案資料夾輸入如下命令):

cordova run android

命令執行之後,我們可以在如下路徑找到你自己的app安裝包,即apk檔案 

D:\hello\platforms\android\app\build\outputs\apk\debug

                    首先開啟安卓模擬器(必須要先開啟)

                   cmd命令列進入sdk資料夾的platform-tools資料夾下(目的是要找到此目錄下的adb.exe)

                    然後執行安裝apk檔案的命令:adb install apk檔案路徑和地址

                    比如博主剛才的apk檔案位置是在D:\hello\platforms\android\app\build\outputs\apk\debug

                    那麼安裝命令就是:

adb install D:\hello\platforms\android\app\build\outputs\apk\debug\app-debug.apk

                    最後面是你的apk檔案(如下圖所示,專案資料夾名字有變化,是另外一個專案)

    

                    出現success即為成功,在你的模擬器上便出現了一個新的app