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的更多相关文章

  1. Xamarin 打包生成 Android apk 文件

    Visual Studio 支持 apk 发布 Xamarin.Forms项目或Xamarin.Android项目开发完成之后需要发布.比较常规的发布方式是生成 apk 文件,微软也考虑到开发者有发布 ...

  2. 实例具体解释:反编译Android APK,改动字节码后再回编译成APK

    本文具体介绍了怎样反编译一个未被混淆过的Android APK,改动smali字节码后,再回编译成APK并更新签名,使之可正常安装.破译后的apk不管输入什么样的username和password都能 ...

  3. 使用ionic cordova build android --release --prod命令打包报错解决方法

    使用ionic cordova build android --release --prod命令打包报有如下错误及解决方法 只要把以下内容添加到build-extras.gradle或(build** ...

  4. 从零到一创建ionic移动app:创建第一个app

    新建一个空项目,让它能够在你的虚拟机/手机上跑起来 第一步 新建工程   ionic start myApp blank 一个简单的Web应用我们已经创建完成了,接下来我们就要做一些部署到移动端之前的 ...

  5. 用Kotlin创建第一个Android项目(KAD 01)

    原文标题:Create your first Android project using Kotlin (KAD 01) 作者:Antonio Leiva 时间:Nov 21, 2016 原文链接:h ...

  6. com.android.build.api.transform.TransformException: com.android.builder.packaging.DuplicateFileException: Duplicate files copied in APK assets/com.xx.xx

    完整的Error 信息(关键部分) Error:Execution failed for task ':fanwe_o2o_47_mgxz_dingzhi:transformResourcesWith ...

  7. 使用NDK c++建立一个Android应用

    使用NDK c++建立一个Android应用 一.工具 ADT(集成了eclipse,cdt,ndk plug-in) NDK (用它来编译c/c++程序) JDK (Java开发包) ANT(ecl ...

  8. eclipse中导入一个android工程有The import android cannot be resolved错误怎么办

    解决方法: 右键工程→Bulid Path→Configure Build Path... 选择Android,如图,在Project Build Target里面勾选相应的SDK即可 右键工程,pr ...

  9. Intellij IDEA开发第一个android应用教程

    用惯eclipse的同学们可以试试通过Intellij IDEA来开发一个android应用.下面是具体的教程. 首先:下载Intellij IDEA.最新版本是12.官方提供两个版本.一个是Comm ...

随机推荐

  1. 【转载】CentOS LVM磁盘扩容

    转自:http://blog.sina.com.cn/s/blog_8882a6260101cpfs.html EXSI5.1主机有一个linux虚拟机,系统是centos运行httpd服务,因为是多 ...

  2. bootstrap基本标签总结[转]

    文件头: DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  3. javaweb之javascript结合(三)

    1.案例一:在末尾添加节点 第一步:获取到ul标签 第二步:创建li标签 document.createElement("标签名称")方法 第三步:创建文本 document.cr ...

  4. 使用Cross-validation (CV) 调整Extreme learning Machine (ELM) 最优参数的实现(matlab)

    ELM算法模型是最近几年得到广泛重视的模型,它不同于现在广为火热的DNN. ELM使用传统的三层神经网络,只包含一个隐含层,但又不同于传统的神经网络.ELM是一种简单易用.有效的单隐层前馈神经网络SL ...

  5. bzoj 3033 太鼓达人

    思路:首先一定是2^m次方的总数.用二进制从 000 一直到 111总过m个数,然后暴搜. #include<cstdio> #include<cstring> #includ ...

  6. [E120L][KitKat][4.4.2][CM11] CM11 rom+ google app安装心得

    1. 本文针对 三星手机型号: E120L  即 samsung galaxy S2 HD LTE 2. 本文安装的android ROM 的内核为4.4.2 KitKat 3. 本文安装的第三方RO ...

  7. Zend Studio 或者Eclipse下安装插件Spket(以Zend为例)

    1. Help>Install New Software... 2. 在Work With:后输入网址 http://www.agpad.com/update,点击Add 3. 输入Name:S ...

  8. 小波变换和motion信号处理(三)(转)

    这篇文章算太监了,去作者blog提问去吧:http://www.kunli.info/2012/04/08/fourier-wavelet-motion-signal-3/ 从前两篇发布到现在,过去一 ...

  9. puppet运维配置实列

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABQkAAAGBCAIAAABKMKAEAAAgAElEQVR4nOydeXwU9cH/t2o9WutR+7

  10. C#- Winform最小化到托盘

    实现前先拉一个notifyIcon控件,在Icon属性中加入一个ICON小图标,然后具体的代码实现如下: using System; using System.Collections.Generic; ...