使用ionic与cordova（phonegap）进行轻量级app开发前的环境配置与打包安卓apk过程记录

2022-12-20 21:58:00

前言

有人说：“如果你恨一个人，就让ta去接触cordova（phonegap）”，这是因为这里面的水很深，坑很多，真让人不是一般地发狂。或许有幸运的人儿基本顺顺利利就配置完环境并且成功打包安卓apk或者ios的ipa，像我这样没有运气也没有大神前辈指教，只能在摸索中一而再再而三地体验绝望到希望，再由希望到绝望的心情了，最糟的一次是到了重装系统的地步！！环境配置多了修改多了，乱得不要不要的！！不多说了，下面分享我使用ionic与cordova（phonegap）进行轻量级app开发前的比较顺利的环境配置过程。

不知道怎么操作命令行的可以快速看下这篇文章：http://jingyan.baidu.com/article/5552ef473e2df6518ffbc916.html

步骤一：安装node.js

去nodejs官网下载nodejs最新版本，地址：https://nodejs.org/en/ （这里官网会根据当前访问网页电脑的操作系统自动提供版本！选择最新版下载即可！）

1.下载好以后点击安装，安装在哪个盘都可以安装的时候选择 add to path 安装，一直next即可，nodejs系统变量会自动配置好，在系统环境变量path(PATH)中你会看到。

2.安装完毕，打开命令窗口（快捷键win+r，win是有四个格子的系统图标的按键，接着输入cmd回车即可），输入 node -v 会提示nodejs 版本说明nodejs安装成功；

步骤二：安装java jdk

1、下载jdk，下载地址：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

2、安装及配置java jdk环境，可以百度，有很多教程，个人比较喜欢这篇：Windows 7下java SDK下载、安装及环境变量设置_百度经验，写得全，特别是注意标点符号别遗漏了，根据步骤配置成功了：

http://jingyan.baidu.com/article/e5c39bf5a418e439d76033ee.html

有点小建议，就是可以在用户变量中设置跟系统变量中一模一样的path，防止有时候出现莫名其妙的错误。

3、检验java sdk是否安装以及环境配置成功，依次在命令行运行命令：java -version、java、javac，结果顺利返回一大堆文字并且没有报错，即成功了。

步骤三：安装android sdk

按理说应该是去下载android sdk 了，但是因为sdk 下载比较困难而且配置起来步骤也比较多；所以这里我用的android adt 集成包，这里边的android sdk都是更新好的初学者可以不用更新；下载页面：http://bbs.phonegap100.com/thread-1456-1-1.html 这个页面里边有百度云盘adt下载；下载完成以后找到adt 文件夹复制；随便找一个盘在根目录下新建一个文件夹（文件夹一定要用英文命名，不然后边配置环境变量的时候会出错！）然后粘贴把复制的adt文件粘贴到这个新建的文件夹中；我这里是放在D盘的的根目录下的phoengap文件夹；

如图：

这时候开始配置adt的环境变量，和刚才配置java jdk变量差不多，右击我的电脑选择 –>> 属性 –>>高级系统设置 –>>高级 –>>环境变量。

1.在系统变量中新建
变量名： ANT_HOME
变量值： D:\phonegap\adt\eclipse\plugins\org.apache.ant_1.8.3.v201301120609（org.apache.ant_1.8.3.v201301120609的路径）

2.在系统变量中查找 Path 编辑，在原有的系统变量中添加如下变量值
变量名： Path（PATH）
变量值： D:\phonegap\adt\sdk\tools;D:\phonegap\adt\sdk\platform-tools;%ANT_HOME%\bin(sdk下的tools和platform-tools文件夹路径，另外需注意：如果是win7的话每个目录一定要用小写英文分号隔开！)

现在配置完成；和刚才一样找到命令窗口：输入 ant 回车，如图：出现BuildFile: build.xml does not exist! build failed，说明ant安装配置成功！或者在命令提示符中输入“ant -v”，若出现版本号，证明安装成功。

打开ant集成文件夹，你会发现没有AVD Manager.exe启动模拟器，因此需要自己百度下载android-sdk_r24.4.1-windows.zip，

地址：http://tools.android-studio.org/index.php/sdk

解压得到AVD Manager.exe并且复制到D:\phonegap\adt\sdk（adt里的sdk中，与tools保持同级），虽然不太清楚通过虚拟器运行ionic项目是不是需要AVD Manager.exe，以防万一出现缺乏模拟器的报错吧。

步骤四：安装 cordova ionic

1、输入 npm install -g cordova ionic 回车，安装比较慢需要多等一会，警告不用管，只要不报错就等他继续安装。

2、安装完成以后可以分别输入 cordova -v 和 ionic -v 来查看版本信息，全局安装成功，如图：

步骤五：创建、运行ionic项目以及打包安卓apk

3、现在就可以创建项目了，首先我们先切换到自己想要把项目创建在的那个盘，这里我把项目也创建在了E：盘下的xampp文件下的apache管理下的xampp的htdocs下

然后输入 ionic start myApp tabs 回车

这里myApp 就是项目名称，tabs是ionic项目初始模板，当然还有其他类型

ionic start myApp tabs //创建带有top栏和bottom栏的示例项目

ionic start myApp sidemenu //创建带有左侧带有menu栏的示例项目

ionic start myApp blank //创建空白项目

运行后你可能没有报错，但是也可能像我这样出现坑了，明明跟别人一样环境都配置好了，在创建项目的过程中却出现报错，但是项目也建立出来了！看图！

心有点凉，做我们这行的真心不喜欢看到报错，进去项目目录下，发现Myapp文件夹，一丝欣慰.......

4、尝试通过命令行进入已经创建的ionic项目，只有进去了才可以继续后续操作，命令行输入：cd Myapp（你的项目名称），进去到项目里，接着试试ionic项目能否运行，通过ionic serve可以调用默认浏览器打开你创建的ionic项目，不过，坑来了！找不到某个文件！无法识别你当前的是否为ionic项目！

出坑方法:找到c盘里的用户文件夹（user）下的Administrator,你会发现里面生成了一个.ionic文件夹，打开会看到ionic.config

复制该文件到你的ionic项目里并且添加后缀.json

再运行一次ionic serve，你以为谷歌浏览器自动打开并且你能看到你的ionic项目了？如果你行，运气不错，反正我没那么好运气，出现报错没有找到某个模块文件！幸运的是有提示运行npm install，这是我nodejs出现问题吗，可是前面正常呀，nodejs安装与环境都配置成功了呀，不思其解一......