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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏老马寒门IT

Node入门教程(7)第五章:node 模块化(下) npm与yarn详解

Node的包管理器 JavaScript缺少包结构的定义,而CommonJS定义了一系列的规范。而NPM的出现则是为了在CommonJS规范的基础上,实现解决包...

3686
来自专栏郭少华

(Vue全家桶)Vue-cli

安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v 检测你是否安装了npm和...

2893
来自专栏Jerry的SAP技术分享

使用Cordova将您的前端JavaScript应用打包成手机原生应用

假设我用JavaScript和HTML开发了一个前端应用,我想把该应用打包成能直接在手机上安装和运行(不通过浏览器)的原生应用,例如像下面这样。对应用的用户来说...

1042
来自专栏草根专栏

Identity Server 4 - Hybrid Flow - 使用ABAC保护MVC客户端和API资源

这个系列文章介绍的是Identity Server 4 实施 OpenID Connect 的 Hybrid Flow. 

1524
来自专栏Flutter入门到实战

Flutter从配置安装到填坑指南详解

在 Google I/O ’17 上,Google 向我们介绍了 Flutter —— 一款新的用于创建移动应用的开源库。

2.6K5
来自专栏王小雷

Ubuntu16.04安装后开发环境配置和常用软件安装

Ubuntu16.04安装后1.安装常用软件搜狗输入法+编辑器Atom+浏览器Chome+视频播放器vlc+图像编辑器GIMP Image Editor安装+视...

3875
来自专栏游戏杂谈

搭建基于Android和PhoneGap的开发环境

添加ADT plug,地址为:http://dl-ssl.google.com/android/eclipse

1956
来自专栏Seebug漏洞平台

Bypass unsafe-inline mode CSP

[+] Author: evi1m0 [+] Team: n0tr00t security team [+] From: http://www.n0tr0...

3414
来自专栏守望轩

Visual Studio 2008 每日提示(十二)

#111、定义最近使用的列表中显示项的数目 原文链接:How to customize the number of items shown in the re...

3704
来自专栏智能合约

centos之SSH安装

2733

扫码关注云+社区

领取腾讯云代金券