资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Ionic+Cordova WebApp Android打包及环境搭建

Ionic+Cordova WebApp Android打包及环境搭建

icyfire / 2512人阅读

摘要：写一下这两天打包的总结，希望帮人省下一些搜索的时间。环境配置下载地址配置环境和环境配置步骤基本一样，测试打开，输入，返回版本号即为成功。把图标等文件用该命令上传自己的项目到服务器，上传完成后会有一个项目编号。

写一下这两天打包app的总结，希望帮人省下一些搜索的时间。

一.准备工作：

需要安装：
Nodejs、AndroidSDK、Apache-ant、Jdk，
Ionic、Cordova。

我这里用到的版本

Nodejs：node-v6.3.1-x86.msi
Apache-ant：apache-ant-1.9.4
JDK：jdk-8u101-windows-i586.exe

二.环境配置： 1.Jdk环境配置

1.安装
下载地址（注意根据自己所需选择32位&64位）
http://www.oracle.com/technet...

2.配置环境

右键计算机——高级系统设置——高级——环境变量，如图：

选择【新建系统变量】--弹出“新建系统变量”对话框，在“变量名”文本框输入JAVA_HOME,在“变量值”文本框输入JDK的安装路径，单击“确定”按钮，如图：

在“系统变量”选项区域中查看PATH变量，如果不存在，则新建变量 PATH，否则选中该变量，单击“编辑”按钮，在“变量值”文本框的起始位置添加“%JAVA_HOME%bin;%JAVA_HOME%jrebin; ，单击确定按钮，如图：

CLASSPATH 环境变量放在最后面，是因为以后出现的莫名其妙的怪问题80%以上都可能是由于CLASSPATH设置不对引起的，所以要加倍小心才行。CLASSPATH=.;%JAVA_HOME%libdt.jar;%JAVA_HOME%libtool.jar。要注意的是最前面的".;" 如图：

3.至此Jdk环境配置完成

打开cmd，输入java -version，返回java版本号即为配置成功

2.NodeJs环境配置

1.下载地址

https://nodejs.org/en/download/

2.配置环境

[新版本都不需要设计环境变量了，软件会自动写入环境变量]

3.测试

打开cmd，输入node -v，返回node版本号即为安装成功。

3.AndroidSDK环境配置

1.下载地址

https://developer.android.com...

2.配置环境

和JAVA类似，在环境变量中找到Path选中，点击下面的【编辑】， 在变量值里加入androidSDK中tools和platform-tools的目录路径，这里我的是D:android-sdktools;D:android-sdkplatform-tools;当然两个之间要加个分号“;”。

Path = D:android-sdktools;D:android-sdkplatform-tools;

3.测试

打开cmd，输入adb，不报错即为成功。

4.Apache-ant环境配置

1.下载地址

http://ant.apache.org/bindown...

2.配置环境

和JAVA环境配置步骤基本一样，

ANT_HOME D:SWEapache-ant-1.8.4
CLASSPATH ;%ANT_HOME%lib;
PATH ;%ANT_HOME%bin;

3.测试

打开cmd，输入ant -version，返回版本号即为成功。

5.Ionic和Cordova的安装

1.下载及安装

打开cmd，如果之前装过，建议先运行一次

npm uninstall -g ionic

再执行

npm install -g ionic cordova

2.测试

输入ionic -v和cordova -v，分别返回ionic和cordova版本号即为安装成功

三.打包

小Tip：新版本的ionic和cordova加入了telemetry，如果你也遇到这样的错误

You have been opted out of telemetry. To change this, run: cordova telemetry on.

可以试试下面的方法解决

Commands to resolve or disable this, using CLI

cordova/ionic telemetry on

cordova/ionic telemetry off

cordova/ionic build --no-telemetry

1.进入你要创建项目的路径：

cd E:StudyAndroidionicProject

2.创建一个名为myApp的还有tabs的项目（ionic start ） 可选模板为sidemenu 侧滑、tabs 底部tab切换、blank 空白）

ionic start myApp tabs

3.myApp就为项目名称,进入myApp这个文件夹:

cd myApp

4.把项目复制到这个文件夹后， 添加android平台:

ionic platform add android

5.ionic会将本地的资源文件（支持png、psd和ai，尺寸越大越好）上传到它的服务器进行处理。
本地资源文件放到resources目录下，如果是某个平台多带带的资源，可以放到对应平台下，比如resources/Android/icon.png。
这样就会把处理好的资源自动放到该平台下，而不是所有平台都放。

ionic resources [--splash] [--icon]

把图标等文件用该命令上传自己的项目到ionic服务器，上传完成后会有一个项目编号。把res文件夹下的文件替换到 platforms/android/res下，把签名文件复制到 platforms/android/ 下

6.生成androidapk:

ionic build android

即生成apk，文件保存在platforms/android/build/outputs/apk下

云服务器 专线服务 android环境搭建 android开发环境搭建 Android环境搭建2015 cordova-android

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81241.html

相关文章

  • ionic4+vue+cordova开发混合应用

    摘要：摘要是可以让我们使用开发即使来移动应用的框架。如果你熟悉可以直接使用开发，但如果你熟悉使用或并且也想使用，可以使用版本，本文就以来说明这两者如何结合使用。除此之外还引入和来对把我们代码打包成安卓或应用。。 摘要 ionic是可以让我们使用web开发即使来移动应用的框架。ionic4之前，ionic只能和angular搭配使用，ionic4后把ionic抽离成四个版本，@ionic/co...

    Yujiaao 评论0 收藏0

  • 使用Ionic3框架开始第一个混合开发APP

    摘要：什么是框架框架是一个混合开发框架，其本身依赖于，，。使用框架可以做什么使用可以使用前端相关技术快速开发多平台的移动。使用全局安装和。输入，这是添加一个平台的命令。注意这个包是版本，并非正式包，正式包需要先生成签名至此，你就开始了第一个应用。 什么是混合开发？ 简单来说，就是在开发移动应用中同时使用Native和Web的开发方式。 什么是Ionic3框架？ Ionic3框架是一个混合开发...

    wangshijun 评论0 收藏0

  • 使用Ionic3框架开始第一个混合开发APP

    摘要：什么是框架框架是一个混合开发框架，其本身依赖于，，。使用框架可以做什么使用可以使用前端相关技术快速开发多平台的移动。使用全局安装和。输入，这是添加一个平台的命令。注意这个包是版本，并非正式包，正式包需要先生成签名至此，你就开始了第一个应用。 什么是混合开发？ 简单来说，就是在开发移动应用中同时使用Native和Web的开发方式。 什么是Ionic3框架？ Ionic3框架是一个混合开发...

    Mr_houzi 评论0 收藏0

发表评论

登陆后可评论

0条评论

icyfire

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<