HybridApp

1. 环境配置

http://www.zhouwenbin.com/ionic%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE/

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_HOME C:\apache-ant
JAVA_HOME C:\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到最新版
$ 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来实现交互。

posted @ 2014-09-23 01:33  vinsonliudk  阅读(388)  评论(0)    收藏  举报