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

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

也可以输入

$ ionic start myApp blank

新建一个空白页面

还可以输入

 

$ ionic start myApp sidemenu

新建一个带侧边栏的页面

安装gulp

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

cd myApp
npm install -g gulp
npm install
gulp

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

• gulp-concat: 合并文件
• gulp-rename: 重命名文件
• gulp-sass: 支持sass
• gulp-minify-css: 压缩css

如果需要配置一个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/，就可以看到效果了。

 

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

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

 

mac下ios环境安装

1. 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来实现交互。

转载于:https://www.cnblogs.com/vinsonliudk/p/3987435.html