Ionic 開發環境搭建

Ionic 開發環境搭建

1.ionic 是啥

ionic 是一個開源的Hybird App 開發框架，經過它就能夠直接使用html、css和javascript編寫跨平臺的移動app了，目前支持 android、ios、windows phone。 
ionic 在底層使用了 Cordova 進行構建，經過Cordova js代碼能夠與原生代碼(Android 的 java，iOS 的 Objective-C 等)互相通訊，而且經過Cordova提供了不少插件來讓js訪問原生的設備功能，如攝像頭、麥克風等。 
ionic 官網

2.android 環境搭建

android 開發環境是在windows上搭建的 
ionic須要使用node.js的包管理器npm進行安裝，因此先安裝下node.js。

安裝node.js

在node.js官網上 https://nodejs.org/ 下載最新版本的node.js。 
安裝完後輸入node -v 查看是否安裝成功 。 
 
若是安裝過舊版本的node.js，直接在官網上下載最新版的安裝到相同目錄便可。

安裝cnpm

由於npm的源在國外，因此速度很是慢，常常會由於網絡緣由致使安裝失敗。沒有代理的同窗能夠安裝taobao提供的cnpm，速度快不少。

npm install -g cnpm –registry=https://registry.npm.taobao.org

安裝成功後，把命令裏的 npm 換成 cnpm 便可。

安裝ionic

打開CMD控制檯時記得右鍵選使用管理員模式。

npm install ionic -g

安裝完以後輸入 ionic -v 查看ionic 版本。

輸入 ionic info 能夠查看ionic信息。

安裝Cordova

npm install -g cordova

輸入 cordova -v 查看是否安裝成功。

第一個APP

ionic自帶了不少demo，先下載一個看看。

ionic start cutePuppyPics –v2

啓動

漫長的等待以後終於安裝成功了，切換到項目目錄，而後啓動服務，服務成功啓動後ionic會自動在瀏覽器打開頁面。

cd cutePuppyPics/ 
ionic serve

安裝 JAVA和ANDROID SDK

如今還只能在瀏覽器中預覽，要把demo編譯成手機能安裝的APP還須要再安裝JAVA和ANDROID SDK。

安裝JAVA

1. 根據操做系統版本在 java官網 下載sdk。
2. 在系統->環境變量 中新建 JAVA_HOME ，而後把 %JAVA_HOME% 添加到 path 中。
3. 在命令行輸入 java -v 查看是否安裝成功。

安裝 android studio

1. 下載包含Android Sdk的版本，Android Studio。
2. 在系統->環境變量 中新建 ANDROID_HOME ，而後把 %ANDROID_HOME%，%ANDROID_HOME%\platform-tools，%ANDROID_HOME%\gradle\gradle-4.4，%ANDROID_HOME%\gradle\gradle-4.4\bin添加到 path 中。
3. 在命令行中輸入 adb 查看 Android Sdk 是否安裝成功。
4. 執行以下語句，將全部lencese都經過。android-studio\tools\bin\sdkmanager --licenses
5. mac環境下，須要執行chmod +x gradle,最好是Android Studio路徑下面gradle。必定要進入到bin路徑下面執行這句話，不然徹底路徑的話，由於中間有空格，須要轉義操做。

4. 打開 Android Studio 在 Tools -> Android -> Android Virtual Device Manager 新建一個模擬器。

編譯、啓動模擬器

先在ionic中添加android平臺文件。

ionic cordova platform add android

而後開始編譯

ionic cordova build android --verbose

編譯完以後apk生成在項目目錄下 \platforms\android\build\outputs\apk\ 下。

若是報錯的話，使用下面命令驗證環境是否正確。

cordova requirements android

若是出現下列內容， 證實環境沒錯。

大功告成！在模擬器中運行下試試。

ionic emulate android 

霍霍，作個手機app仍是蠻簡單的嘛~

輸入run也能夠直接編譯加運行

ionic cordova run android

若是隻是打包的話，執行下面命令。

ionic cordova build android

3.ios 開發環境搭建

雖然ionic是跨平臺的框架，可是蘋果限制了IOS APP只能在Mac OS上開發，因此要開發ios app你還得有個Mac 電腦，用虛擬機的話至少要i7+16GB內存+SSD的電腦，否則仍是算了吧，實在是太卡了。

虛擬機安裝OS X能夠參考 Windows下 VM12虛擬機安裝OS X 10.11(詳細教程)， 黑蘋果的初安裝與升級 VMware12+mac os x 10.9+升級+VMware Tools安裝。

OS X 最好下載最新版本的，否則安裝 xcode 的時候還須要先升級操做系統，又是漫長的等待。。。

node.js 、ionic 安裝

步驟跟windows上裝同樣，記得命令前加上 sudo 就行。

安裝xcode

在app store 中搜索 xcode ，點擊安裝。

第一個IOS APP

下載 demo

ionic start cutePuppyPics –v2

運行起來

ionic serve

 
界面和以前在windows上運行時如出一轍，在url後面加上 /?ionicplatform=ios# 以後再預覽下，發現tab上的圖標變成ios風格的了。用ionic不光是程序能跨平臺，圖標也幫你跨平臺了。

 
ionic框架自帶了不少經常使用的圖標 ionic icon，在程序里根據id能夠直接，使用很是方便。

把demo編譯成app

在ionic中添加ios 開發平臺

ionic platform add ios

安裝ios模擬器

sudo cnpm install -g ios-sim

編譯 APP

ionic build ios

編譯好的app在 /platforms/ios/build/emulator 下面

在模擬器中預覽下

ionic emulate ios

 
編譯好的app在 項目目錄/platforms/ios/build/emulator 下面，用 ios-sim lanuch 命令加 --devicetypeid 參數還能夠直接指定要模擬的設備。

ios-sim lanuch XXX.app –devicetypeid com.apple.CoreSimulator.SimDeviceType.iPhone-6

查看模擬器支持的設備

ios-sim showdevicetypes