Android開發學習--Ionic+Cordova 環境搭建

標籤：get   sdn   cto   www   trap   rect   min   rms   git   

 我們看 Ionic 能給我們提供什麼?  一個樣式庫，你可以使用它 來 裝飾你的 HTML 網頁 ，看起來 想 移動程式的 介面，什麼 header 、content、footer、grid、list。這貌似沒什麼 實質性的東西， sencha touch ，jq 都能提供 。一個用 AngularJS 寫的 工具庫，姑且叫它 組件庫吧。Ionic的 grid 設計的比較合理，比 bootstrap的 更強大。當然它 還包含 了angular-animate、angular-resource、angular-sanitize、angular-ui-router，適應移動平台的模組庫。 Apache Cordova 提供用 javascript 訪問 移動平台  的 API 。其內部是用每個 平台下的  web view 組件，運行 程式，然後實現了 每個平台下的 一套 CordovaLib  供你寫的程式調用，然後你就可以 調用 網路攝影機、磁碟等的api。 1. 安裝node環境nodeJs環境的安裝很簡單，去官網下載最新版的NodeJs直接安裝即可。Node官網： https://nodejs.org/安裝完成後配置環境變數,電腦->屬性->進階系統設定->環境變數->使用者變數->(選中PATH變數)->編輯->在變數值後加入node路徑,與其他變數值用;隔開配置完成後在cmd中輸入 npm -v 斷行符號。如果出現版本號碼說明安裝成功。(未成功自行百度配置node環境) 2. 安裝jdk並且配置環境變數jdk：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html安裝完成以後配置環境變數：JAVA_HOME（安裝路徑有空格會無效）(系統變數):JDK的安裝路徑，這個環境變數本身不存在，需要建立，其值為：jdk在你電腦上的安裝路徑。PATH(系統變數)：PATH屬性已存在，可直接編輯。作用是用於配置路徑，簡化命令的輸入，其值為：%JAVA_HOME%\bin。　CLASSPATH（系統變數）：　用於編譯時間JAVA類的路徑，注意這裡設定的是兩個值，(.;)表示的是JVM先搜尋目前的目錄。其值為：.;%JAVA_HOME%\lib\tools.jar。配置完畢後，通過cmd運行以下命令：java -version， 如果出現返回資訊，則設定成功。 3. 安裝Android SDK.1： http://developer.android.com/sdk/index.html 這個地址被牆了。需要FQ使用。2：http://www.android-studio.org/　　這是Android studio中文社區地址這裡可以只下載Android SDK 不需要一併下載 Android Studio。下載完成並安裝然後向使用者變數Path中添加兩個值。分別是 Android SDK中tools目錄的路徑和platform-tools的路徑。例如：C:\Program Files (x86)\Android\android-sdk\tools;C:\Program Files (x86)\Android\android-sdk\platform-tools;如果發現Android SDK安裝目錄中並沒有 “ platform-tools”這個檔案夾，應該運行tools目錄下的android.bat檔案，然後出現如下介面，勾選Android SDK Platform-tools 然後安裝。環境變數配置完成以後在cmd中輸入 android並且斷行符號。如果出現android sdk manager則說明安裝成功。 4. 安裝 Apache ant.ant： http://ant.apache.org/bindownload.cgi環境變數：Windows下ANT用到的環境變數主要有2個： ANT_HOME 和 PATH。eg：1. 設定ANT_HOME指向ant的安裝目錄(系統變數)。設定方法：ANT_HOME = D:\dev\apache-ant-1.9.6-bin\apache-ant-1.9.62. 設定bin和lib目錄到PATH變數中(使用者變數)。將%ANT_HOME%\bin; %ANT_HOME%\lib添加到x變數的path中。設定方法：PATH = %ANT_HOME%\bin; %ANT_HOME%\lib安裝如果不成功可以把%ANT_HOME%換成真實的路徑。如:     D:\dev\apache-ant-1.9.6-bin\apache-ant-1.9.6\bin;D:\dev\apache-ant-1.9.6-bin\apache-ant-1.9.6\lib安裝完成以後在cmd中輸入 ant -version 驗證是否安裝成功。 5.使用npm下載ionicC:\Users\lemon>npm install -g ionicC:\Users\lemon\AppData\Roaming\npm\ionic -> C:\Users\lemon\AppData\Roaming\npm\node_modules\ionic\bin\ionicC:\Users\lemon\AppData\Roaming\npm`-- [email protected] 6.用npm命令安裝cordovaC:\Users\lemon>npm install -g cordovanpm WARN deprecated [email protected]: Use uuid module insteadC:\Users\lemon\AppData\Roaming\npm\cordova -> C:\Users\lemon\AppData\Roaming\npm\node_modules\cordova\bin\cordovaC:\Users\lemon\AppData\Roaming\npm`-- [email protected] 7.建立項目C:\Users\lemon>ionic start todo blank[WARN] Git CLI not found on your PATH. You may wish to install it to version control your app.See installation docs for git: https://git-scm.com/book/en/v2/Getting-Started-Installing-GitUse --no-git to disable this warning.√ Creating directory .\todo - done![INFO] Fetching app base (https://github.com/ionic-team/ionic2-app-base/archive/master.tar.gz)√ Downloading - done![INFO] Fetching starter template blank (https://github.com/ionic-team/ionic2-starter-blank/archive/master.tar.gz)√ Downloading - done!√ Updating package.json with app details - done!√ Creating configuration file ionic.config.json - done![INFO] Installing dependencies may take several minutes!> npm install√ Running command - done!> npm install --save-dev --save-exact @ionic/[email protected]√ Running command - done!? ? ? ? Your Ionic app is ready to go! ? ? ? ?Run your app in the browser (great for initial development):ionic serveRun on a device or simulator: ionic cordova run iosTest and share your app on a device with the Ionic View app:http://view.ionic.io 8.配置平台C:\Users\lemon\todo>ionic cordova platform add android? The plugin @ionic/cli-plugin-cordova is not installed. Would you like to install it and continue? Yes> npm install --save-dev --save-exact @ionic/[email protected]√ Running command - done!> cordova platform add android --save√ Running command - done!Using cordova-fetch for [email protected]~6.2.2Adding android project...Creating Cordova project for the Android platform:Path: platforms\androidPackage: io.ionic.starterName: MyAppActivity: MainActivityAndroid target: android-25Subproject Path: CordovaLibAndroid project created with [email protected]Discovered plugin "cordova-plugin-console" in config.xml. Adding it to the projectInstalling "cordova-plugin-console" for androidAdding cordova-plugin-console to package.jsonSaved plugin info for "cordova-plugin-console" to config.xmlDiscovered plugin "cordova-plugin-device" in config.xml. Adding it to the projectInstalling "cordova-plugin-device" for androidAdding cordova-plugin-device to package.jsonSaved plugin info for "cordova-plugin-device" to config.xmlDiscovered plugin "cordova-plugin-splashscreen" in config.xml. Adding it to the projectInstalling "cordova-plugin-splashscreen" for androidAdding cordova-plugin-splashscreen to package.jsonSaved plugin info for "cordova-plugin-splashscreen" to config.xmlDiscovered plugin "cordova-plugin-statusbar" in config.xml. Adding it to the projectInstalling "cordova-plugin-statusbar" for androidAdding cordova-plugin-statusbar to package.jsonSaved plugin info for "cordova-plugin-statusbar" to config.xmlDiscovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the projectInstalling "cordova-plugin-whitelist" for androidThis plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.Adding cordova-plugin-whitelist to package.jsonSaved plugin info for "cordova-plugin-whitelist" to config.xmlDiscovered plugin "ionic-plugin-keyboard" in config.xml. Adding it to the projectInstalling "ionic-plugin-keyboard" for androidAdding ionic-plugin-keyboard to package.jsonSaved plugin info for "ionic-plugin-keyboard" to config.xml--save flag or autosave detectedSaving [email protected]~6.2.3 into config.xml file ...√ Copying default image resources into ./resources/android - done! 

 用IDE開啟如下所示：

 

那我們來運行它

安卓環境中：

ionic platform add android   //加入到安卓中

ionic build android  //打包

ionic run android  //真機

ionic emulate android  //虛擬機器

 

ios也一樣，將android改成ios

另外

ionic serve   //在瀏覽器上運行，自動會開啟瀏覽器

 

暫時總結到這塊

 

Android開發學習--Ionic+Cordova 環境搭建