注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

云水禅心

淡若秋菊何妨瘦, 清到梅花不畏寒.

 
 
 

日志

 
 

ionic环境配置  

2014-07-09 21:22:57|  分类: iphone |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
http://www.zhouwenbin.com/ionic学习笔记-环境配置/

ionic环境配置摘要

这篇文章主要讲讲ionic的安装和新建项目,gulp自动化环境和服务器的搭建,安卓的打包和模拟。

安装ionic

安装node.js,打开命令行,安装cordova和ionic

$ npm install -g cordova ionic

新建项目

新建项目,在命令行输入

$ ionic start myApp tabs

新建一个带底部标签的页面

image

也可以输入

$ ionic start myApp blank

新建一个空白页面

image

还可以输入

$ ionic start myApp sidemenu

image

新建一个带侧边栏的页面

安装gulp

项目用到gulp来做自动化项目构建,在nodejs命令行输入

cd myApp
npm install -g gulp
npm install
gulp

这样就安装了gulp和一些模块

如果需要配置一个web服务器,并且配置自动刷新livereload,在命令行输入

npm install gulp-connect

修改gulpfile.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var gulp = require('gulp');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var connect = require('gulp-connect');
  
var paths = {
  sass: ['./scss/**/*.scss']
};
  
gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});
  
gulp.task('watch', function() {
  gulp.watch(paths.sass, ['sass']);
  gulp.watch(['./www/*.html'], ['html']);
});
  
gulp.task('connect', function() {
  connect.server({
    root: 'www',
    livereload: true
  });
});
 
gulp.task('html', function () {
  gulp.src('./www/*.html')
    .pipe(connect.reload());
});
 
gulp.task('default', ['connect','sass','watch']);

修改index.html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ion-side-menus>
 
    <!-- Center content -->
    <ion-side-menu-content>
      <ion-header-bar class="bar-dark">
        <h1 class="title">Todo</h1>
      </ion-header-bar>
      <ion-content>
      </ion-content>
    </ion-side-menu-content>
 
    <!-- Left menu -->
    <ion-side-menu side="left">
      <ion-header-bar class="bar-dark">
        <h1 class="title">Projects</h1>
      </ion-header-bar>
    </ion-side-menu>
 
  </ion-side-menus>

在浏览器输入http://localhost:8080/www/,就可以看到效果了。

 image

window下android环境安装

  1. 下载jdk,windows下注意32位或者64位,默认安装目录为C:\Program Files\Java\jdk1.7.0_55。
  2. 下载android sdk,位数跟上面对应,解压到C:\adt-bundle。
  3. 下载ant,解压到C:\apache-ant。
  4. 设置环境变量,win7用户右键“属性”,选择“高级系统设置”,点击“高级”选项,点击“环境变量”,点击“新建”。根据安装的位置修改下面的变量值。
变量名变量值
ANT_HOMEC:\apache-ant
JAVA_HOMEC:\Program Files\Java\jdk1.7.0_55
PATH;C:\adt-bundle\sdk\platform-tools;C:\adt-bundle\sdk\tools;%JAVA_HOME%\bin;%ANT_HOME%\bin

运行

$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android

如果仿真出现错误,输入如下命令

d:\zwb\ionic\myApp>android.bat list targets
Available Android targets:
----------
id: 1 or "android-19"
     Name: Android 4.4.2
     Type: Platform
     API level: 19
     Revision: 3
     Skins: HVGA, QVGA, WQVGA400, WQVGA432, WSVGA, WVGA800 (def
XGA720, WXGA800, WXGA800-7in
 Tag/ABIs : default/armeabi-v7a

d:\zwb\ionic\myApp>android create avd --name myApp --target 1

image

就能看到android模拟器的运行了,点击“HelloCordova”,就能在模拟器里面看到项目了。

 image

mac下ios环境安装

  1. 下载nodejs
  2. 在命令行输入下面的指令
  3. 如果提示cordova版本太低,直接进入目录就好了
  4. 如果不能仿真,安装ios-sim,并且同意xcodebulid -license
  5. 还是有错误的话,升级xcode到最新版
  6. $ sudo npm install -g cordova ionic
    $ sudo npm install -g ios-sim
    $ sudo xcodebulid -license //一路回车最后输入agree
    $ ionic start myapp tabs
    $ cd myApp
    $ ionic platform add ios
    $ ionic build ios
    $ ionic emulate ios
    

这篇文章主要讲讲开发环境的配置,这个还是配了挺久的,接下来的文章会讲讲组件的使用,还有怎么配合angularjs来实现交互。

  评论这张
 
阅读(6097)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018