Ionic安装详细步骤.docxVIP

CordovaIonic安装操作详细步骤

武深龙2017-07-06

备注：

本文档所介绍安装的软件，建议运行PC机是64位，建议PC的内存配置至少4G以上，本人最初用32位虚拟机，3G内存的win7配置下面步骤，吃尽了苦头特此说明;另外当本人重新安装64位虚拟win7后，由于心慈手软竟然只分配了40G的磁盘空间，结果完成下面操作后40G硬盘空间竟然所剩无几，因此建议工程组其他成员在执行下述过程时，尽量选择较大磁盘空间；另外第一次安装并执行命令时，有许多支持包需要在线下载，所以务请选择网速较好时进行第一次操作，否那么由于网络延迟造成命令执行失败，那么容易出现第二次执行仍然失败现象，切记！切记！！！。

翻开浏览器登录网址如下

s:///en/download/current/

下载必威体育精装版的Node.js版本

本文档以下载8.1.3版本为例说明

双击所下载文件进行安装，本文档安装在c:\nodejs目录下，安装成功的标识如下列图所示

在Node.js根底上安装Cordova,安装命令如下

c:\nodejsnpminstall-gcordova

安装过程可能会比拟慢，具体的快慢取决于网速和当前网络环境，不排除网站已经被屏蔽的可能性，如果中途安装失败还是一个比拟麻烦的事，因为第一次安装失败可能会造成无法进行第二次安装，需要完全卸载Node.js并且将目录删除干净，重新安装Node.js后再执行上述操作,总之耐心等待，都是网络屏蔽惹的祸没方法，具体如下列图所示：

Cordova安装成功的标志如下列图所示

下载安装JDK并配置环境变量

安装过程略过，安装完成后首先配置JAVA_HOME如下列图所示

配置PATH如下列图所示

配置CLASSPATH如下列图所示:

配置完全正确的检验方法如下列图：

安装ADT

首先下载ADT具体网址如下：

本文档以安装在C:\android-sdk为例，如下列图所示：

安装后进入进度如下界面，为了让后面的操作步骤顺畅，此处建议选择全部安装，只是全部安装占用空间较大，而且下载需要花费很长时间，如下列图所示：

在环境变量path中配置如下：

C:\android-sdk\platform-tools;C:\android-sdk\tools，具体如下列图所示：

安装ant

下载地址如下：

下载后解压到c:\apache-ant目录下配置环境变量如下：

Ant安装成功的标志是在dos窗口下执行命令，返回大致如下列图所示：

下载配置Gradle

下载网址如下：

s:///releases/

本文档以安装在c：\gradle目录下为例来说明

首先配置GRADLE_HOME如下列图所示

然后在path中参加c:\gradle\bin，如下列图所示：

此局部配置成功的标志是执行如如下命令，dos窗口返回如下：

用cordova创立工程

此时在c:\myproject目录下创立一个完整的cordova工程，如下列图所示：

文档作者将已经开发的demo放置在www目录下，如下列图所示：

添加安卓平台执行如下列图所示命令

首次编译

输入命令如下列图所示：

c:\myproject\zsyy\cordovabuildandroid

第一次编译需要下载指定版本的Gradle，由于从国外网站下载可能网速会比拟慢，因此可能会造成编译不成功，我就下载了好屡次未成，最终选择一个早晨网速很好的时候重新执行方才下载完成，页面截图大致如下：

将Crosswalk集成到工程当中

上述配置过程打出的包优点是比拟小，缺点是需要调用系统中的webview，由于各种老旧webview对HTML5/CSS3支持的不好，在android各版本调试CSS兼容性简直就是噩梦，因此需要安装Crosswalk。安装Crosswalk的优点是解决了androidwebview碎片化问题，还支持各种HTML5/CSS3新语法，缺点是会使安装包增大20M左右。

执行命令如下:cordovapluginaddcordova-plugin-crosswalk-webview

成功后系统截图提示如下：

Crosswalk安装成功后再执行打包命令，得到的apk包大致如下列图所示：

安装Ionic

执行命令大致如下：

c:\nodejs\npminstall-gionic

安装成功的标志是执行如下命令：

c:\nodejs\ionic-v

返回当前下载的ionic版本号，如下列图所示：

创立Ionic应用

执行命令大致如下：

c:\myproject\ionicstartmyapptabs

页面返回如下列图所示，如果是第一次创立应用会经过漫长的下载等待：

页面提示选择y工程创立完毕

虚