(一) Ionic 環境搭建

Ionic 環境搭建

一. Ionic介紹以及學習ionic前為什麼要學習Angularjs

  ionic是一個強大的HTML5應用程式開發架構,号稱Advanced HTML5 Hybrid Mobile App Framework 是AngularJS 移動端解決方案,可以幫助你使用Web技術,比如HTML,CSS和Javascript建構接近原生體驗的移動應用程式.Ionic主要關注外觀和體驗,以及和你的應用程式的UI互動,特别适用Hybird模式的HTML5移動應用程式開發.   Ionic 官網:http://www.ionicframework.com/   AngularJs 官網:http://docs.angularjs.cn/api   PhongGap 官網:http://phonegap.com/   NgCordova 官網:http://ngcordova.com/docs/plugins/   學習交流論壇 位址:http://ionichina.com/ 

二. 環境搭建   1.安裝node環境    Ionic的安裝和後續的許多前端工具的安裝都依賴于node的包管理器npm    下載下傳位址:https://nodejs.org/en/

  2.安裝jdk    安裝連結:http://jingyan.baidu.com/article/6dad5075d1dc40a123e36ea3.html

  3.安裝ant    下載下傳位址http://ant.apache.org/     解壓到一個檔案夾,如：D:/ANT/apache-ant-1.9.4接着配置環境變量

ANT_HOME   D:/ANT/apache-ant-1.9.4
  path       D:/ANT/apache-ant-1.9.4/bin
           

  4.安裝adt    安裝連結:http://jingyan.baidu.com/article/63f23628ea4d480209ab3d4d.html    下載下傳安裝好各個版本的sdk

  5.安裝cordova   ngCordova是在Cordova Api基礎上封裝的一 系列開源的AngularJs服務的擴充,讓開發者可以友善的在HybridApp開發中調用設 備的能力, 即可以在    AngularJs代碼中通路裝置的能力Api

npm install -g cordova
           

   安裝時間可能會比較長,安裝成功後輸入下面代碼顯示版本号則安裝成功

cordova -version
           

  6.安裝ionic

npm install -g ionic
           

    輸入下面代碼顯示版本号則證明安裝成功

ionic -v
           

   7.安裝開發工具WebStorm     個人建議新手使用WebStorm開發工具

三. 運作第一個項目     建立項目     cmd切換到任意目錄下運作

ionic start myapp
           

    myapp就是你的項目名稱,接着cd到myapp項目下

cd myapp
           

    建構不同的運作版本,這裡選擇cordova platform add android 運作安卓版本

cordova platform add ios
cordova platform add amazon-fireos
cordova platform add android
cordova platform add blackberry10
cordova platform add firefoxos
           

    編譯

cordova build
           

    運作模拟器,如果電腦插入手機可以直接在手機上面運作

ionic run
           

    遊覽器運作

ionic serve
           

運作成功!

四. 常見錯誤解決   1.在運作構造平台版本時cordova platform add android這個可能會報錯

[error] Please install Android target 22 (the Android 5.1 SDK). Make sure you have the latest Android tools installed as well.
           

 這個主要是沒有安裝和目前cordova對應要求的Android平台adk,解決辦法:  打開ADT,打開Android SDK manager,安裝對應平台的SDK

 2.在添加cordova插件時報如下錯誤:

internal error Error: EXDEV, cross-device link not permitted 'C:\Users\asus\AppData\Local\Temp\git\1435546557383\APACHE_LICENSE' at Error (native) at Object.fs.renameSync (fs.js:636:18)
           

 這是由于無權限等原因解決辦法有兩種:

 ①把項目移動到C槽再執行 cordova plugin add ...添加插件  ②進入該插件的github,把插件下載下傳到本地再執行 cordova plugin add G:\cj\cordova-imagePicker-master  即可

 3.在真機調試中Android環境下導航在最上面解決辦法   進入項目www-->js-->app.js檔案config方法中添加如下代碼,記得在括号中添加$ionicConfigProvider

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
        $ionicConfigProvider.platform.ios.tabs.style('standard'); 
        $ionicConfigProvider.platform.ios.tabs.position('bottom');
        $ionicConfigProvider.platform.android.tabs.style('standard');
        $ionicConfigProvider.platform.android.tabs.position('standard');
        $ionicConfigProvider.platform.ios.navBar.alignTitle('center'); 
        $ionicConfigProvider.platform.android.navBar.alignTitle('left');
        $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
        $ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');        
        $ionicConfigProvider.platform.ios.views.transition('ios'); 
        $ionicConfigProvider.platform.android.views.transition('android');
}