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

时间:2021-02-18 22:09:20

 前言

有人说:“如果你恨一个人,就让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)中你会看到。

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

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

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

 步骤二:安装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,结果顺利返回一大堆文字并且没有报错,即成功了。

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

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

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

步骤三:安装android sdk

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

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

这时候开始配置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的路径)

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

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

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

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

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

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

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

打开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,以防万一出现缺乏模拟器的报错吧。

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

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

步骤四:安装 cordova ionic 

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

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

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

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

步骤五:创建、运行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 //创建空白项目

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

运行完毕后,再一次运行ionic serve,成功运行,谷歌浏览器自动打开并且你能看到你的ionic项目了

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

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

除此之外,可以通过使用可视化操作工具ionic lab来创建和操作项目,不需使用命令行,破解版下载地址:https://pan.baidu.com/s/1pKI6Aan

安装打开操作如图所示:

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

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

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

5、项目出来了,释怀多了,接着就是打包apk和ipa了,先撸撸apk吧~~~

先为项目添加安卓平台: ionic platform add android

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

顺利完成,项目里也多了2个文件夹,心里一丝清凉,也到了紧张的时候,最后一步啦,创建apk~~

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

6、命令行输入 ionic build android

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

有可能出现以下情况:

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

一切似乎顺利,等啊等下载,如果最后你的情况一直维持这个状态的话,恭喜你,又掉坑了,这是下载超时或者下载错误?!

爬坑方法:

按ctrl+c再输入y回车终止执行命令行;

首先自己下载gradle-2.14.1-all.zip放在项目的platforms\android\gradle路径下 ,下载地址:http://download.csdn.net/detail/t6546545/9544638

当然,你可能遇到坑中坑,没有gradle文件夹!!!去别人能运行的ionic项目里找个复制过来吧,或者把整个platforms复制过来替换你项目里的platforms文件夹.....

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

然后在命令行里然后 set CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL=../gradle-2.14.1-all.zip

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

再执行ionic build android

一切又开始顺利执行了~~~

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

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

仔细看几遍,涉及到文件gradle-wrapper.properties,以及提示没有合适的环境或者OS来创建项目,从三方面考虑:

1、gradle-wrapper.properties文件是用来使用gradle.zip的,应该是缺乏相关配置,奇怪的是别人的教程没有这方面呀

2、合适的环境?前面已经检验了,nodejs、javajdk、ant环境都ok,那是安卓tools以及安卓API方面出了问题?需要打开打开adt集成文件夹里的SDK Manager.exe,查看sdk的相关配置情况

3、缺乏OS文件或文件夹或系统环境,什么鬼?

也有人说,这报错是正常的,因为cordova的最新版本会报这个错,通过命令行下载的是最新的cordova,要降版本

OK!一个个试试~~

  步骤六:爬坑

1、打开ionic项目,gradle-wrapper.properties,设置路径

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

再运行 ionic build android,然并卵.....

2、降低cordova版本,命令行回到c盘,输入npm install -g cordova@5.4.0

改版成功,回到项目里输入 ionic build android,然并卵.....

3、匹配ionic项目版本与安卓版本、API等一致

找到project.properties,更改匹配版本(注意多找找,有两个project.properties)

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

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

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

打开adt集成文件夹里的SDK Manager.exe,可以看到sdk的相关配置情况,Updata为更新,installed为已安装,在这里可以选择安装和卸载相关的Tools、安卓API和Extras

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

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

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

检查和下载需要的tools、API以及Extras,下载会遇到无法下载,因为需要镜像下载

点击菜单栏Tools -> Options 弹出 Android SDK Manager – Settings 窗口,设置代理镜像设置,设置值如下:

HTTP Proxy Server :  android-mirror.bugly.qq.com

HTTP Proxy Port : 8080

按照如图的顺序,依次输入、选择、点击:

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

下载需要的tools、API以及Extras

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

此处下载API 23是示范,根据所需下载API

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

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

至此版本问题应该配置完了,再次尝试ionic build android或者cordova build android,一切又有希望开始顺利运行了。

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

此处下载gradle又遇到超时下载问题,按照前面说的方法解决。

继续ionic build android 或者cordova build android,一堆文字后又报错啦,错误一致!!!!!

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

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

初步估计是因为gradle.zip解压和使用的时候出了问题,目前还没能爬出这个坑,ionic&cordova之路漫漫修远兮,吾将上下而求索,为API生,为框架死,为debug奋斗一辈子,吃符号亏,上大小写的当,最后死在需求上。

待续......