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