小白学ionic || 搭建第一个app

永远怀揣一颗学习之心，小白终会变大神

最近体验了一下时下很流行的前端开发框架ionic，以假乱真的页面和流畅的运行速度直逼原生应用，亲不自禁的爱上了它，下面来简单介绍下ionic。

Ionic是目前最有潜力的一款 HTML5 手机应用开发框架。

通过 SASS 构建应用程序，Ionic提供了很多 UI 组件来帮助开发者开发强大的应用。 ionic使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用ionic成为 Web 和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从web的角度开发手机应用，基于cordova（原PhoneGap）的编译平台，可以实现编译成各个平台的应用程序。

---------------------我是一条华丽的分割线---------------------

本例是在win10系统下搭建的一个android应用实例，待拿下macbook pro再更新ionic的ios实例。

1.首先，你需要安装node.js，因为 ionic CLI 是基于 Node.js 开发的，需要 Node.js runtime 才能跑起来，你直接下载后没用（前端没有个node.js怎么出来混）

登陆Node.js官网，下载适合你电脑的版本，有时候会比较慢，贡献一个我已经下载好的，4.4.4版本的百度云链接，提取码：k4zu，拿走不谢。下载后正常安装即可，我第一次安装node.js时，没有自动添加到环境变量，后来重新安装了一次才成功，即使没有自动添加拿也都不是事儿，手动添加即可，自行百度！

2.安装完node.js后，你便可以使用其集成的包管理工具npm（node package manager），安装ionic和cordova。

$ npm install -g cordova ionic

打开命令窗口，进入任何一个目录，执行上面的命令，需要注意的是：-g是在全局下添加cordova和ionic，g是global全局的意思，会保存到“c：\用户\AppData\Roaming\npm\node_modules目录下，AppData为隐藏文件，需要显示隐藏文件才可以看到；如果你想自定义路径安装，在命令窗口进入你自定义的路径，去掉-g再执行命令就可以了。”下载安装比较慢，请耐心等待。（可翻墙或使用淘宝镜像）

3.准备工作做好了以后，就该新建一个ionic_app了，胜利成果就在眼前了，保持清醒和淡定，go on~~~

可以使用ionic官方提供的几个app实例，有空白，带有标签和滑动菜单三个可选，我选择的是带有标签的那个，打开命令窗口，进入你计划存放的文件目录，执行命令ionic start myApp tabs，ionic会从github上下载文件到本地。下载完成后，目录机构如下图，app的源代码存在于www文件中，包括样式和js，可手动修改尝试。

• hooks //google之后这个目录应该是在编译cordova时自定义的脚本命令，方便整合到我们的编译系统和版本控制系统中
• plugins //cordova插件的目录，插件的安装下一节详述
• scss //scss文件，发布时编译这个目录下的文件输出到www的css目录中
• www //我们的开发目录，页面、样式、脚本和图片都放在这个目录下
• --css
• --img
• --js
• --lib
• --index.html
• bower.json //bower配置文件
• config.xml //Ionic的配置文件 ⱃ可以配置app的id，名称、描述起始页和一起其他配置
• gulpfile.js //gulp构建工具的执行文件，在这个文件中创建任务实现编译scss，css、js优化等
• ionic.project //Ionic的项目文件可以配置Ionic命令中livereload的监控文件
• package.json //npm配置文件

4.Last But Not Least，运行或者调试app，有浏览器，安卓模拟器和真机三种方式可供我们选择。

（1）直接在浏览器运行ionic_app：这是最快也是最方便的运行方式，打开命令窗口，进入www坐在目录，执行ionic serve，首次执行，会让你选择服务器地址，一般选择localhost，此时你的app就会显示在浏览器中，按f12，打开手机模式，就可以运行你的app了，有一点：浏览器是热部署的方式，当你修改完代码，点击保存后，浏览器就会重新启动服务，获取最新的代码，你的修改立刻就会展现出来。

进入www所在目录，执行以下命令：

ionic platform add android （添加android平台） ionic build android （生成android的apk文件） ionic emulate android （在模拟器或者真机上运行）

生成apk文件和运行以后，这两步可以合并成ionic run android一个命令，当修改程序代码后，执行这一个命令查看即可。

（3）使用手机运行ionic_app：在使用模拟器运行ionic_app步骤中执行完那几行创建运行代码后，使用数据线连接电脑，打开USB调试模式，修改连接方式为“媒体设备（MTP）”模式，测试手机为魅族

执行ionic run android命令，如果报错，说明手机连接没有成功，可多次拔插进行尝试

但是运行在Android真机上，会出现标签栏置于顶部的问题。将下面的代码复制粘贴到app.js的config配置下，标签栏就会乖乖的出现在底部了。。。

$ionicConfigProvider.platform.ios.tabs.style('standard');
$ionicConfigProvider.platform.ios.tabs.position('bottom');
$ionicConfigProvider.platform.android.tabs.style('standard');
$ionicConfigProvider.platform.android.tabs.position('standard');
$ionicConfigProvider.platform.ios.navBar.alignTitle('center');
$ionicConfigProvider.platform.android.navBar.alignTitle('left');
$ionicConfigProvider.platform.android.navBar.alignTitle('left');
$ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');
$ionicConfigProvider.platform.ios.views.transition('ios');
$ionicConfigProvider.platform.android.views.transition('android');

好了，以上就是搭建一个简单的app的过程，其中可能有不规范的地方，望大家指出，共同交流，一起学习，转载请注明出处http://www.jianshu.com/p/3a8d7e23ed79

ionic学习，我在路上。。。