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(‘/‘); });