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

的介绍