专栏首页前端布道Windows下Ionic 开发环境搭建

Windows下Ionic 开发环境搭建

Ionic 介绍

首先,Ionic 是什么。

Ionic 是一款基于 Cordova 及 Angular 开发 Hybrid/Web APP 的前端框架,类似的其他框架有:Intel XDK等。

简单来说就是可以将你的 Web 应用打包发布成 IOS/Android APP,并且提供了 Cordova 之外很多强大的服务和新的特性。

听起来还是很诱人的,事实上这也是目前最火的一种 Hybrid APP 开发方式。

接下来介绍如何在 Windows 下搭建 Ionic 开发环境。

在开始之前我假设你已经了解了如下概念:

  • Java JDK
  • Apache Ant
  • Android SDK
  • NodeJS

以上名词这里就不赘述,如果有不清楚的可以自行查阅

安装步骤

Ionic 官方教程:http://learn.ionicframework.com/videos/windows-android/

以下内容参考官方教程得出:

下载 JDK 并配置好 Java 运行环境

下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html(请注意选择您电脑的对应版本)

Java 环境变量的配置:参看:http://zhidao.baidu.com/question/1366931535221381339.html

下载 Apache Ant 并将其 bin 目录路径添加进 Path 路径

下载地址:http://mirror.tcpdiag.net/apache//ant/binaries/apache-ant-1.9.4-bin.zip

下载完成后解压该文件至某个安全的目录下,然后将改文件夹内的bin文件夹路径添加至系统 Path 环境变量中,如存放在 C 盘 Program Files 目录下则 Path 中添加如下值 C:\Program Files\apache-ant-1.9.4\bin;(添加方法和 java 配置 path 变量是一样的,注意以;隔开每个环境变量的值)

下载 Android SDK 并配置好 SDK 运行环境

下载地址:http://developer.android.com/sdk/index.html

这里可以只下载 Android SDK 不需要一并下载 Android Studio。

下载完成并安装然后向系统Path环境变量中添加两个值。分别是 Android SDK 中 tools 目录的路径和 platform-tools 的路径。例如:

  • C:\Program Files (x86)\Android\android-sdk\tools;
  • C:\Program Files (x86)\Android\android-sdk\platform-tools;

在这里我发现 Android SDK 安装目录中并没有platform-tools这个文件夹,运行 tools 目录下的 android.bat 文件,然后在出现的界面中勾选 Android SDK Platform-tools 然后安装。

注意:这里我下载的纯净版 SDK 之前并没有任何 Android 系统在内,所以同 Platform-tools 一样需要在这里勾选需要的版本然后安装。这里至少需要有一个系统,否则无法创建虚拟机。当然,用真机调试的话可以不依赖。

下载 Nodejs for Windows 并安装

下载地址:https://nodejs.org/download/

Windows 下安装 Nodejs 环境很简单,在 Nodejs 官网下载正确版本后安装即可。

nmp 安装 Ionic 和 Cordova

完成以上几步需要配置的环境就搭建完成了,接下来就只需要在控制台输入简单的几行命令就可以安装 Ionic 和 Cordova 啦。

进入 cmd 窗口,输入如下指令:

npm install -g cordova ionic

完成以上所有步骤,就可以开始利用 Ionic 快速开发 Android APP 啦

创建并运行 ionic app

创建 APP

进入 cmd 窗口,输入如下指令:

ionic start myapp

这里的 myapp 是你的 APP 的名字

进入创建的 APP 目录

cd myapp

选择配置 Android 环境

ionic platform add android

打包生成 APP

ionic build android

运行 APP

需要先新建虚拟机或者连接手机。

  • 新建虚拟机:打开 Android SDK 安装目录下的 AVD Manager.exe 选择新建
  • 连接手机:直接通过数据线连接真实设备

ionic run android

到这一步系统就会打开虚拟机或者在真实设备运行简单的示例 APP 了。

其它

--prod 的作用

在编译命令的最后加上 --prod 会让 app 的启动速度加快,但构建速度会变慢。

ionic build android --release --prod

无论是 debug 版本还是 release 版本都适用。

APP 签名

生成签名文件

生成签名文件需要用到 keytool.exe (位于 jdk1.6.0_24\jre\bin 目录下),使用产生的 key 对 apk 签名用到的是 jarsigner.exe (位于 jdk1.6.0_24\bin 目录下),把上两个软件所在的目录添加到环境变量path后,即可使用生成签名文件的命令:

keytool -genkey -v -keystore demo.jks -alias demo -keyalg RSA -keysize 2048 -validity 10000
  • -genkey:产生密钥
  • -keystore: 签名文件名称(这里是 demo.jksdemo 可以自定义,jks 是 Android studio 生成的签名文件的后缀)
  • -alias:签名文件的别名(这里是 demo,可自定义)
  • -keyalg:使用 RSA 算法对签名加密(默认 RSA )
  • -validity 有效期限(这里是 10000 天,可自定义)

以上命令在 cmd 运行如下:

自动签名

在工程目录 /platforms/android 目录新建名为 release-signing.properties 的文件,文件内容如下:

storeFile=demo.jks
keyAlias=demo
storePassword=输入的密钥库口令
keyPassword=输入的密钥口令

这样,使用 ionic build android --release编译即可,在 /platforms/android/build/outputs/apk 下就会生成已签名的安装包 android-release.apk

在 windows 下 storeFile 文件路径应使用 Unix 下的目录分隔符 / 。

了解更多可进入 Ionic 官网: http://ionicframework.com/ 进行拓展阅读。

本文分享自微信公众号 - 前端布道(FontendPreach)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-04-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Windows下搭建Python开发环境

    由于上述安装过程中勾选了“Add Python 3.6 to PATH”,所以已经自动配置了系统环境变量,但是需要重启后才能生效。

    py3study
  • windows下python开发环境搭建

    1、首先访问http://www.python.org/download/去下载最新的python版本。

    py3study
  • windows环境下搭建python+nltk开发环境

    nltk(Natural Language Tookit)实际上是python的一个开发包。对于自然语言处理任务非常有用。 ==================...

    NateHuang
  • windows环境下搭建spark开发环境(IDEA)

    “大数据”(Big Data)指一般的软件工具难以捕捉、管理和分析的大容量数据。“大数据”之“大”,并不仅仅在于“容量之大”,更大的意义在于:通过对海量数据的交...

    YINUXY
  • Windows(10)环境下搭建JSP开发环境

    JSP是Java Server Page的缩写,是由Sun Microsystems公司主导创建的一种动态网页技术标准。JSP部署于网络服务器上,可以响应客户端...

    YINUXY
  • Windows下搭建Eclipse+Android4.0开发环境

    原文地址:http://blog.csdn.net/yzhj2005/article/details/6980676/

    乔达摩@嘿
  • Windows环境Java开发环境搭建

    本文讲解在Windows操作系统下如何搭建Java环境变量。 一、首先下载JDK安装包。 二、安装。 三、配置Java环境变量。 四、运行CMD测试是否安装成功...

    赵腰静
  • linux 搭建ionic 环境

    下载所需呀资源的序号,比如3 是 buildtoolsVersion 28.0.3,47是 platform 8.1.0

    用户1437675
  • 【开发指南】(一)Ionic3开发环境配置常规ionic的环境搭建如下:

    工欲善其事,必先利其器,搭好环境是开发的前提,有时环境没弄好,不时报错往往很扎心。

    IT晴天
  • Windows下iOS开发环境搭建教程

    2016-06-1513:59:42 发表评论 2,027℃热度 1.下载工具 2.安装基本文件 3.开始主要步骤 4.总结 目录 可能许多初学者并没...

    timhbw
  • windows下搭建Ruby(基于eclipse的环境)开发环境

    Java学习123
  • 在Windows下搭建React Native Android开发环境

    安装JDK 从Java官网下载JDK并安装。请注意选择x86还是x64版本。 推荐将JDK的bin目录加入系统PATH环境变量。 安装Android S...

    xiangzhihong
  • Lisp学习--Windows下面的开发环境搭建

    很久以前,就准备学习Lisp,但是遇到不少困难,社区太凌乱,也一直很犹豫,直到看了《Common Lisp - 想说爱你不容易》,想看看Common Lisp怎...

    用户1177503
  • Windows下Python科学计算开发环境搭建

    刚开始使用numpy、scipy这些模块的时候,图个方便直接使用了一个叫做Enthought的软件。Enthought是一家位于美国得克萨斯州首府奥斯汀的软件公...

    卡尔曼和玻尔兹曼谁曼
  • 快速学习-Windows下搭建Scala开发环境

    提示: 根据不同的操作系统选择不同的安装包,下载完成后,将安装包解压到安装目录

    cwl_java
  • Windows环境下的Python环境搭建

    pyenv用于Linux系统中,用来管理多版本的Python环境,由bash脚本编写,使用pyenv-installer来安装。pyenv github下载地址...

    魏晓蕾
  • Window环境下搭建Vue.js开发环境

    笔者最近在进行前端的学习,在点完了HTML5、CSS3、JavaScript等技能树之后,是时候开始框架的学习了。目前为止前端框架呈现出React、Angula...

    Steve Wang
  • 在Windows上搭建Go开发环境

    Go语言是由谷歌开发的一个高性能、跨平台的编程语言。 安装Go 首先先来安装一下Go语言的SDK,目前Go语言的最新版本为Go 1.8.3 。Go下载页面列出了...

    乐百川
  • Windows 10 搭建Python开发环境(PyCharm )

    版权声明:本文为木偶人shaon原创文章,转载请注明原文地址,非常感谢。 https://b...

    shaonbean

扫码关注云+社区

领取腾讯云代金券