ionic(一) build你的第一个android apk

时间:2024-12-05 15:35:02

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啦

ionic(一)  build你的第一个android apk      ionic(一)  build你的第一个android apk