星币<span title="
阅读：31885回复：64
Ionic_2.x 手动搭建开发环境教程(nodejs,jdk,androidsdk)
为什么选用ionic:
彻底开源且免费性能优异基于红的发紫的AngularJs漂亮的UI强大的命令行(基于更热门的nodejs)开发团队非常活跃。ngCordova，将主流的Cordova API或者Cordova插件封装为AngularJS扩展，使用非常方便。开源免费的webfont icon库ionicons,基本满足你icon需求。快速搭建绿色
注意：现在手动安装的ionic都是2x版本 需要1.x版本请看搭建绿色环境：
开发环境看这里
相关下载:
Node.js (npm安装工具)
&注:如果官网新版不能安装请用百度下载0.12.7版jdk (android编译依赖)
android (ADK编译)
(建议迅雷)ionic1.x开发工具建议/ +
ionic2.x开发工具建议VScode/
大致步骤（注意安装顺序）：安装node.js - 安装jdk - 安装android(adk) - 命令安装ionic - 创建项目 - 编译项目apk
注意事项:
安装ngCordova.js需要安装bower(Git和jre)比较麻烦 推荐使用ionic助手，助手会从github下载最新版安装。
建议所有程序管理员运行包括cmd androidsdk避免莫名的问题如sdk打不开cmd某些命令不能执行。
1.安装node.js
点next进行安装（注意避免中文目录）700 || this.offsetHeight>500){if(this.offsetWidth/700 > this.offsetHeight/500){this.width=700;}else{this.height=500;}}" style="max-width:700max-height:500" title="点击查看原图" onclick="if(this.parentNode.tagName!='A') window.open('http://bbs./attachment/1602/thread/4_1_b178e.jpg');" />安装后cmd执行node -v看到版本即安装成功（无需设置path）700 || this.offsetHeight>500){if(this.offsetWidth/700 > this.offsetHeight/500){this.width=700;}else{this.height=500;}}" style="max-width:700max-height:500" title="点击查看原图" onclick="if(this.parentNode.tagName!='A') window.open('http://bbs./attachment/1602/thread/4_1_55a2be44dd9b723.jpg');" />现在就可以安装ionic，但是我们要编译apk才能看到效果所以需要装sdk （这里注意顺序先装sdk再装ionic）
2.安装JDK(androidSDK需要)
点next进行安装（注意避免中文目录）700 || this.offsetHeight>500){if(this.offsetWidth/700 > this.offsetHeight/500){this.width=700;}else{this.height=500;}}" style="max-width:700max-height:500" title="点击查看原图" onclick="if(this.parentNode.tagName!='A') window.open('http://bbs./attachment/1602/thread/4_1_f778be1f9d7941c.jpg');" />安装后cmd执行java -version看到版本就是安装成功了（无需设置path）700 || this.offsetHeight>500){if(this.offsetWidth/700 > this.offsetHeight/500){this.width=700;}else{this.height=500;}}" style="max-width:700max-height:500" title="点击查看原图" onclick="if(this.parentNode.tagName!='A') window.open('http://bbs./attachment/1602/thread/4_1_d8d9b35.jpg');" />
3.安装androidSDK
点next进行安装（注意避免中文目录）700 || this.offsetHeight>500){if(this.offsetWidth/700 > this.offsetHeight/500){this.width=700;}else{this.height=500;}}" style="max-width:700max-height:500" title="点击查看原图" onclick="if(this.parentNode.tagName!='A') window.open('http://bbs./attachment/1602/thread/4_1_ee88dd91a85aa4a.jpg');" />
设置环境变量全局访问android我的电脑 - 右键属性 - 高级系统设置 - 环境变量
新建变量名 & & & & & & & 变量值
ANDROID_HOME & & D:\ionic\androidsdk(你sdk的路径)然后在path里添加(注意前面的分号)
&
;%ANDROID_HOME%\platform-%ANDROID_HOME%\tools执行android -h看到命令即安装设置成功700 || this.offsetHeight>500){if(this.offsetWidth/700 > this.offsetHeight/500){this.width=700;}else{this.height=500;}}" style="max-width:700max-height:500" title="点击查看原图" onclick="if(this.parentNode.tagName!='A') window.open('http://bbs./attachment/1602/thread/4_1_c4fcf21fd78f5b6.jpg');" />注意:执行androidsdk目录下的SDK Manager.exe即可打开工具包 如果遇到打不开的情况请用管理员运行!!!700 || this.offsetHeight>500){if(this.offsetWidth/700 > this.offsetHeight/500){this.width=700;}else{this.height=500;}}" style="max-width:700max-height:500" title="点击查看原图" onclick="if(this.parentNode.tagName!='A') window.open('http://bbs./attachment/1602/thread/4_1_3abc60b11519f39.jpg');" />配置AndroidSDK 国内无法访问google服务器 所以列表是空的需要配置镜像
选择Tools - Options 打开设置界面700 || this.offsetHeight>500){if(this.offsetWidth/700 > this.offsetHeight/500){this.width=700;}else{this.height=500;}}" style="max-width:700max-height:500" title="点击查看原图" onclick="if(this.parentNode.tagName!='A') window.open('http://bbs./attachment/1602/thread/4_1_869910cae950afa.jpg');" />填入mirrors. 端口80并勾选 “Force
sources to be fetched using 单击Close关闭”700 || this.offsetHeight>500){if(this.offsetWidth/700 > this.offsetHeight/500){this.width=700;}else{this.height=500;}}" style="max-width:700max-height:500" title="点击查看原图" onclick="if(this.parentNode.tagName!='A') window.open('http://bbs./attachment/1602/thread/4_1_2bb94bda7d25b8d.jpg');" />依次选择Packages - Reload（或者重新打开） 这里千万注意只需要勾选3个Android SDK Platform-tools、Android SDK Build-tools、API23下的SDK Platform (编译的时候会提示你需要的api版本，目前是API23)
如果你勾选了其它的，可能要下载2、30G的东西。像我这样选只需要下载200M700 || this.offsetHeight>500){if(this.offsetWidth/700 > this.offsetHeight/500){this.width=700;}else{this.height=500;}}" style="max-width:700max-height:500" title="点击查看原图" onclick="if(this.parentNode.tagName!='A') window.open('http://bbs./attachment/1602/thread/4_1_54690eef5e80eb9.jpg');" />
附加：项目集成Crosswalk需要勾选Extras下的Android Support Repository和Google Repository否则会报错
700 || this.offsetHeight>500){if(this.offsetWidth/700 > this.offsetHeight/500){this.width=700;}else{this.height=500;}}" style="max-width:700max-height:500" title="点击查看原图" onclick="if(this.parentNode.tagName!='A') window.open('http://bbs./attachment/1608/thread/4_1_b586f74474cce6f.png');" />
接受 - 安装700 || this.offsetHeight>500){if(this.offsetWidth/700 > this.offsetHeight/500){this.width=700;}else{this.height=500;}}" style="max-width:700max-height:500" title="点击查看原图" onclick="if(this.parentNode.tagName!='A') window.open('http://bbs./attachment/1609/thread/4_1_1e4a1c.png');" />
安装完的列表 新版ionic只需装23,如果编译遇到错误就安装API 22的platform700 || this.offsetHeight>500){if(this.offsetWidth/700 > this.offsetHeight/500){this.width=700;}else{this.height=500;}}" style="max-width:700max-height:500" title="点击查看原图" onclick="if(this.parentNode.tagName!='A') window.open('http://bbs./attachment/1609/thread/4_1_5d1ef.png');" />
4.安装ionic cordova打开cmd（建议管理员运行）将npm映射到淘宝的服务器
npm install -g cnpm --registry=https://registry.npm.taobao.org
700 || this.offsetHeight>500){if(this.offsetWidth/700 > this.offsetHeight/500){this.width=700;}else{this.height=500;}}" style="max-width:700max-height:500" title="点击查看原图" onclick="if(this.parentNode.tagName!='A') window.open('http://bbs./attachment/1602/thread/4_1_14d56d0ce7d68c5.jpg');" />然后我们就可以用cnpm命令安装了
cnpm install -g cordova ionic（安装 cordova ionic）700 || this.offsetHeight>500){if(this.offsetWidth/700 > this.offsetHeight/500){this.width=700;}else{this.height=500;}}" style="max-width:700max-height:500" title="点击查看原图" onclick="if(this.parentNode.tagName!='A') window.open('http://bbs./attachment/1602/thread/4_1_faf93fa.jpg');" />
安装完成后运行ionic -v可以看到版本700 || this.offsetHeight>500){if(this.offsetWidth/700 > this.offsetHeight/500){this.width=700;}else{this.height=500;}}" style="max-width:700max-height:500" title="点击查看原图" onclick="if(this.parentNode.tagName!='A') window.open('http://bbs./attachment/1602/thread/4_1_481c1f.jpg');" />
5.创建/编译项目
1.创建项目环境搭建完毕，现在开始创建项目编译APK
ionic start myApp tabs（创建过程y/n询问是否打开官网n即可）700 || this.offsetHeight>500){if(this.offsetWidth/700 > this.offsetHeight/500){this.width=700;}else{this.height=500;}}" style="max-width:700max-height:500" title="点击查看原图" onclick="if(this.parentNode.tagName!='A') window.open('http://bbs./attachment/1602/thread/4_1_900aedf.jpg');" />
创建的项目文件夹
700 || this.offsetHeight>500){if(this.offsetWidth/700 > this.offsetHeight/500){this.width=700;}else{this.height=500;}}" style="max-width:700max-height:500" title="点击查看原图" onclick="if(this.parentNode.tagName!='A') window.open('http://bbs./attachment/1602/thread/4_1_c56bbae4c81022d.jpg');" />
现在我们可以运行ionic server预览下项目700 || this.offsetHeight>500){if(this.offsetWidth/700 > this.offsetHeight/500){this.width=700;}else{this.height=500;}}" style="max-width:700max-height:500" title="点击查看原图" onclick="if(this.parentNode.tagName!='A') window.open('http://bbs./attachment/1602/thread/4_1_faf25.jpg');" />2.编译项目APK编译需要先添加platform平台
ionic platform add android（添加平台ionic platform rm android移除平台 平台大概20M迁移项目时候需要删掉）700 || this.offsetHeight>500){if(this.offsetWidth/700 > this.offsetHeight/500){this.width=700;}else{this.height=500;}}" style="max-width:700max-height:500" title="点击查看原图" onclick="if(this.parentNode.tagName!='A') window.open('http://bbs./attachment/1602/thread/4_1_0c2f689e89a83d4.jpg');" />
ionic build android（第一次编译要下载gradle-2.2.1-all.zip和jar 如果gradle-2.2.1-all.zip下载太慢换个时间段再尝试）700 || this.offsetHeight>500){if(this.offsetWidth/700 > this.offsetHeight/500){this.width=700;}else{this.height=500;}}" style="max-width:700max-height:500" title="点击查看原图" onclick="if(this.parentNode.tagName!='A') window.open('http://bbs./attachment/1602/thread/4_1_cad82.jpg');" />700 || this.offsetHeight>500){if(this.offsetWidth/700 > this.offsetHeight/500){this.width=700;}else{this.height=500;}}" style="max-width:700max-height:500" title="点击查看原图" onclick="if(this.parentNode.tagName!='A') window.open('http://bbs./attachment/1602/thread/4_1_3ac47.jpg');" />
常用命令：
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（开启服务调试）
安装过程遇到任何问题在下方留言
最新喜欢：
不错挺好的
在 ionic platform add androidError: cmd: Command failed with exit code ENOENT
在 ionic build android
Error: cmd: Command failed with exit code ENOENT
出现了以上错误是怎么回事呢！
星币<span title="
：在 ionic platform add androidError: cmd: Command failed with exit code ENOENT
在 ionic build android
Error: cmd: ... 没遇到过 查到说你需要装ant给你下载了 你装上试试 好了告诉我
运行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就安装成功了
不错的工具
npm install -g cnpm --registry=https://registry.npm.taobao.org，这一步能安装，但是cnpm install -g cordova ionic这一步显示不是内部命令，是什么原因啊？
非常感谢！
好详细啊，感谢分享
[MadPixar于 10:10编辑了帖子]
java.net.SocketExceptio： Connection reset
按照上面的步骤安装apk，提示解析包时出现问题，华为mate
啊 &什么原因呢~~~C:\Windows\system32&cnpm install -g cordova ionic[lodash-node@2.4.1](C:\Users\zhang\AppData\Roaming\npm\node_modules\.cordova_npminstall\xmlbuilder\2.2.1\xmlbuilder\node_modules\lodash-node) deprecate: This package has been discontinued in favor of lodash@^4.0.0.
ios 怎么弄呢？
您需要登录后才可以回帖，&或者&
我们创造Ionic，是因为我们坚信HTML5会引领移动开发的未来 - Adam Bradley(ionic创始人)
ionic中文社区欢迎你
共同、分享、进步 &2016热爱前端开发，专注于前端
& & &这里详细介绍下如何用ionic+cordova+angularjs搭建自己的移动端app，包括环境搭建，框架使用等，具体项目已放置在github上，可下载下来自行启动。
下载地址：
一：环境搭建
& & & 1.配置java的运行环境，包括path变量的路径，这里不再详细讲解，请自行百度。
& & & 2.下载Android &Studio，并配置path变量，以及sdk路径。这个下载比较麻烦，请自行去官网下载
C:\Program Files (x86)\Android\android-sdk\
C:\Program Files (x86)\Android\android-sdk\platform-
& & &3.& 安装node.JS的安装。下载地址：
& & &4. &安装ionic 和cordova。请参考官网：
& & &5. &打开cmd，进入命令行，注意是在cmd进入的哦，不是git &bash里面进入。
npm install -g ionic
　　安装成功后查看一下版本，继续安装cordova。
npm install -g cordova
& & &6. &开始创建ionic项目，输入一下命令。
ionic start myApp tabs
　　进入myApp该项目目录，输入 &ionic &serve，即可以成功的在浏览器中进行浏览。这个是我自己设计的APP首页页面，启动成功后看到的效果。
　& & & &&&&
7.如何编译并发布应用？
当你已经顺利完成你的应用代码部分的时候，你现在所需要的就是将你的应用打包并且发布了。
第一步：创建一个独一无二的图标。创建好你的图标之后，请以png/psd/AI格式保存在resource/android/icon.png和resource/android/icon.png。然后使用如下命令，就可以生成不同尺寸的图标。
$ ionic resources -icon
第二步：创建启动页面图片。启动画面的源文件至少需要2208px&2208px，创建完成后，保存为resource/android/splash.png和resource/android/splash.png。
然后使用如下命令就可以生成不同尺寸的启动画面图片：
$ ionic resources --splash
看下我创建的启动图片：
第三步：编译Android应用（这里以安卓应用为例）。
1:配置应用的签名。使用如下命令来配置你的签名（keystore）
$ keytool -genkey -v -keystore my_jt.keystore -alias my_jt -keyalg RSA -keysize 2048 -validity 10000
注意：请使用你应用的名字来替代my_jt这个命令可以生成一个新文件，在本示例中为my_jt.keystore。 在应用的整个生命周期中将重复使用同一个keystore，请保存好它。
2:使用Cordova编译应用。使用build命令编译一个应用的发布版本：
$ cordova build --release android
这个命令会生成一个新的apk文件。此时还未签名。
3:签名应用文件。现在我们要用之前创建的keystore文件来签名生成的未签名版本的应用。使用如下命令来签名：
$ jarsigner -verbose -sigalg SHALwithRSA -digestalg SHAL -keystore my_jt.keystore unsigned_name.apk my_jt
注意：这里请使用keystore生成文件名来替换my_jt示例名称，同时用真实的应用文件名替换掉unsigned_name.apk。
这个过程需要一点时间，期间会提示输入keystore的密码。命令会修改apk文件并对其进行签名。
& & & & OK，需要的环境都已经配置好了，也可以启动成功，但是以上五个步骤中，不一定都是很顺利的，这里总结一下自己的问题，并给出自己的解决方案。
二：安装遇到的问题
& & &1.进行android 平台配置时候报错。即执行下面命令,这里的命令是指，将本地的APP打包成Hybrid &App时的基于安卓平台，进行的编译。
ionic platform add android
　 &这里会刚开始安装出问题，显示，android版本过低，解决办法，重新下载一个sdk版本。
& & 2.确保你安装后，ionic的文件一个不少，如上所示，碰到问题，当时安装时候，没有ionic.config.json文件。解决办法，自己新建一个ionic.config.json文件
"name": "myApp",
"app_id": ""
　　将以上内容添加进去即可。不过name要换成你自己的项目目录名称。
& &3. 进行安卓打包时，编译成apk文件，即执行下面命令时碰到问题。
ionic build android
　 & 由于很多东西是从google下载来了，打包会很慢很慢，（等的花儿都谢了）
&三：项目规范问题
& & &这里总结一下导师昨天验收demo时候，指出的几个问题。
& & &1：angularjs书写controller时候，注意要将参数写进数组里面。
&看下我的写法是下面这样的：
.controller('PlaylistsCtrl', function($scope) {
$scope.playlists = [
{ title: 'Reggae', id: 1 },
{ title: 'Chill', id: 2 },
{ title: 'Dubstep', id: 3 },
{ title: 'Indie', id: 4 },
{ title: 'Rap', id: 5 },
{ title: 'Cowbell', id: 6 }
　这种写法是有问题的，在进行打包时候，会出问题。正确写法应该是下面这种。将参数和函数写在数组里面。
.controller('PlaylistsCtrl',['$scope', function($scope) {
$scope.playlists = [
{ title: 'Reggae', id: 1 },
{ title: 'Chill', id: 2 },
{ title: 'Dubstep', id: 3 },
{ title: 'Indie', id: 4 },
{ title: 'Rap', id: 5 },
{ title: 'Cowbell', id: 6 }
　2.　我在进行书写时候，没有将服务和控制器进行分开，而是混合写的，而且是单页面进行路由转换，导师指出这样是会存在很多问题的，通常当页面很多时候，几百个
甚至几千个时候，单页面加载的速度是相当缓慢的，后期需要进行改进。像我下面这种将控制器和服务混合写是不规范的。&&
.controller('browseCtrl', ['$scope', '$stateParams','$http','$ionicScrollDelegate','$location','$filter',
function($scope, $stateParams,$http,$ionicScrollDelegate,$location,$filter) {
$scope.requestDate = function() {
$http.get("../data/browse.json").success(function(data) {
console.log("请求全部的数据");
console.log(data);
$scope.data =
& & 从开始零搭建到现在这个APP有一定的模型，从功能，到页面设计，差不多花了四天左右的时间，与后端的联调也能够跑通。么么哒，接下来的两周时间，在保证基本功能前提下，设计
各方面需要继续完善，优化。哈哈，很喜欢这种调调，自己边设计，边做。。。还有好些页面，功能没写，继续。最终完整版APP请看我github里面的更新(暂未完成版)。
这里贴下自己主页和列表页的代码部分：
主页部分：
&ion-side-menus enable-menu-with-back-views="false"&
&ion-side-menu-content &
&ion-nav-bar class="bar-stable"&
&ion-nav-back-button&
&/ion-nav-back-button&
&ion-nav-buttons side="left"&
&button class="button button-icon button-clear ion-navicon" menu-toggle="left"&
&/ion-nav-buttons&
&/ion-nav-bar&
&ion-nav-view name="menuContent"&&/ion-nav-view&
&/ion-side-menu-content&
&ion-side-menu side="left" class="set-side-menu"&
&ion-content class="set-background"&
clas="set-menu-login" style="text-align:margin-top: 55cursor:" ng-click="login()"&
&div class="set-img-login" style="margin-left: 32%;"&
&p style="margin-top:19font-size: 17"&请登录账号&/p&
&ion-list&
&div class="list set-list-menu" style="line-height: 60margin-top: 40"&
&ion-item menu-close href="#/app/personInfo" &
&i class="icon ion-person" &&/i&
&span class="set-menu-icon"& 个人中心&/span&
&/ion-item&
&ion-item menu-close href="#/app/playlists"&
&i class="icon ion-calendar"&&/i&&span class="set-menu-icon"&投票首页&/span&
&/ion-item&
&ion-item menu-close href="#/app/browse"&
&i class="icon ion-pinpoint"&&/i&&span class="set-menu-icon"& 试题资料&/span&
&/ion-item&
&ion-item menu-close href="#/app/personCenter"&
&i class="icon ion-star"&&/i&&span class="set-menu-icon"& 个人收藏&/span&
&/ion-item&
&ion-item menu-close href="#/app/set"&
&i class="icon ion-locked"&&/i&&span class="set-menu-icon"& 个人设置&/span&
&/ion-item&
&/ion-list&
&/ion-content&
&/ion-side-menu&
&/ion-side-menus&
列表页部分：
&ion-view view-title="问卷列表"&
&ion-content on-scroll="scrollFixed(e)" &
class="set-btn-all" id="set-btn-all"&
type="button"
class="set-all-list l1 "
ng-click="requestDate()" id="btn1"&全部 &/button&
type="button"
class="set-all-list l2"
ng-click=requestComplete() id="btn2"&已完成 &/button&
type="button"
class="set-all-list l3"
ng-click=requestInComplete() id="btn3"&未完成 &/button&
type="button"
class="set-all-list l4"
ng-click=requestDoing() id="btn4"&进行中 &/button&
&ion-list&
&ion-item ng-repeat="value in data" href="#/app/timuList/{{value.id}}"&
&div class="item item-avatar"&
&img ng-src="{{value.url}}"&
&h3 style="color: #999;"&
&span& {{value.text}} &/span&
&h3 class="set-wenjuan-list" style="color: #margin-top: 15"&
有效期：{{value.timeDate}}
&span class="set-tagComplete"&{{value.status}}&/span&
&span class="set-tagComplete btn-detail"&查看详情&/span&
&/ion-item&
&/ion-list&
class="set-tips-message"&
&p&已经到底了&/p&
&div class="fs_top_btn" ng-click="scrollTop()"&
&/ion-content&
&ion-footer-bar align-title="left" class=""&
&div class="tabs tabs-icon-left"&
&a class="tab-item" href="#/app/playlists
&i class="icon ion-home"&&/i&
&a class="tab-item" href="#/app/personCenter"&
&i class="icon ion-star"&&/i&
&a class="tab-item" href="#/app/set"&
&i class="icon ion-gear-a"&&/i&
&/ion-footer-bar&
&/ion-view&
　主页和列表页已完成，比较头疼的还是设计，感觉总是达不到自己想要的效果，有比较好的想法亲，麻烦给我留言哈！谢谢哒！！！！！！！！！！
作者：婷风
&如果您觉得阅读本文对您有帮助，请点一下&推荐&按钮，您的&推荐&将是我最大的写作动力！欢迎各位转载，但是未经作者本人同意&
转载文章之后必须在 文章页面明显位置给出作者和原文连接否则保留追究法律责任的权利。
阅读(...) 评论()更多数码资讯，请关注南窗数码
“步骤官网”相关经验Ionic cordova android安装教程_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Ionic cordova android安装教程
&&Ionic cordova android安装教程
阅读已结束，下载文档到电脑
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩3页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢