• 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 Filesapache-ant-1.9.4in;(添加方法和 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)Androidandroid-sdk ools;
    • C:Program Files (x86)Androidandroid-sdkplatform-tools;

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

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

    配置 Gradle

    下载地址:http://services.gradle.org/distributions/

    下载相应版本的 gradle(对应 cordova-android),然后解压放置在某个目录下,然后向系统 Path 环境变量中添加:

    • D:Program Filesgradlegradle-3.3in

    下载 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_24jrein 目录下),使用产生的 key 对 apk 签名用到的是 jarsigner.exe (位于 jdk1.6.0_24in 目录下),把上两个软件所在的目录添加到环境变量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/ 进行拓展阅读。

  • 相关阅读:
    安卓笔记20170117
    android笔记20170116
    meta 标签的作用
    SASS 初学者入门
    JQuery selector
    浅谈js回调函数
    自己写的jquery 弹框插件
    魔兽种子
    html页面的CSS、DIV命名规则
    各种弹框素材的链接
  • 原文地址:https://www.cnblogs.com/laixiangran/p/8944435.html
Copyright © 2020-2023  润新知