admin
管理员
管理员
  • 粉丝8
  • 星币1085
  • 社区居民
  • 忠实会员
阅读:12934回复:43

Ionic_2.x 手动搭建开发环境教程(nodejs,jdk,androidsdk)

楼主#
更多 2016-02-04 20:11
ionic简介

为什么选用ionic:
  1. 彻底开源且免费
  2. 性能优异
  3. 基于红的发紫的AngularJs
  4. 漂亮的UI
  5. 强大的命令行(基于更热门的nodejs)
  6. 开发团队非常活跃。
  7. ngCordova,将主流的Cordova API或者Cordova插件封装为AngularJS扩展,使用非常方便。
  8. 开源免费的webfont icon库ionicons,基本满足你icon需求。
快速搭建绿色
注意:现在手动安装的ionic都是2x版本 需要1.x版本请看搭建绿色环境:Ionic_1.x 5分钟快速搭建绿色开发环境
开发环境看这里

相关下载:

Node.js (npm安装工具) 百度下载 官网下载  注:如果官网新版不能安装请用百度下载0.12.7版
jdk (android编译依赖) 百度下载 官网下载
android (ADK编译)百度下载 官网下载 (建议迅雷)
ionic1.x开发工具建议Sublime/WebStorm + ionic助手
ionic2.x开发工具建议VScode/WebStorm

大致步骤(注意安装顺序):安装node.js - 安装jdk - 安装android(adk) - 命令安装ionic - 创建项目 - 编译项目apk

注意事项:
安装ngCordova.js需要安装bower(Git和jre)比较麻烦 推荐使用ionic助手,助手会从github下载最新版安装。
建议所有程序管理员运行包括cmd androidsdk避免莫名的问题如sdk打不开cmd某些命令不能执行。

1.安装node.js
next进行安装(注意避免中文目录)

图片:1.jpg

安装后cmd执行node -v看到版本即安装成功(无需设置path)

图片:2.jpg

现在就可以安装ionic,但是我们要编译apk才能看到效果所以需要装sdk (这里注意顺序先装sdk再装ionic)

2.安装JDK(androidSDK需要)
next进行安装(注意避免中文目录)

图片:3.jpg

安装后cmd执行java -version看到版本就是安装成功了(无需设置path)

图片:4.jpg


3.安装androidSDK
next进行安装(注意避免中文目录)

图片:5.jpg


设置环境变量全局访问android
我的电脑 - 右键属性 - 高级系统设置 - 环境变量
新建变量名               变量值
ANDROID_HOME     D:\ionic\androidsdk(你sdk的路径)
然后在path里添加(注意前面的分号)  
;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools
执行android -h看到命令即安装设置成功

图片:7.jpg

注意:执行androidsdk目录下的SDK Manager.exe即可打开工具包 如果遇到打不开的情况请用管理员运行!!!

图片:8.jpg

配置AndroidSDK 国内无法访问google服务器 所以列表是空的需要配置镜像
选择Tools - Options 打开设置界面

图片:9.jpg

填入mirrors.neusoft.edu.cn 端口80
并勾选 “Force https://... sources to be fetched using http://...单击Close关闭”

图片:10.jpg

依次选择Packages - Reload(或者重新打开)
这里千万注意只需要勾选3个Android SDK Platform-tools、Android SDK Build-tools、API23下的SDK Platform (编译的时候会提示你需要的api版本,目前是API23)
如果你勾选了其它的,可能要下载2、30G的东西。像我这样选只需要下载200M

图片:11.jpg


附加:项目集成Crosswalk需要勾选Extras下的Android Support Repository和Google Repository否则会报错

图片:QQ截图20160826025321.png


接受 - 安装

图片:1111111111111111111111111.png


安装完的列表 新版ionic只需装23,如果编译遇到错误就安装API 22的platform

图片:222222222222222222222222222222.png



4.安装ionic cordova
打开cmd(建议管理员运行)将npm映射到淘宝的服务器
npm install -g cnpm --registry=https://registry.npm.taobao.org

图片:15.jpg

然后我们就可以用cnpm命令安装了
cnpm install -g cordova ionic(安装 cordova ionic)

图片:16.jpg


安装完成后运行ionic -v可以看到版本

图片:17.jpg


5.创建/编译项目
1.创建项目
环境搭建完毕,现在开始创建项目编译APK
ionic start myApp tabs(创建过程y/n询问是否打开官网n即可)

图片:18.jpg


创建的项目文件夹

图片:19.jpg


现在我们可以运行ionic server预览下项目

图片:20.jpg

2.编译项目APK
编译需要先添加platform平台
ionic platform add android(添加平台ionic platform rm android移除平台 平台大概20M迁移项目时候需要删掉)

图片:21.jpg


ionic build android(第一次编译要下载gradle-2.2.1-all.zip和jar 如果gradle-2.2.1-all.zip下载太慢换个时间段再尝试

图片:22.jpg

图片:23.jpg


三个模版APK文件百度下载


常用命令:

npm install -g cnpm --registry=https://registry.npm.taobao.org(npm镜像源指向淘宝
cnpm install -g cordova ionic安装cordova ionic)
cnpm update -g cordova ionic更新cordova ionic)
ionic -help(查看帮助)
ionic -v(查看版本)

ionic start myApp blank(空项目)
ionic start myApp tabs(带导航条)
ionic start myApp sidemenu(带侧滑菜单)

ionic platform add android(添加android平台)
ionic platform remove android(移除android平台)
ionic build android(编译项目apk)
ionic emulate android(运行项目apk 手机连接在手机运行 模拟器连接在模拟器运行)
ionic run android (相当于build + emulate)
ionic serve(开启服务调试)

安装过程遇到任何问题在下方留言
喜欢14 评分0
huaqing
新手
新手
  • 粉丝0
  • 星币14
沙发#
2016-02-07 14:27
不错挺好的
回复(0) 喜欢(0)     评分
ghd258
贫民
贫民
  • 粉丝0
  • 星币5
板凳#
2016-02-16 11:49
谢谢分享
回复(0) 喜欢(0)     评分
huaqing
新手
新手
  • 粉丝0
  • 星币14
地板#
2016-02-22 20:14
在 ionic platform add androidError: cmd: Command failed with exit code ENOENT



在 ionic build android
Error: cmd: Command failed with exit code ENOENT


出现了以上错误是怎么回事呢!
回复(1) 喜欢(0)     评分
admin
管理员
管理员
  • 粉丝8
  • 星币1085
  • 社区居民
  • 忠实会员
4楼#
2016-02-23 09:12
huaqing:在 ionic platform add androidError: cmd: Command failed with exit code ENOENT



在 ionic build android
Error: cmd: ...
回到原帖
没遇到过 查到说你需要装ant

给你下载了 你装上试试 好了告诉我

http://pan.baidu.com/s/1pKm1f5p
回复(1) 喜欢(0)     评分
bill19521439
新手
新手
  • 粉丝0
  • 星币18
5楼#
2016-03-04 15:36
运行ionic platform add android命令报错:
Error: Failed to fetch platform android
Probably this is either a connection problem, or platform spec is incorrect.
Check your connection and platform name/version/URL.
Error: read ECONNRESET



问题已解决,下载sdk platform 22就安装成功了
回复(0) 喜欢(0)     评分
u2beauty
贫民
贫民
  • 粉丝0
  • 星币12
6楼#
2016-03-25 14:04
不错的工具
回复(0) 喜欢(0)     评分
wlh
wlh
贫民
贫民
  • 粉丝0
  • 星币12
7楼#
2016-04-06 12:35
npm install -g cnpm --registry=https://registry.npm.taobao.org,这一步能安装,但是cnpm install -g cordova ionic这一步显示不是内部命令,是什么原因啊?
回复(1) 喜欢(0)     评分
luo7724
新手
新手
  • 粉丝0
  • 星币18
8楼#
2016-04-19 10:06
非常感谢!
回复(0) 喜欢(0)     评分
jspokemon
贫民
贫民
  • 粉丝0
  • 星币13
9楼#
2016-04-22 01:22
好详细啊,感谢分享
回复(0) 喜欢(0)     评分
MadPixar
贫民
贫民
  • 粉丝0
  • 星币12
10楼#
2016-04-24 15:13

[MadPixar于2016-04-25 10:10编辑了帖子]
回复(0) 喜欢(0)     评分
夜夜枫
贫民
贫民
  • 粉丝0
  • 星币12
11楼#
2016-05-04 13:17
java.net.SocketExceptio: Connection reset
回复(0) 喜欢(0)     评分
rakor
贫民
贫民
  • 粉丝0
  • 星币12
12楼#
2016-05-05 13:50
按照上面的步骤安装apk,提示解析包时出现问题,华为mate
回复(0) 喜欢(0)     评分
zhanggogze
贫民
贫民
  • 粉丝0
  • 星币13
13楼#
2016-05-29 23:50
啊  什么原因呢~~~
C:\Windows\system32>cnpm install -g cordova ionic

[lodash-node@2.4.1](C:\Users\zhang\AppData\Roaming\npm\node_modules\.cordova_npm
install\xmlbuilder\2.2.1\xmlbuilder\node_modules\lodash-node) deprecate: This pa
ckage has been discontinued in favor of lodash@^4.0.0.
回复(0) 喜欢(0)     评分
zhanggogze
贫民
贫民
  • 粉丝0
  • 星币13
14楼#
2016-06-05 21:08
ios 怎么弄呢?
回复(0) 喜欢(0)     评分
游客

返回顶部