混合式app ionic2.x 手动搭建开发环境教程分享(nodejs,jdk,ant,androidsdk)

一、ionic简介 

为何选用ionic: 

1. 完全开源且免费
2. 性能优异
3. 基于红的发紫的AngularJs
4. 漂亮的UI
5. 强大的命令行(基于更热门的nodejs)
6. 开发团队很是活跃
7. ngCordova，将主流的Cordova API或者Cordova插件封装为AngularJS扩展，使用很是方便
8. 开源免费的webfont icon库ionicons,基本知足你icon需求

 

二、相关下载: 

Node.js(npm安装工具) ：  https://nodejs.org/en/

jdk (android编译依赖)  ：  http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

android (ADK编译)： http://www.androiddevtools.cn/

Sublime text插件 ：http://www.sublimetext.com/

WebStorm 开发工具 ：https://www.jetbrains.com/webstorm/download/#section=windows

 

ionic2.x开发工具建议： Webstorm（开发） + Ant (打包)

注意事项: 建议全部程序管理员运行包括cmd androidsdk避免莫名的问题如sdk打不开cmd某些命令不能执行。

大体步骤（注意安装顺序）：安装node.js - 安装jdk - 安装android(adk) – 安装apache ant - 命令安装ionic - 建立项目 - 编译项目apk 

 

三、安装Node.js 

　3.1 nodejs简介

 

　　3.1.1 为何要选用nodejs？

 

 

　　3.1.2 nodejs 下载以及说明

　

    　首先在咱们官网下载Nodejs的安装包进行安装：https://nodejs.org/en/ 

 

　　

 

 

 

      

 

 

V6.10.0 LTS（9.75MB）——长期支持版，成熟稳定

V7.7.3 Current（9.75MB）——如今最新版本，最新特性、不稳定 做为新手不用纠结，随意选一个下载便可。

 

　3.1.2 开始安装nodejs

　　

　　(1) 下载完后进行nodejs安装.可自定义安装，默认是安装在C:\Program Files\nodejs 

 

　　  点next进行安装（注意避免中文目录）

 

　　

 

　　

在命令行cmd控制行

输入：node –v，控制台将打印出：v7.7.2  提示安装成功。

 

 

 

这样，常规NodeJS的搭建到如今为止已经完成了，火烧眉毛的话你能够在cmd命令行中键入“node”进入node开发模式下，输入你的NodeJS第一句：”hello world“ – 输入：console.log(‘hello world’)。这里就再也不多做演示了。

 

该引导步骤将node.exe 文件安装到C:\Program Files\nodejs\目录下，并将该目录添加进path环境变量

 

注意：环境变量中path的nodejs路径决定你安装后的目录路径

 

(2)  npm 详解

 

　　 npm做为一个NodeJS的模块管理，以前我什么都不懂，从网上找各类安装教程，弄的五花八门，走了很大的弯，如今将其整理出来，方便各位网友查看。

　　

　　①、咱们要先配置npm的全局模块的存放路径以及cache的路径，例如我但愿将以上两个文件夹放在NodeJS的主目录下，便在NodeJs下创建”node_global”及”node_cache”两个文件夹。以下图 

 

　　

　　

②、启动cmd，输入

npm config set prefix "C:\Program Files\nodejs\node_global"

 

npm config set cache "C:\Program Files\nodejs\node_cache"

③、如今咱们来装个模块试试，选择express这个比较经常使用的模块。一样在cmd命令行里面（管理员权限运行cmd），输入

 

npm install express –g

 

（“-g”这个参数意思是装到global目录下，也就是上面说设置的“C:\Program Files\nodejs\node_global”里面。）。待cmd里面的安装过程滚动完成后，会提示“express”装在了哪、版本还有它的目录结构是怎样。以下图 

 

 

④、关闭cmd，打开系统对话框，“个人电脑”右键“属性”-“高级系统设置”-“高级”-“环境变量”。以下图 

 

 

⑤、进入环境变量对话框，在系统变量下新建”NODE_PATH”，输入”C:\Program Files\nodejs\node_global\node_modules“。（ps：这一步至关关键。） 
2014.4.19新增：因为改变了module的默认地址，因此上面的用户变量都要跟着改变一下（用户变量”PATH”修改成“C:\Program Files\nodejs\node_global\”），要不使用module的时候会致使输入命令出现“xxx不是内部或外部命令，也不是可运行的程序或批处理文件”这个错误。 

 

 

 

⑥、以上步骤都OK的话，咱们能够再次开启cmd命令行，进入node，输入“require(‘express’)”来测试下node的模块全局路径是否配置正确了。正确的话cmd会列出express的相关信息。以下图（如出错通常都是NODE_PATH的配置不对，能够检查下第④⑤步） 

 

 

OK，这样就搞定了，只要配置好以后，经过管理员权限安装模块就能够很好管理目录了。

 

 

 

⑦、查看npm 版本号 ：

 

 

 

三、安装JDK(androidSDK须要的) 

　3.1　下载完jdk后，点next进行安装（注意避免中文目录）

　　

 

　3.2 安装后cmd执行java -version看到版本就是安装成功了（无需设置path）(我这里的版本是jdk1.8)

    

 

四、安装androidSDK 
 

 4.1 sdk下载

　　开发android的道友，确定都据说过这玩意。你们能够在http://www.androiddevtools.cn/上进行下载相应版本。

 　　

 

　　下载完后，点next进行安装（注意避免中文目录）

 

　　

 

　　4.2  设置环境变量全局访问android

 

　　个人电脑 - 右键属性 - 高级系统设置 - 环境变量 

　　新建变量名               变量值 
　　ANDROID_HOME     D:\ionic\androidsdk(你sdk的路径)

　　而后在path里添加(注意前面的分号)   
　　;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools

　　执行android -h看到命令即安装设置成功

 

 

注意:执行androidsdk目录下的SDK Manager.exe便可打开工具包 若是遇到打不开的状况请用管理员运行!!!

 

 

配置AndroidSDK 国内没法访问google服务器 因此列表是空的须要配置镜像 
选择Tools - Options 打开设置界面

 

 

填入mirrors.neusoft.edu.cn 端口80

并勾选 “Force https://... sources to be fetched using http://...单击Close关闭”

 

 

依次选择Packages - Reload（或者从新打开）

这里千万注意只须要勾选3个Android SDK Platform-tools、Android SDK Build-tools、API23下的SDK Platform (编译的时候会提示你须要的api版本，目前是API23) 
若是你勾选了其它的，可能要下载二、30G的东西。像我这样选只须要下载200M

 

 

 附加：项目集成Crosswalk须要勾选Extras下的Android Support Repository和Google Repository不然会报错 

 

接受 - 安装

 

 

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

 

 

 

 五、安装 Apache ant 

　　5.1 下载ant

　　ant下载地址： http://ant.apache.org/bindownload.cgi

　　

　　

 

　5.2  下载安装完后进行配置环境变量

 

Windows下ANT用到的环境变量主要有2个： ANT_HOME 和 PATH。 

eg：
1. 设置ANT_HOME指向ant的安装目录(系统变量)。 
设置方法：ANT_HOME = D:\dev\apache-ant-1.9.6-bin\apache-ant-1.9.6

2. 设置bin和lib目录到PATH变量中(用户变量)。将%ANT_HOME%\bin; %ANT_HOME%\lib添加到x变量的path中。 
设置方法：PATH = %ANT_HOME%\bin; %ANT_HOME%\lib

安装若是不成功能够把%ANT_HOME%换成真实的路径。

如:     D:\dev\apache-ant-1.9.6-bin\apache-ant-1.9.6\bin;D:\dev\apache-ant-1.9.6-bin\apache-ant-1.9.6\lib

安装完成之后在cmd中输入 ant -version 验证是否安装成功。

 

  六、下载安装ionic、demo 本地、建立/编译项目 

　　

1.使用npm下载ionic模板项目下载到本地。中间会有一些问询，好比是否使用sass.app的命名等。

　　npm install -g  cordova ionic

 

  

 

执行 cordova ionic 命令、运行下面的命令来确认它们被成功安装：

 

cordova （当前最新版本为v6.5.0）

ionic （当前最新版本为v2.2.1）

 

 

 

 一、开始建立项目（以管理身份进行运行Node.js command prompt）

　　

环境搭建完毕，如今开始建立项目编译APK

这里能够指定目录下进行建立项目

 

 ionic start  myionictest tabs（建立过程y/n询问是否打开官网n便可）

 查看建立的目录文件夹

 

 

 

 

 

myionictest 就为项目名称,进入myionictest 这个文件夹:

 

cd myionictest

 

2. 添加android平台:

 

ionic platform add android 

 

 

 

 

3. 生成android apk:

 

ionic build android  

 

 

 

 

 

 查看生成apk 目录

 

 

 

 

 

 

 

如今咱们能够运行ionic server预览下项目

 

 如今咱们能够运行ionic server预览下项目、显示以下已经搭建好了一个移动混合式app ionic 框架

 

 

此步骤说明（若是此过程下载本地不了建议经过如下这种方式把gradle-2.2.1-all.zip下载下来配置）：

博客连接：http://download.csdn.net/detail/capmiachael/9693458

 

附加gradle官网连接下载、根据ionic对应gradle版本下载便可

 

gradle 下载连接：http://services.gradle.org/distributions/    

 

 

4. 在android模拟器或真机中模拟:

 

ionic emulate android 

  

五、其中3和4能够合并为：

 

ionic run android 

  

 即生成apk，并在模拟器或真机中模拟。

 

六、更新ionic等

    a.更新cordova及ionic包

　 npm update -g cordova ionic 

 

b.更新已建ionic项目中的js类库，命令行中先进入项目所在目录，而后运行：

 

ionic lib update 

 

7.展示ionic项目结果（显示在ios和Android上的样式）

 

ionic serve --lab 

 

说明： 运行emulate/run命令的时候会在platforms目录下生成apk.

在执行platform和emulate命令的过程当中若是出现报错大可能是由于android环境没有安装彻底致使的。请在cmd中输入android打开android SDK manager检查相关的包是否已经安装彻底。

通常来讲，tool和emulator都是必需要安装的.而后选择某一版本的android API进行安装。

 

经常使用命令： 

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 myionictest blank（空项目） 
ionic start myionictest tabs（带导航条） 
ionic start myionictest 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（开启服务调试） 

 

 若是小伙伴看到了此文章，按照我整理的文档步骤进行操做、遇到了问题能够随时找我解决。

　　工做了四年多，一直专一于先后台运维相关的开发工做、前几年专一传统行业OA、商城、CMS、电信、医疗相关管理软件开发、慢慢的从传统行业跳到互联网公司工做，慢慢的经过一年两年互联网公司项目的接触。客户端app与服务器结合开发流程、敏捷式管理、本身不断的摸搜学习也有了本身的一套学习方式和经验、互联网给我带来的技术更新之快要求也高、全部须要不断要求本身跟上节奏、前端的崛起、大数据趋势、随着更多的大学生想步入IT行业，要求也不像三四年前那会学习一门java语言会个div+css就能够找到工做。若是是新手想要步入互联网行业想作前端，我很是愿意跟你聊聊谈谈做为你的一个参考、老司机也是一个有故事的人，个人qq：525331804 。慢慢的转向移动端开发、学习html五、css三、angularjs、nodejs、ionic等技术 ionic是我目前主要学习的一个接近原生国外UI的一个框架技术、混合式开发将来将有可能运用到更多管理软件开发，这只是我本身的一个见解。ionic 开发app一个是成本低、一我的就能够开发一套安卓、iOS app 并且体验也不错。如今对ionic 有一个全新的认识、网上不少搭建教程都不是特别全面、 这个是通过我本人搭建了一遍总结下来的、也有一些参考网上的就没有多写了，就借用过来。

最后帮本身的公众号作一个宣传，主要是分享 污公害、纯自然不含广告、 想了解能够关注、不感兴趣的忽略。

微信公众号搜索：zixuncool  或  资讯酷 

 

ionic2.x 混合式开发交流群： 

 

 

 ionic2.x 手动搭建开发环境教程分享(nodejs,jdk,ant,androidsdk)