Ionic入门开发

前端之家收集整理的这篇文章主要介绍了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

这个文件关系到前端的一个工具gulpgulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。

文件内容

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

原文链接:https://www.f2er.com/angularjs/146023.html

猜你在找的Angularjs相关文章