Ionic入門開發

Ionic

ionic是一個用來解決開發跨平臺應用的方案。他是建立在Cordova的基礎之上的，內部實現跨平臺是由Cordova來實現的。相對於Cordova而言，他多了一些東西，例如的他的樣式，例如AngularJS。

當初的學習是從菜鳥教程上學來的，當初學藝不精，粗心大意，望寫下這篇文章告誡後人，哪裏有坑。

坑1
首先一開始就大意了，我自以爲學過HTML，CSS，JavaScript就以爲能憑藉這三個技術學出網頁以此來展示出頁面，然鵝

Angular。。。。

自己回去學吧

Ionic安裝

ionic的安裝方式一般是直接採用npm來進行安裝的

Window 和 Linux 上打開命令行工具執行以下命令：
npm install -g cordova ionic

Mac 系統上使用以下命令：
sudo npm install -g cordova ionic

如果已經安裝了的，建議進行更新

npm update -g cordova ionic
或
sudo npm update -g cordova ionic

這裏的坑也是在於nodejs 的版本問題了，之前的Cordova文章有提到過，如果安裝失敗，請參考上一個文章。

其實在這裏也可以看到ionic是依賴於cordova的了，明明安裝ionic而已，不可能說無緣無故需要我多安裝個cordova

創建應用

安裝好之後我們就可以直接使用這個ionic命令來創建我們的項目了

ionic start myApp tabs

坑坑坑，巨坑在此。我當初學習是在菜鳥課程上學習的，菜鳥上的ionic版本是v1.3.2。我創建新應用的時間大概是在2017年7月，這個時候的ionic在npm上的版本已經去到了v3.12.0。使用上面這句命令創建的ionic項目的版本是ionic3的項目（默認），而我看的教程是ionic1的教程。

就這樣，我花了一個星期看完了ionic1的教程望着ionic3的項目開始發呆了。

ionic1採用的是angularjs1.0的語法，ionic2採用的語法變成了angularjs2.0 。angularjs1和angularjs2的區別，自己搜索吧。。。

因爲項目的原因，我採用的是ionic1，也就是使用了angularjs1的語法。所以在這裏說一下如何使用ionic3的命令行來創建一個ionic1的項目

ionic start myApp tabs --v1

這個tabs是ionic官方提供的一個模板，最新版ionic的模板有幾種

• tabs
• black
• sidemenu
• super
• conference
• tutorial

這幾種，可以嘗試一下運行看一下效果。

而舊版的ionic1呢，模板沒有那麼多，只有

• tabs
• black
• sidemenu
• maps

一般直接創建就好了。

運行ionic項目

在這裏和cordova的運行機制是很類似的，在命令行上的操作可以說是和cordova一樣的。ionic的命令最終都是會調用cordova的命令的，只不過ionic會多做一些操作。在這裏建議大家，既然做了一個 ionic 的項目，千千萬萬需要全部使用 ionic 的命令，即使我們有時候看到一些情況，譬如： 添加一個 cordova 插件，cordova官方當然就這樣寫了cordova plugin add ???，這些命令我們可以直接換成ionic plugin add ???

所以，按照我們cordova的命令，添加安卓平臺和添加iOS平臺在cordova介紹中是

• cordova platform add android
• cordova platform add ios

對應ionic這邊就是

• ionic platform add android
• ionic platform add ios

添加完平臺之後就可以運行了

• ionic platform run android
• ionic platform run ios

這裏運行ios一般真機運行都是有問題的，在iOS應用開發的時候，如果需要真機運行調試的話需要用到蘋果的賬號，估計是這個原因，直接運行iOS項目會出錯，我的解決方法是打開應用，使用xcode來運行我的ios應用

接下來就開始分析ionic項目的結構了

Ionic

首先去到要創建項目的目錄之下。運行ionic start IonicDemo tabs --v1

下圖是插件好的ionic的項目目錄

同樣一個個文件的解釋

---

bower.json

bower是一個軟件包管理軟，並解決各個包的依賴項。可以使用bower下載軟件包，或者從git下載庫文件。這裏介紹bower只針對ionic平臺裏的應用說明。

打開我們的項目的時候，除了看到上面的文件以外，應該還可以看到一些隱藏文件，比如.bowerrc，這個文件和我們現在要說的bower.json是需要一起說明的。

.bowerrc這個文件是用來說明bower下載的文件放置的目錄，ionic爲我們設置好了

{
  "directory": "www/lib"
}

而bower.json的內容

{
  "name": "HelloIonic",
  "private": "true",
  "devDependencies": {
    "ionic": "driftyco/ionic-bower#1.3.3"
  }
}

上面這這些內容就是我們依賴的軟件包的信息了

config.xml

這個也就是cordova的配置文件了，不用細講，詳細看上上一篇文章。

ionic在cordova的基礎上加了很多平常使用偏好設置，並且爲我們設置好圖標，我們需只需要直接將目錄下的文件替換掉就可以設置我們的圖標了。

ionic還在cordova的基礎上爲我們加了很多默認的插件，這些插件在項目開發中也是十分常用的，可以瞭解一下。

  <plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
  <plugin name="cordova-plugin-whitelist" spec="1.3.1"/>
  <plugin name="cordova-plugin-statusbar" spec="2.2.1"/>
  <plugin name="cordova-plugin-device" spec="1.1.4"/>
  <plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/

gulpfile.js

這個文件關係到前端的一個工具gulp，gulp是前端開發過程中對代碼進行構建的工具，是自動化項目的構建利器；她不僅能對網站資源進行優化，而且在開發過程中很多重複的任務能夠使用正確的工具自動完成；使用她，我們不僅可以很愉快的編寫代碼，而且大大提高我們的工作效率。

文件內容：

var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCss = require('gulp-clean-css');
var rename = require('gulp-rename');

var paths = {
  sass: ['./scss/**/*.scss']
};

gulp.task('default', ['sass']);

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .on('error', sass.logError)
    .pipe(gulp.dest('./www/css/'))
    .pipe(cleanCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

gulp.task('watch', ['sass'], function() {
  gulp.watch(paths.sass, ['sass']);
});

主要做的事情是監聽了文件的改動，讓我們的開發更加高效了。具體語法可以看官網

hooks，node_modules，platforms，plugins，resources，www

這幾個目錄都和cordova一直的，不詳細講，當然www目錄下面頁面的編寫和cordova有差別，一會再說。

ionic.config.json

這個是ionic的配置文件，我在開發當中並沒有對這個文件做過改動，因爲基本上所有的改動我都是直接在cordova的config.xml文件上改動的，可以看到這個文件的內容也很簡單

{
  "name": "IonicDemo",
  "app_id": ""
}

package.json

這個文件也是專門用來處理包的管理的問題，詳細看cordova的介紹