Ionic开发环境搭建

Ionic 目录：https://blog.youkuaiyun.com/dkbnull/article/details/87937179

 

        Ionic是一个用来开发混合手机应用的开源框架，其基于Angular语法，学习Ionic之前，应该了解HTML、CSS、 JavaScript、Angular的基本语法。

        Ionic开发依赖于Node.js，并且其环境搭建需要使用到NPM工具，因此我们需要先安装好Node.js，下载地址：https://nodejs.org/en/download/

        博主操作系统是window，因此下载window安装包后直接安装，安装过程基本一路next就可以，并不需要其他操作。其他系统安装可以参考：http://www.runoob.com/nodejs/nodejs-install-setup.html

        安装完成后使用cmd（win+R 输入cmd 进入）测试下是否安装成功。在cmd下输入 node -v ，出现版本号即为安装成功。因为Nodejs已经集成了npm，所以npm也一起安装好了。同样可以cmd输入 npm -v 查看npm是否安装成功。

        

        现在，我们可以安装cordova和ionic了，cmd 输入命令：

  npm install -g cordova ionic

               

        -g 的意思是全局安装，这样我们就能在任一目录使用cordova和ionic的命令了。

        注：网上有资料说资源被墙，需要VPN翻墙才能安装，博主这里没有翻墙就安装成功了，所以大家可以先试试，如果安装失败再翻墙。

        安装完成后cmd输入 cordova -v 和ionic -v 查看是否安装成功。

        

        注：所需的其他开发环境JDK、Git、Android SDK。

 

        至此，环境搭建完成，下面我们创建一个ionic程序进行下测试。

        ionic官网提供了三个模板程序blank，tabs，sidemenu：http://ionicframework.com/getting-started/

        我们创建一个tabs ionic程序：

ionic start HelloWorld tabs

        其中HelloWorld是项目名。

        

        项目创建过程中会从github下载源码，需要我们等一会。

        创建完成后我们到开发目录下看一下，会出现一个HelloWorld的文件夹，这就是我们的项目目录，目录中有如下文件。

        

        这里的目录结构我们以后再说，现在为刚创建的程序添加安卓平台。

        首先进入项目目录，cmd执行命令

cd helloworld

        然后为刚创建的程序添加安卓平台

ionic platform add android

        

        build应用程序，在项目目录执行：

ionic build android

        

        静静的等下载完成。

        注：如果在第一次build时卡在了下载gradle.zip，可以采取去相对应的网站将相对应的gradle.zip下载下来。比如上图中在 https://services.gradle.org/distributions/gradle-2.14.1-all.zip 下载gradle包，我们先去该网站下载gradle-2.14.1-all.zip包，然后放到C:\Users\Administrator\.gradle\wrapper\dists\gradle-2.14.1-all\4cj8p00t3e5ni9e8iofg8ghvk7 目录下，解不解压都可，然后在cmd运行 ionic build android 命令。

        

        第一次build时会有很多下载，等所有下载都完成，就可以进行编译了。

        

        这样我们就编译成功了，在该目录下会生成一个apk程序，我们就可以在安卓模拟器上运行刚才的程序了。

ionic emulate android

        我们也可以直接真机测试。

ionic run android

        

        效果如图