Ionic安装详细步骤

Cordova&Ionic安装操作详细步骤武深龙2017-07-06备注：本文档所介绍安装的软件，建议运行PC机是64位，建议PC的内存配置至少4G以上，本人最初用32位虚拟机，3G内存的win7配置下面步骤，吃尽了苦头特此说明;另外当本人重新安装64位虚拟win7后，由于心慈手软竟然只分配了40G的磁盘空间，结果完成下面操作后40G硬盘空间竟然所剩无几，因此建议项目组其他成员在执行下述过程时，尽量选择较大磁盘空间；另外第一次安装并执行命令时，有许多支持包需要在线下载，所以务请选择网速较好时进行第一次操作，否则由于网络延迟造成命令执行失败，则容易出现第二次执行仍然失败现象，切记！切记！！！。打开浏览器登录网址如下/en/download/current/下载最新的Node.js版本本文档以下载8.1.3版本为例说明双击所下载文件进行安装，本文档安装在c:\nodejs目录下，安装成功的标识如下图所示在Node.js基础上安装Cordova,安装命令如下c:\nodejs>npminstall-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下载网址如下：/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工程创建完毕虚拟环境运行所创建Ionic工程首先进入所创建工程目录，运行命令大致如下：c:\myproject\myapp\ionicserve默认安装Chrome并且在按F12后返回页面大致如下：添加安卓平台在项目目录下执行如下命令添加安卓平台c:\myproject\myapp\ioniccordovaplatformaddandr