網頁打包安卓APP流程

時間 2019-11-11

標籤網頁打包 app 流程欄目 HTML 简体版

原文原文鏈接

搭建環境過程：javascript

1. 安裝JDK。html

參見http://www.cnblogs.com/Li-Cheng/p/4334985.html。java

注：實質上到該網址上下載好JDK安裝包，安裝後添加一個環境變量：node

JAVA_HOME,其值爲：C:\Program Files\Java\jdk1.8.0_73（因爲安裝路徑不一樣，從路徑下複製便可），而後在PATH變量中添加一個：android

%JAVA_HOME%\bin;ios

必定要記得在Path中添加的全部路徑都要以;隔開，否則可能會影響系統運行。chrome

2. 安裝Android SDKapache

直接下載地址：npm

http://dl.google.com/android/android-sdk_r24.4.1-windows.zipjson

頁面：

http://www.android-studio.org/

下載完成後解壓，放置到一個非中文路徑下。

而後開始建環境變量:

ANDROID_HOME=E:\selfuse\geapp\androidsdk

在path中添加：

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

添加完成後並無結束，下面纔是比較關鍵的：

打開SDK Manager.exe，若是鏈接google失敗，下載的目錄中只有幾個，須要在工具欄中的tools下的options，添加國內的鏡像下載點：

mirrors.neusoft.edu.cn，端口80。打勾的選項參見下圖。點擊close後就會刷新出咱們須要下載的內容。

主要須要下載的內容包括：tools選項下的全部項（實際上只下載API19以上的任意一個便可，但考慮到要和安卓6.0兼容，咱們能夠下載版本比較新一些的。建議所有下載下來）、安卓6.0下全部文件（其餘版本可下可不下）、extra下的全部文件（建議全下，實際上只須要圖示中三個，其餘haxm之類的是用於電腦端模擬安卓的）。

3. 使用nodejs和npm包。

https://nodejs.org/en/download/下載下面兩個中的一個便可，放於一個路徑下，並在path中添加一個路徑如：E:\selfuse\nodejs，而後去下載個npm包（解壓後路徑以下），這兩個包比較小，我直接就放一塊兒了。

測試是不是全局，打開 cmd，輸入 node –v，測試Npm則用 npm –v。

4. 安裝npm的包cordova

Cmd命令中運行npm install -g cordova

此時，咱們就有全局的命令。後續命令操做所有在cmd中進行

5. 建立應用

Cmd中使用 cd e:\test\

而後 e:

這樣咱們就進入了一新用於建立應用的路徑下。在該路徑下運行

cordova create hello com.example.hello HelloWorld

create後面的三個是能夠隨便寫的，其中第一個是建立的文件夾名稱，不能爲中文，第二個是應用的一個連接，也不能爲中文，第三個是咱們要安裝後顯示的應用名稱，能夠爲中文。

執行該命令成功後，咱們用cd命令進行建立的應用

Cd hello

進入了 e:\test\hello

下面全部的命令均在該路徑下執行。

添加一個安卓應用 :

cordova platform add android

添加咱們須要的插件：

cordova plugin add phonegap-plugin-barcodescanner

後面示例中使用了

cordova plugin add cordova-plugin-camera

cordova plugin add cordova-plugin-geolocation

cordova plugin add cordova-plugin-dialogs

cordova plugin add cordova-plugin-splashscreen

cordova plugin add cordova-plugin-device

這個後面插件具體可到官網上查看，也可從附件中text中複製

http://cordova.apache.org/plugins/

添加完成插件後，咱們能夠看到一個路徑：

其中platforms保存了android應用，裏面內容可後續在其餘軟件編輯。

www中用於存放咱們構建的網頁，使用build命令後會在andriod中自動複製相關文件，不要直接修改platforms\android\assets\www下的網頁，在使用build命令後會把android下的文件覆蓋掉，修改也無效。

將網頁全部的文件放在www文件夾下，而後修改config.xml文件。

其文件代碼以下：

<?xml version='1.0' encoding='utf-8'?>

<name>攝像頭示例</name>

只在Play商店中使用

</description>

做者信息

</author>

<allow-intent href="http://*/*" />

<allow-intent href="https://*/*" />

<allow-intent href="tel:*" />

<allow-intent href="sms:*" />

<allow-intent href="mailto:*" />

<allow-intent href="geo:*" />

<allow-intent href="market:*" />

</platform>

<allow-intent href="itms:*" />

<allow-intent href="itms-apps:*" />

</platform>

</widget>

文件中黃色體部分是須要修改的。Name標籤表示咱們創建的app名字,description是app描述，在Play商店中才會顯示,author是做者信息，也只會在商店中顯示，content表示咱們打開app跳轉的第一個頁面，可進行修改。Icon表示咱們app顯示的圖標。這裏面的路徑是工程下的文件夾路徑，爲添加圖片可創建一個文件夾res，放置須要的圖片（我偷懶了，就用了一個圖標）。圖標可根據屏幕密度不一樣選擇多個，設置的方式則變爲：

Preference標籤中定義了日誌等級，最小SDK版本、最大SDK版本和指定的SDK版本。14表示安卓4.0版本，23表示安卓6.0版本，這一部分不設置則會有一個默認的值，也可不添加。

7.下面就是插件的使用及應用構建

插件的使用以二維碼爲例吧，因爲bacodescanner比較特殊，須要單獨引入js文件，因此咱們先將barcodescanner.js複製到咱們www文件夾下。

路徑下取出插件的js文件放置到咱們www文件夾下。

在構建的網頁中引用兩個文件：

而後在body裏面添加

調用二維碼控件：

function inputScan(){

cordova.plugins.barcodeScanner.scan(

function (result) {

alert("We got a barcode\n" +

"Result: " + result.text + "\n" +

"Format: " + result.format + "\n" +

"Cancelled: " + result.cancelled);

function (error) {

alert("Scanning failed: " + error);

}

);

}

還有一點要注意的是：生成的示例的文件中第一個Meta要去掉，由於它禁了網頁內編寫js，咱們這樣寫就會失效，若是是單獨的Js文件是不影響的。

最後一步終於來了：

使用 cordova build android --release命令來生成apk文件。若是沒有報錯的話就會在

platforms\android\build\outputs\apk

生成一個帶簽名，一個不帶簽名的文件。這樣咱們就生成了一個apk文件。基本上完成了。

若是是第一次打包，npm會自動下載gradle打包工具，也能夠本身下載好配置一下全局變量，我就偷懶了，直接讓它本身下載了。這個下載過程比較長，得耐心等待。

注意：若是不帶有—release命令則生成的是debug版本的。正式版本是須要key的，可能使用ecsllape生成一個，在項目目錄下添加了一個build.json，其內容以下：

{
"android": {
"debug": {
"keystore": "./mykey.keystore",
"storePassword": "www.dd.com",
"alias": "dd.com",
"password" : "www.dd.com",
"keystoreType": ""
},
"release": {
"keystore": "./mykey.keystore",
"storePassword": "www.dd.com",
"alias": "dd.com",
"password" : "www.dd.com",
"keystoreType": ""
}
}
}