【4858美高梅】android环境搭建,ionic3开发条件搭建

By admin in 4858美高梅 on 2019年3月28日

一、前言

一、前言

Java环境布置


常规,先放出种种链接

前段时间,公司有个APP项目须求援助不一样平台,于是利用了Ionic2 + cordova +
angular2,在搭建环境经过中境遇了很多标题,刚好近来有时间整理出来。

前段时间,公司有个APP项目须求协理区别平台,于是接纳了Ionic2 + cordova +
angular2,在搭建环境进程中遇见了广大难题,刚好方今有时光整理出来。

1 安装jdk

1.1 官网下载jdk安装包进行安装

Java SE Development Kit 8
Downloads

1.2 可能找到jdk解压包举办设置(推荐)

JDK8下载页面:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

贰 、开发环境搭建

② 、开发环境搭建

2 配置JAVA_HOME

环境变量

JAVA_HOME: [jdk路径] //不要存在汉语或空格

path:%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

CLASSPATH: .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar

=

官网:https://cordova.apache.org/docs/en/7.x/guide/platforms/android/

参考这一个网站步骤搭建:https://github.com/DonaldTdz/Ionic2QuickStart

参考这些网站步骤搭建:https://github.com/DonaldTdz/Ionic2QuickStart

Android 环境安插


android
sdk下载页面:https://developer.android.com/studio/index.html\#downloads

专注:nodejs 要装6.0
+LTS最新版,不要装8.X的摩登版本(

留意:nodejs 要装6.0
+LTS最新版,不要装8.X的风行版本(

1 下载 android studio (推荐 解压包)

Android Studio
中文网

下载后解压或设置

windows SDK
tools下载地址:https://dl.google.com/android/repository/sdk-tools-windows-3859397.zip

4858美高梅 1

4858美高梅 2

2 下载 Android sdk  (推荐 解压包)

Android
SDK

下载后解压或安装 

Mac SDK
tools下载地址:https://dl.google.com/android/repository/sdk-tools-darwin-3859397.zip

Cordova版本要安装6.X版本,近来cordova-android版本最高只可以帮助到6.X.X

Cordova版本要安装6.X版本,近年来cordova-android版本最高只可以协助到6.X.X

3 配置ANDROID_HOME

Linux SDK
tools下载地址:https://dl.google.com/android/repository/sdk-tools-linux-3859397.zip

cmd: cnpm install –g ionic cordova@6.x

cmd: cnpm install –g ionic cordova@6.x

环境变量

ANDROID_HOME: [android sdk 路径]  //不要存在普通话或空格

path:%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

Gradle下载地址:https://services.gradle.org/distributions/

cmd: ionic –v  Cordova –v 查看展现版本号,安装成功

cmd: ionic –v  Cordova –v 查看展现版本号,安装成功

4 配置GRADLE_HOME

Android环境在布局完第叁步实际樱笋时经得以应用了,然则因为未来Android项目都以借助gradle实行package管理的,又因为长城原因,gradle在实行联网下载的时候是对比艰苦的,所以大家还亟需布置一下gradle

gradle

采用你须求的本子进行下载解压;


4858美高梅 3

4858美高梅 4

环境变量

GRADLE_HOME: [gradle 解压目录] //不要存在中文或空格

path: %GRADLE_HOME%\bin

【4858美高梅】android环境搭建,ionic3开发条件搭建。=

① 、安装JDK8或然以上版本(链接失效的话自行百度,下载在此之前要先选择Accept
License Agreement)

4858美高梅 5

4858美高梅 6

安装Node.js


二 、下载上边包车型大巴SDK
tools,然后解压到钦点的文书夹,双击运维android.bat,运营sdkmanager(运维闪退请检查1)。

③ 、运转贰个ionic种子品种

③ 、运转二个ionic种子品种

1 下载安装Node.js

node.js

双击举行安装

勾选Tools下的【Android SDK tools,Android SDK Platform-tools,Android
SDK Build-tools(采用新型版本即可)】,

下载地址:https://github.com/DonaldTdz/ionic-seed

下载地址:https://github.com/DonaldTdz/ionic-seed

2 安装Node.js的目的

接纳Node.js的包管理(npm)安装Cordova ionic 和ionic工程的注重包

可以起三个Node.js的劳动,使ionic的调节特别有益于

Android platfrom(如:Android7.1.1(Api 25)中的SDK Platform),

用vs code打开终端输入指令:cnpm install

用vs code打开终端输入指令:cnpm install

3 映射到Taobao镜像

在境内链接npm的服务器卓殊不安定,尤其简单出现timeout,所以大家最佳是安插一下境内的镜像,当然,不配也完全没十分,要是选择npm
install 战败的时候,重来三遍就好了(npm
能够形成断点续传)当然,前提是您乐此不疲

炫耀到天猫镜像的办法为:

开拓 CMD,执行以下命令

$ npm install -g cnpm –registry=

以下有所npm命令均可用cnpm代替

注:开发进程中遭受过使用cnpm导包相当的状态,所以笔者一般依旧选择npm来导入。

=

Extras下的【Android Support Respository,Google USB Driver】。

4858美高梅 7

4858美高梅 8

安装 Cordova 和 Ionic


(上边给出的要求求选择,最不难易行方法全选)。

Ionic serve 运营品种

Ionic serve 运维项目

1 科尔多瓦 是干嘛的

Cordova 是当下最盛行的h5页面同手提式有线电话机原生系统开始展览互动的缓解方案

cordova官网

再者Cordova的官方插件库中也提供有抬高的根底插件

cordova插件库

③ 、下载gradle,依据上边的地方选择不相同版本,如
gradle-4.0-all.zip,下载后解压到对应地方

4858美高梅 9

4858美高梅 10

2 Ionic3又是啥

ionic3是一套App混合开发框架

四 、设置环境变量,遵照https://cordova.apache.org/docs/en/7.x/guide/platforms/android/
中分裂平台安装

Web端运行项目成功,开发环境搭建完毕

Web端运营品种中标,开发条件搭建达成

3 安装

cmd中实践一下命令

// [i]  install的意思 [-g] 指全局安装 [cordova / ionic]
安装对象 

$ npm i -g cordova   

$ npm i -g ionic

安装完毕后实施以下命令检查

$ cordova -v

$ ionic -v

若均正常展现版本号,则设置成功

五 、环境变量必须抬高(Windows)

4858美高梅 11

4858美高梅 12

搭建ionic3 测试工程


ANDROID_HOMR(值为android sdk的位置):D:\xxxx\android-sdk

上边大家初始打包到Android APP

下边我们初阶打包到Android APP

1 了解ionic官网

ionic
官网首页

ionic
开发文书档案

GRADLE_HOME(值为gradle文件地方):D:\xxxx\gradle\gradle-3.5

④ 、Cordova打包Android平台环境搭建

四 、Cordova打包Android平台环境搭建

2 创立工程

$ ionic start [<name>] [<template>] [options]

name: 项目名称

template: 模板,能够是法定推荐模板,也足以是github上的自定义模板

    常用官方模板有:

        blank : 空白模板,只蕴含首页

        tabs :包蕴底边导航栏的模板

        sidemenu :包蕴策划menu导航栏的模板

        super :一流模板(基本功用都带有的模版)

options:参数

    常用参数有:

        –type=ionic1 / ionic-angular 默认是ionic-angular 也就是ionic3

        –cordova 指明是一个cordova项目

        –no-link 告诉ionic
不要再问作者要不要连ionic的支出平台,因为相似我们不会用到ionic开发平台的法力

        –bundle-id=package-name 你的项目包名,唯一分明一个app

在你的能源管理器中创造工作空间引得,控制毕尔巴鄂cd到你的劳作空间引得下,执行上面一条命令。

等候命令执行到位,3-六分钟

Path必须抬高:
;%GRADLE_HOME%\bin;D:\xxxx\android-sdk\platform-tools;D:\xxxx\android-sdk\tools;

参考官方证实:

参考官方表达:

3 项目预览

花色创制完结后,首先需求cd到刚刚创立的品种目录下

然后,大家得以简简单单的经过执行上面一条命令进行项目预览。

$ ionic serve

那条命令会在地点起3个node
serve,然后将您的工程编写翻译到里头,你能够经过访问 locahost:8100 实行预览。

只是三个实时编写翻译的长河,意思是若是您对品种做了修改并保存,他会即时反馈到node服务中。

能够经过 在控制埃德蒙顿键入 CTLX570L+C 结束预览

成就后证实:cmd窗口输入 gradle -v (出现有关gradle版本即可)

(中文)http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html

(中文)http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html

4 添加平台

ionic3是用来开发多平台app的,所以大家须求在ionic中添加所需的平台来满意这一个须求。

ionic3的增加平台命令完全继承了cordova的CLI,其可支撑添加三种平台:android
iOS browser

指令如下:

ionic cordova platform add android[@version]

ionic cordova platform add ios[@version]

ionic cordova platform add browser[@version]

剔除平台命令如下:

ionic cordova platform rm android

ionic cordova platform rm ios

ionic cordova platform rm browser

大家也足以透过以下命令来规定大家所设置的平台

ionic cordova platform list

经过以下命令来check 大家所设置的阳台是否风靡的本子

ionic cordova platform check

通过以下命令来升高对应的平台版本

ionic cordova platform update [android / ios / browser]

⑥ 、设置完毕后,ionic cordova platform add android 即可添加Android平台

(英文)http://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html

(英文)http://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html

5 进行编写翻译-打包(debug)

开发阶段建议实行debug方式举行打包,那让大家得以充裕便利得举办调剂

打包命令分三种:

一种为直接编写翻译到手提式有线电话机或模拟器上(前提是手机开了usb调试,或许电脑装了模拟器)

ionic cordova run android

另一种为编写翻译出app的安装包,以Android为例:导出的apk目录为
[系列路线]\platforms\android\build\outputs\apk

ionic cordova build android

注:在第3次编写翻译android apk的时候可能会油可是生这一个错误 Could not reserve
enough space for 2097152KB objectheap
。那是因为gradle在下载jar包的时候因为尚未配置jvm的运作时内部存储器而导致的,
消除方案有三种: 一种是在编译前先是选拔Android Studio打开,因为Android
Studio中暗中认可是陈设过jvm的运维内部存款和储蓄器的,所以难题就一挥而就了,另一种是不必要Android
Studio

配置环境变量:

_JAVA_OPTIONS :  -Xmx512M

* 然后,关掉控制台,重新打开并运转 build命令, 难题化解
*

铭记!!!
成功实施叁回后,将安顿的那个参数删掉,因为尽管不删掉,在大家做别的支出运营eclipse的时候会报错

7、运行:ionic cordova run android

注:中文网址音讯不是最新,访问速度比较快,英文更新到新型,但访问速度较慢

注:中文网址消息不是风靡,访问速度相比较快,英文更新到新型,但访问速度较慢

包装签名后续作品中

1、安装Java SDK

1、安装Java SDK

Java开发工具包(JDK)

安装Java Development Kit (JDK)
7可能最新的。

当在Windows上安装的时候须求遵照JDK路径设置JAVA_HOME环境变量(参见设置环境变量)

4858美高梅 13

cmd:Java –version 彰显版本号安装成功

4858美高梅 14

Java SDK环境变量配置

JAVA_HOME
配置安装目录

4858美高梅 15

Path配置:%JAVA_HOME%\bin

4858美高梅 16

添加CLASSPATH : .;%JAVA_HOME%\lib;
(注:如存在这些环境变量,须要检讨)

4858美高梅 17

2、安装Android SDK Tools

(注:假如要求添加cordova插件,指出安装Android
Studio)

Java开发工具包(JDK)

安装Java Development Kit (JDK)
7只怕最新的。

当在Windows上安装的时候须要依照JDK路径设置JAVA_HOME环境变量(参见安装环境变量)

4858美高梅 18

cmd:Java –version 呈现版本号安装成功

4858美高梅 19

Java SDK环境变量配置

JAVA_HOME
配置安装目录

4858美高梅 20

Path配置:%JAVA_HOME%\bin

4858美高梅 21

添加CLASSPATH : .;%JAVA_HOME%\lib;
(注:如存在那一个环境变量,须要检讨)

4858美高梅 22

2、安装Android SDK Tools

(注:如若供给添加cordova插件,提出安装Android
Studio)

Android SDK

安装Android Stand-alone
SDK或者Android
Studio。即便你布署支出三个新的CordovaAndroid插件也许应用Android平台原生的工具去运作和调节和测试,那么就利用Android
Studio吧。不然,Android Stand-alone SDK
Tools就丰硕构建和配置Android应用程序了。

详细的安装表达能够点击下面的装置链接查看。

4858美高梅 23

 

4858美高梅 24

3、添加Android SDK包

Android SDK

安装Android Stand-alone
SDK或者Android
Studio。假使你安排开发二个新的CordovaAndroid插件或然应用Android平台原生的工具去运维和调剂,那么就应用Android
Studio吧。否则,Android Stand-alone SDK
Tools就够用营造和布局Android应用程序了。

详尽的设置表达能够点击上面包车型大巴设置链接查看。

4858美高梅 25

 

4858美高梅 26

3、添加Android SDK包

添加SDK包

在装置完Android
SDK后,你须要安装其余你期望的对象API级别的SDK包。提议您安装cordova-android(参见下边)辅助的最高级别的SDK包。

打开Android SDK Manager
(例如,在顶峰上运维`android),并确认保证上面已经安装:

  1. 目标Android版本的Android Platform SDK
  2. Android SDK build-tools,版本19.1.0要么以上
  3. Android Support Repository (在”Extras”查找)

参见
Android文档安装SDK包赢得详细内容。

先开辟刚下载的品种终端运营:cordova platform ls 查看cordova
android正视的android SDK版本“

4858美高梅 27

对应下边列表正视android API级别是16-25(http://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html)

4858美高梅 28

然后下载对应的信赖包

4858美高梅 29

4858美高梅 30

4858美高梅 31

设置成功后安插环境变量

ANDROID_HOME:

D:\Program Files\Android\android-sdk

4858美高梅 32

Path:

D:\Program
Files\Android\android-sdk\platform-tools

D:\Program Files\Android\android-sdk\tools

4858美高梅 33

cmd:android –h
查看如上边表示安装成功

4858美高梅 34

五、打包Android
APP

1、 添加Android平台

Ionic cordova platform add android

4858美高梅 35

4858美高梅 36

二 、看重gradle修改到地面

由来是国外网站打包运营时一点也不快或导致破产,你懂的

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

(注:如下载慢用下载工具如迅雷)

下载版本选拔,先搜索distributions/gradle

4858美高梅 37

正如大家供给版本:gradle-2.14.1-all.zip,幸免下错版本

4858美高梅 38

下载实现不用解压,直接拷贝到你项目标上边这几个途径:

\app\platforms\android\gradle(注:如不存在须求建1个,注意拼写错误)

4858美高梅 39

打开刚搜索到的文书:\platforms\android\cordova\lib\builders\GradleBuilder.js

将原先的笺注掉并修改为本土包../gradle-2.14.1-all.zip

4858美高梅 40

三 、 打包应用

ionic cordova build
android

4858美高梅 41

包裹达成后会输出三个apk手提式有线话机安装包文件

4858美高梅 42

设置到手提式有线电话机械运输维成功!!

4858美高梅 43

6、应用签名和运行优化

壹 、生成签名秘钥

添加SDK包

在安装完Android
SDK后,你供给设置任何你期望的指标API级别的SDK包。提出你安装cordova-android(参见上面)支持的最高级其余SDK包。

开拓Android SDK Manager
(例如,在极限上运营`android),并保管上边已经安装:

  1. 目标Android版本的Android Platform SDK
  2. Android SDK build-tools,版本19.1.0恐怕以上
  3. Android Support Repository (在”Extras”查找)

参见
Android文档安装SDK包获得详细内容。

先开辟刚下载的档次终端运营:cordova platform ls 查看cordova
android依赖的android SDK版本“

4858美高梅 44

对应上面列表注重android API级别是16-25(http://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html)

4858美高梅 45

接下来下载对应的注重包

4858美高梅 46

4858美高梅 47

4858美高梅 48

安装成功后布署环境变量

ANDROID_HOME:

D:\Program Files\Android\android-sdk

4858美高梅 49

Path:

D:\Program
Files\Android\android-sdk\platform-tools

D:\Program Files\Android\android-sdk\tools

4858美高梅 50

4858美高梅 ,cmd:android –h
查看如下边表示安装成功

4858美高梅 51

五、打包Android
APP

1、 添加Android平台

Ionic cordova platform add android

4858美高梅 52

4858美高梅 53

贰 、重视gradle修改到地面

案由是国外网站打包运转时不快或造成失利,你懂的

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

(注:如下载慢用下载工具如迅雷)

下载版本选拔,先搜索distributions/gradle

4858美高梅 54

一般来说大家需求版本:gradle-2.14.1-all.zip,制止下错版本

4858美高梅 55

下载完毕不用解压,直接拷贝到你项目标底下那个途径:

\app\platforms\android\gradle(注:如不存在必要建贰个,注意拼写错误)

4858美高梅 56

开辟刚搜索到的文书:\platforms\android\cordova\lib\builders\GradleBuilder.js

将原先的笺注掉并修改为本土包../gradle-2.14.1-all.zip

4858美高梅 57

三 、 打包应用

ionic cordova build
android

4858美高梅 58

装进实现后会输出1个apk手提式有线电话机安装包文件

4858美高梅 59

安装到手提式有线电话机械运输维成功!!

4858美高梅 60

6、应用签名和起步优化

壹 、生成签名秘钥

签署叁个应用

率先你应该阅读Android应用签名所需。

签署三个行使

第2你应有阅读Android应用签名所需。

利用标志

签订契约贰个施用,你须要上面参数:

参数 标志 描述
Keystore --keystore 用来存储一组key的二进制文件路径
Keystore Password --storePassword keystore存储密钥
Alias --alias 用来指定私有key用来签名
Password --password 私有key的密码
Keystore的类型 --keystoreType 默认: 自动检测基于文件扩展名
pkcs12或者jks

这么些参数可以透过下边的Cordova
CLI
build 或者 run一声令下来钦赐命令行参数。

注意: 你应当运用两当中划线 -- 来表示这一个平台湾特务定参数,例如:

cordova run android --release -- --keystore=../my-release-key.keystore --storePassword=password --alias=alias_name --password=password.

cmd
到目录:D:\projects\dev\tz\saas\app\platforms\android(android平台根目录)

cmd:keytool -genkey -alias tzky.keystore -keyalg RSA -validity 40000
-keystore tzky.keystore

依据输入提醒到位输入,生成成功后刷新android平台根目录

4858美高梅 61

二 、签名应用并封装

cordova build android –release — –keystore=”..\tzky.keystore”
–storePassword=xxxxx –alias=tzky.keystore 

(注:自动生成打包配置文件release-signing.properties需求专注tzky.keystore的放置路径要合作)

手动添加release-signing.properties文件并修改:

4858美高梅 62

添加达成后平素运转:cordova build android
–release

4858美高梅 63

4858美高梅 64

叁 、优化运行速度

ionic cordova build android –prod –release

(注意:需求代码优化,假设有错误,依照错误提醒修改)

起头优化参考:http://blog.csdn.net/u010564430/article/details/61201769

在config.xml文件中添加如下内容:

<preference name=”AutoHideSplashScreen” value=”false” /> 

<preference name=”FadeSplashScreenDuration” value=”1000″ /> 

<preference name=”SplashScreen” value=”screen” /> 

<preference name=”ShowSplashScreen” value=”true” /> 

<preference name=”ShowSplashScreenSpinner” value=”false” /> 

<preference name=”SplashShowOnlyFirstTime” value=”false” /> 

<preference name=”FadeSplashScreen” value=”true” />

 

使用标志

签署三个行使,你必要上面参数:

参数 标志 描述
Keystore --keystore 用来存储一组key的二进制文件路径
Keystore Password --storePassword keystore存储密钥
Alias --alias 用来指定私有key用来签名
Password --password 私有key的密码
Keystore的类型 --keystoreType 默认: 自动检测基于文件扩展名
pkcs12或者jks

那个参数能够透过上边的Cordova
CLI
build 或者 run一声令下来内定命令行参数。

注意: 你应有运用两当中划线 -- 来表示这个平台湾特务定参数,例如:

cordova run android --release -- --keystore=../my-release-key.keystore --storePassword=password --alias=alias_name --password=password.

cmd
到目录:D:\projects\dev\tz\saas\app\platforms\android(android平台根目录)

cmd:keytool -genkey -alias tzky.keystore -keyalg RSA -validity 40000
-keystore tzky.keystore

依照输入提示到位输入,生成成功后刷新android平台根目录

4858美高梅 65

贰 、签名应用并打包

cordova build android –release — –keystore=”..\tzky.keystore”
–storePassword=xxxxx –alias=tzky.keystore 

(注:自动生成打包配置文件release-signing.properties供给小心tzky.keystore的放置路径要协作)

手动添加release-signing.properties文件并修改:

4858美高梅 66

累加完毕后间接运营:cordova build android
–release

4858美高梅 67

4858美高梅 68

③ 、优化运维速度

ionic cordova build android –prod –release

(注意:要求代码优化,如若有错误,根据错误提醒修改)

起步优化参考:http://blog.csdn.net/u010564430/article/details/61201769

在config.xml文件中添加如下内容:

<preference name=”AutoHideSplashScreen” value=”false” /> 

<preference name=”FadeSplashScreenDuration” value=”1000″ /> 

<preference name=”SplashScreen” value=”screen” /> 

<preference name=”ShowSplashScreen” value=”true” /> 

<preference name=”ShowSplashScreenSpinner” value=”false” /> 

<preference name=”SplashShowOnlyFirstTime” value=”false” /> 

<preference name=”FadeSplashScreen” value=”true” />

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有