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
效果如图