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的介绍