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啦