公司沒有IOS和沒有安卓開發(fā)人員,前端后端都是需要自己玩前幾天技術(shù)經(jīng)理說有一個(gè)需求要把webapp封裝成Hybrid App,現(xiàn)已完成。記錄一下從中遇到的問題和需要用到的開發(fā)環(huán)境的配置
將Webapp封裝成Hybrid App有如下步驟
1.下載安裝1.8的JDK,并且配置環(huán)境變量 (注意:最新版本的cordova,必須要下載1.8的JDK不然會(huì)報(bào)錯(cuò))
2.下載安裝Ant構(gòu)建工具并且配置環(huán)境變量 (注意:Ant目錄不能是中文,不然編譯不成功)
3.下載安裝android并且配置開發(fā)環(huán)境
4.下載安裝Node.js
5.使用npm安裝cordova全局環(huán)境
6.使用cordova創(chuàng)建cordova項(xiàng)目
7.將cordova編譯為android項(xiàng)目
8.安裝.apk文件
9.Eclipse安裝ant插件
10.導(dǎo)入創(chuàng)建好的android項(xiàng)目
11.下載安裝連接第三方模擬器 (注意:這里舍棄了自帶的android模擬器使用第三方的,因?yàn)閍ndroid自帶的模擬器半天才打開,又不支持window系統(tǒng)下載x86)
以下是百度云的鏈接,打包所需要的所有工具、插件、安裝包都在里面
鏈接:http://pan.baidu.com/s/1mhQYD0s 密碼:7x16
在環(huán)境變量新建系統(tǒng)變量 變量名:JAVA_HOME 變量值為:安裝路徑的根目錄即可(C:\Program Files\Java\jdk1.8.0_111)
1. 新建系統(tǒng)變量 變量名:ANT_HOME 變量值為:安裝路徑的根目錄即可(D:\phonegap\apache-ant-1.9.8) 把bin目錄的路徑添加到path里面
添加到path的截圖如下:
完成以上兩點(diǎn)之后打開cmd輸入 java -version 和 ant -version 出現(xiàn)以下如則安裝成功,否則請(qǐng)檢查配置的環(huán)境變量路徑
解壓后的目錄是如下圖:
1.將SDK目錄下的:platform-tools、tools添加到環(huán)境變量的path里面去
2.安裝完成后cmd運(yùn)行adb 如圖則安裝成功,
下載下來的包含有Node.js安裝包直接安裝即可,無需配置環(huán)境
1.運(yùn)行cmd
2..輸入此命令: npm install -g cordova 回車 這里需要等待一段時(shí)間 如以下圖說明安裝成功 因?yàn)槲乙呀?jīng)安裝過了
可運(yùn)行cordova -v 查看是否安裝成功,如圖示 6.4.0版本的cordova 如圖
1.切換到任意路徑 輸入命令:cordova create myapp 回車
2.進(jìn)入項(xiàng)目輸入命令: cd myapp 回車
1.添加安卓平臺(tái)輸入命令:cordova platform add android 回車
添加成功如下:
檢查環(huán)境是否配置好:輸入命令: cordova requirements 回車 出現(xiàn)以下則OK
如果以上都完成了就開始構(gòu)建安卓.apk
輸入命令: cordova build android 回車 如下圖則構(gòu)建成功
此時(shí)此刻你的D:\phonegap\myapp\platforms\android\build\outputs\apk 有一個(gè)apk的文件 到了這里ok說明你已經(jīng)成功了
現(xiàn)在的目錄結(jié)構(gòu)為:
現(xiàn)在將webapp移動(dòng)端項(xiàng)目copy到www目錄下,將原先的文件刪掉,如圖 主程序入口在config.xml配置(后綴不能是.jsp)
打開Eclipse--->Help--->Install New Software---出現(xiàn)以下
Ant插件安裝成功后重啟Eclipse ----->添加SDK所在的目錄
File--->New--->project-->
選擇上面創(chuàng)建好的安卓項(xiàng)目 勾選兩個(gè)就行了 CordovaLib、MainActivity
先下載安裝第三方模擬器(注意:模擬器要打開才能連接成功)
下載安裝完成后運(yùn)行cmd 連接第三方模擬器 輸入命令 adb connect 127.0.0.1:26944 回車 ---》26944是第三方模擬器的端口號(hào)
此時(shí)進(jìn)入Eclipse---》Window---Show View-->Devices則出現(xiàn)以下圖
運(yùn)行MainActivity---》Run As---》Android-Application 出現(xiàn)如下界面 選擇第三方模擬器 OK
模擬器出現(xiàn)如下圖則運(yùn)行成功OK
將apk安裝包發(fā)送到手機(jī)進(jìn)行安裝如下效果:
希
聯(lián)系客服