跨平台开发框架Ionic学习之路------1

Ionic是什么?

ionic是一个用来开发混合手机应用的，开源的，免费的代码库。可以优化html、css和js的性能，构建高效的应用程序，而且还可以用于构建Sass和AngularJS的优化。ionic会是一个可以信赖的框架。

ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。绑定了AngularJS和Sass。这个框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。

本人文笔有限,以上摘自百度百科。Ionic我认为其本质就是基于phoneGap平台的跨平台快速开发框架。

如何搭建Ionic开发环境

http://www.runoob.com/ionic/ionic-install.html 参见这个网站有详细的说明,我就大致说一下过程的,随便把这个过程中的坑帮助初学者填一下吧。

1、首先安装Node.js,根据自己的操作系统选择安装的版本,安装之后检测一下是否安装成功。这个过程没什么坑。

2、接下来需要配置你熟悉的移动开发平台,我熟悉android,故我配置的是android的环境。这里我说一下我这里的配置,以免初学者走很多弯路。

配置android开发环境需要下载android sdk开发包。http://www.cnblogs.com/bjzhanghao/archive/2012/11/14/android-platform-sdk-download-mirror.html

在这个位置选择适合自己操作系统的sdk,然后解压到一个磁盘下,路径最好不好带中文字符。接着配置android sdk的环境变量。

电脑右键属性,然后点击高级系统设置

在系统变量去新建一个ANDROID_HOME然后值是刚才你解压包的根目录的路径。我的是E:\sdk 我的E盘下的sdk文件夹就是我sdk的根目录。

接着找到已存在的Path这一项在最后面追加android sdk目录下面的tools与platform-tools目录。例如我的是 ;E:\sdk\platform-tools;E:\sdk\tools 。

注意前面有一个;

然后我们测试一下是否正确配置,在命令符窗体输入 adb 与android命令 看是否有对应的反馈。输入adb提示 adb不是内部或外部命令,也不是可运行的程序或批处理文件。

输入android也提示上面的提示。那就需要android sdk是否环境变量是否配置正确,确认配置成功了之后,建议将机器重启一下,再尝试一下这两个命令。

3.接着安装ionic开发环境,Window 和 Linux 上打开命令行工具执行以下命令：

npm install -g cordova ionic

这个是下载cordova ionic相关的文件的,这些文件貌似还有点大差不多1G的左右,这时候你就会发现界面卡着一动不动,这个步骤就需要翻墙了,去下载了,我推荐一个免费的VPN蓝灯。

开了免费的vpn我们发现还是一动不动的,可能与网速有关。这一步困扰了我一晚的,最后在一个博主的文章里面找到了配置国内镜像的方法,很快就下好了。

配置如下:

npm config set registry https://registry.npm.taobao.org

npm info underscore

   这是两个命令分开输入

（如果上面配置正确这个命令会有字符串response）

输入这两个命令之后,紧接着再次输入 npm install -g cordova ionic  命令就会发现在进度条在不断的变化,等他讲相关的文件下载好。

4.创建应用

在命令窗口运行   ionic start myApp tabs

myApp应用的名称,tabs 是ionic自带的3中应用模版:

tabs:创建带top栏和bottom栏的示例项目 

sidemenu:创建带有左侧有menu栏的示例项目

blank:创建空白项目

ps.创建项目的路径默认在C:\Users\xx 下面。

5.添加运行平台

运行命令命令:

cd myApp           --切换执行目录

ionic platform add android           --创建android项目,添加ios的必须是需要在mac环境下面

ionic build android                         --开始编译android项目 这个过程中可能会遇到各种各样的问题。有什么问题欢迎骚扰加群:361679543

编译成功会提示apk文件的输出文件目录,接着就可以安装了。

搭建一个ionic项目就结束了,过程中出现了各种各样的情况,在网上找资料都一一解决了。