ionic（一） build你的第一个android apk

1、ionic start myApp tabs    >>创建一个app

2、cd myApp  >>进入myApp文件

3、ionic platform add android   >>为app添加安卓平台

4、ionic build android  >>将app打包成安卓apk安装包

注意：在整个过程中，你的电脑需要安装JDK、Ant、Android SDK、Node.js、ionic。在安装的时候，在配置环境的时候要注意，因为在最后打包出现问题最多的地方是环境变量这块

你可以对你的app做以下调整：

1、修改应用图标icon跟启动页面SplashScreen

  给项目安装splashscreen：cordova plugin add org.apache.cordova.splashscreen

  修改config.xml文件

  <preference name="SplashScreen" value="screen"/><!-- 不带后缀png的文件名，默认是screen-->
  <preference name="SplashScreenDelay" value="3000"/><!-- Splash显示时间，默认是3000ms -->
  <feature name="SplashScreen">
   <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
  </feature>

<platform name="android">
    <icon src="resources/android/icon/1.png" density="xxxhdpi" />  
    <splash src="resources/android/icon/1.png" density="port-xxxhdpi"/> 
</platform>

 

 

2、ionic 中默认安装后导航在底部解决方案在 iOS中, tabs 一直处于底部. 在android中 ionic tabs 一直在顶部。如果需要，我们可以通过配置$ionicConfigProvider来实现

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {

  $ionicConfigProvider.platform.android.tabs.style('standard');
  $ionicConfigProvider.platform.android.tabs.position('standard');

　$stateProvider

  // 向导页面
  .state('tutorial', {
        url: '/',
        templateUrl: 'templates/tutorial.html',
        controller: 'TutorialCtrl'
     })



  // setup an abstract state for the tabs directive
    .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

  // Each tab has its own nav history stack:

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

  .state('tab.chats', {
      url: '/chats',
      views: {
        'tab-chats': {
          templateUrl: 'templates/tab-chats.html',
          controller: 'ChatsCtrl' 
        }
      }
    })
    .state('tab.chat-detail', {
      url: '/chats/:chatId',
      views: {
        'tab-chats': {
          templateUrl: 'templates/chat-detail.html',
          controller: 'ChatDetailCtrl'
        }
      }
    })

  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/');

});

 3.由于我们大部分菜鸟都没有Mac本以及Android 模拟器搭建又十分麻烦，我建议大家可以通过gulp搭建web服务器，这样我么就可以浏览器上查看效果了。

　　先安装gulp

npm install -g gulp
npm install -g gulp-connect

　　配置gulpfile.js文件

var gulp = require('gulp');
// 为搭建web服务引用“gulp-connect”
var connect = require('gulp-connect');

var paths = {
  sass: ['./scss/**/*.scss']
};

// 搭建web服务
gulp.task('webserver', function() {connect.server();})

gulp.task('default', ['webserver']);

　　最后进入你新建的app目录下，运行

gulp

　　在浏览器中输入http://localhost:8080/www/，你就可以看到你的app啦