Ionic安装详细步骤.docx
- 文档编号:29051950
- 上传时间:2023-07-20
- 格式:DOCX
- 页数:17
- 大小:337.52KB
Ionic安装详细步骤.docx
《Ionic安装详细步骤.docx》由会员分享,可在线阅读,更多相关《Ionic安装详细步骤.docx(17页珍藏版)》请在冰豆网上搜索。
Ionic安装详细步骤
Cordova&Ionic安装操作详细步骤
武深龙2017-07-06
备注:
本文档所介绍安装的软件,建议运行PC机是64位,建议PC的内存配置至少4G以上,本人最初用32位虚拟机,3G内存的win7配置下面步骤,吃尽了苦头特此说明;另外当本人重新安装64位虚拟win7后,由于心慈手软竟然只分配了40G的磁盘空间,结果完成下面操作后40G硬盘空间竟然所剩无几,因此建议项目组其他成员在执行下述过程时,尽量选择较大磁盘空间;另外第一次安装并执行命令时,有许多支持包需要在线下载,所以务请选择网速较好时进行第一次操作,否则由于网络延迟造成命令执行失败,则容易出现第二次执行仍然失败现象,切记!
切记!
!
!
。
1.打开浏览器登录网址如下
https:
//nodejs.org/en/download/current/
下载最新的Node.js版本
2.本文档以下载8.1.3版本为例说明
双击所下载文件进行安装,本文档安装在c:
\nodejs目录下,安装成功的标识如下图所示
3.在Node.js基础上安装Cordova,安装命令如下
c:
\nodejs>npminstall-gcordova
安装过程可能会比较慢,具体的快慢取决于网速和当前网络环境,不排除网站已经被屏蔽的可能性,如果中途安装失败还是一个比较麻烦的事,因为第一次安装失败可能会造成无法进行第二次安装,需要完全卸载Node.js并且将目录删除干净,重新安装Node.js后再执行上述操作,总之耐心等待,都是网络屏蔽惹的祸没办法,具体如下图所示:
Cordova安装成功的标志如下图所示
4.下载安装JDK并配置环境变量
安装过程略过,安装完成后首先配置JAVA_HOME如下图所示
配置PATH如下图所示
配置CLASSPATH如下图所示:
配置完全正确的检验方法如下图:
5.安装ADT
首先下载ADT具体网址如下:
http:
//tools.android-studio.org/index.php/sdk
本文档以安装在C:
\android-sdk为例,如下图所示:
安装后进入进度如下界面,为了让后面的操作步骤顺畅,此处建议选择全部安装,只是全部安装占用空间较大,而且下载需要花费很长时间,如下图所示:
在环境变量path中配置如下:
C:
\android-sdk\platform-tools;C:
\android-sdk\tools,具体如下图所示:
6.安装ant
下载地址如下:
http:
//ant.apache.org/bindownload.cgi
下载后解压到c:
\apache-ant目录下配置环境变量如下:
Ant安装成功的标志是在dos窗口下执行命令,返回大致如下图所示:
7.下载配置Gradle
下载网址如下:
https:
//gradle.org/releases/
本文档以安装在c:
\gradle目录下为例来说明
首先配置GRADLE_HOME如下图所示
然后在path中加入c:
\gradle\bin,如下图所示:
此部分配置成功的标志是执行如如下命令,dos窗口返回如下:
8.用cordova创建项目
此时在c:
\myproject目录下创建一个完整的cordova工程,如下图所示:
文档作者将已经开发的demo放置在www目录下,如下图所示:
9.添加安卓平台执行如下图所示命令
10.首次编译
输入命令如下图所示:
c:
\myproject\zsyy\cordovabuildandroid
第一次编译需要下载指定版本的Gradle,由于从国外网站下载可能网速会比较慢,因此可能会造成编译不成功,我就下载了好多次未成,最终选择一个早晨网速很好的时候重新执行方才下载完成,页面截图大致如下:
11.将Crosswalk集成到工程当中
上述配置过程打出的包优点是比较小,缺点是需要调用系统中的webview,由于各种老旧webview对HTML5/CSS3支持的不好,在android各版本调试CSS兼容性简直就是噩梦,因此需要安装Crosswalk。
安装Crosswalk的优点是解决了androidwebview碎片化问题,还支持各种HTML5/CSS3新语法,缺点是会使安装包增大20M左右。
执行命令如下:
cordovapluginaddcordova-plugin-crosswalk-webview
成功后系统截图提示如下:
Crosswalk安装成功后再执行打包命令,得到的apk包大致如下图所示:
12.安装Ionic
执行命令大致如下:
c:
\nodejs\npminstall-gionic
安装成功的标志是执行如下命令:
c:
\nodejs\ionic-v
返回当前下载的ionic版本号,如下图所示:
13.创建Ionic应用
执行命令大致如下:
c:
\myproject\ionicstartmyapptabs
页面返回如下图所示,如果是第一次创建应用会经过漫长的下载等待:
页面提示选择y工程创建完毕
14.虚拟环境运行所创建Ionic工程
首先进入所创建工程目录,运行命令大致如下:
c:
\myproject\myapp\ionicserve
默认安装Chrome并且在按F12后返回页面大致如下:
15.添加安卓平台
在项目目录下执行如下命令添加安卓平台
c:
\myproject\myapp\ioniccordovaplatformaddandroid
16.编译打包
执行命令大致如下
c:
\myproject\myapp\ioniccordovabuildandroid
返回结果大致如下,由于第一次运行又进入一个漫长的下载等待期:
如下图所示,提示ionic打包成功:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Ionic 安装 详细 步骤