用ionic快速开发hybird App（已附源码,在下面+总结见解）

1.ionic简介

ionic 是用于敏捷开发APP的解决方案。核心思路是：利用成熟的前端开发技术，来写UI和业务逻辑。也就是说，就是一个H5网站，这个区别于react-native，native。即是：“写一次，到处运行”。从去年到现在，也是红得发紫，很多APP相继喷薄而出，至今也见过学多做得非常好的APP，当然，是指在iOS的机器上体验到的。android不敢恭维。简介参见官网：
http://cordova.apache.org/
http://ionicframework.com/

ionic其实是cordova的升级版，所以在使用的时候，很多命令都是相似的，而且，涉及到插件的开发，也是使用cordova的命令，具体开发后面介绍。

2.ionic安装

安装教程也非常简单，几条命令，可能会让人奔溃的，就是GWF。
我能提供的解决思路，就是：cnpm（淘宝镜像等镜像方式），vpn.vps.甚至肉身FQ.....然后get start：http://ionicframework.com/getting-started/

3.ionic初步使用调试，源码查看：https://github.com/wfxiaolong/ionic-social-app 觉得有帮助的话，记得star.

1.如果ionic run 出来了 hello world那么恭喜你，可以考虑看下面的内容了.(还没到这步的同学，就只能快速当做小说一样的看下面的东西了)
2.接下来，要做的，就是常规的学习方式，看文档。遵循原生的CSS，JS组件，一些特别的provide，看着官网的一些小例子，甚至别人写得代码，然后参考着运行。就可以快速写出好看的界面，以及处理一些基本的逻辑了，加上网络请求，写两个小接口，登陆注册用户系统来一套，商品电商来一套....然后xxx，当当当的，不到两天，一个小应用就出来了。下面的图片演示：（长得好看，大部分是因为ionic的自带的UI空间设计得好...）

3.调试：
读者可以试一下命令行：ionic serve -lc，这是ionic提供的一种调试模式。也就是：-l -c. 原话是：You can always run it from the command line using the live-reload and console flag.
a.在web端的效果会变成：

非常的性感！

b.如果是android机器，运行：ionic run android -lc.会发现android上面的web页面变成的远程电脑上地址。意味着你可以直接改代码，然后andorid上面会动态更新页面（即自动执行刷新F5），其实都是对代码的监控和watchman一样的逻辑。轮询...这个功能真的太方便了！！！天啊，我之前还笨笨的自己电脑搭建一个web serve，然后手动修改工程目录下的route文件，利用自带的路径拦截（route的装饰器模式）重定向所有的资源请求....
c.iOS的真机事实调试上：哈哈，反正我没在真机上成功过，模拟器一直没有更新...已经跳过。但是这里可以使用一种取巧的方式：就是直接用UC浏览器，二维码扫描上面的运行ionic run android -lc后生成的URL...调试UI也是没有问题的...
d.还有官网推荐的两种奇怪的（一点都不好用）真机调试方式：chrome 和safari的开发工具，搜搜设备，同一局域网下动态监听web内容...

如果掌握了上面的调试模式，写ionic项目将会变得非常平躺，舒服！不管是哪个平台！

4.ionic进阶：插件开发，源码参考：https://github.com/wfxiaolong/ionic-plugin-damaiwechat

前言：ionic的插件开发是挺烦人的.如果你想自己开发插件，一定要认真看完下面的教程。
官方教程：http://ngcordova.com/docs/install/    https://cordova.apache.org/docs/en/latest/plugin_ref/spec.html#plugin
这里就可以直白的看出来，ionic是继承自cordova的......

先直接上简单的开发教程，读者按照下面的步骤，都可以开发出一个hello world的插件：
1.使用plugman工具生成模板代码：
　　a.install plugman
　　b.plugman create --name helloWord --plugin_id com.plugin.helloWorld --plugin_version 1.0.0    //生成插件

会快速生成下面的目录结构：│- plugin.xml　　　　 // 插件的配置脚本，可以实现各种操作，例如xcode plist中添加type,项目中添加lib等各种操作，甚至提示<info>什么的..
├─src　　　　　　　　　//　android以及iOS工程文件的存放目录
└─www
　　│-helloWord.js　　// 暴露出来，在ionic上使用的直接接口

　　c.plugman platform add --platform_name ios　　　　　　　//src目录下生成iOS插件的代码（就一个.m文件...）　　　　
　　d.plugman platform add --platform_name android　　　　　//src目录下生成android插件的代码（还是一个源码文件...）

2.修改helloWord.js文件

var exec = require('cordova/exec');
var helloWorld = {
　　// echo接口，msg为传入的参数，success, error为回调函数
　　echo : function(msg, success, error) {
　　　　exec(success, error, "helloWorld", "echo", [msg]);
　　}
};

window.hello = helloWorld;

注意：这里直接把对象直接赋值到window上，其实是为了：1.调试调用方便 2.ngcordova不会每次都自动创建一个factory...
官方的做法：是直接放到exports上的...

　3.分别修改java和xcode文件中的代码...(这里不在解释.插件的开发本来就是需要有原生开发经验的.具体可以对比查看上面的插件源码)

4.cordova plugin add xxx（把插件通过绝对路劲直接引用，可以放在github上，git地址引用...）

5.代码中引用...

6.我自己开发了一个插件：继承支付宝以及微信支付，还有友盟社会会组件（分享，认证登陆功能）的插件...也开发了一个星期左右，android是找的另一个同学开发的...

　　（运行后的官方效果图...）

5.前端的修改

这一部分想讲的东西太多了，例如css使用scss? 异步加载requireJS? 抑或是js中的解耦？页面复用？......
东西挺多的，一个一个讲了。

1.使用scss，是因为可以让css支持各种花式写法，能更加具有可读性性。加上一些工具压缩打包：http://koala-app.com/
能快速的满足业务逻辑需求，多快好省的完成各种花式页面，例如，一元夺宝电商什么的？

2.使用ionic框架后，为了避免初始化的时候加载太多东西，我们可以用requireJS异步加载一些资源.
等到使用的时候才去加载显示出来，当然，程序使用一段时间后，资源还是不能释放的。
这是前端的问题，毕竟是网页，可做各种优化。例如少用图片。复用dom（这也是reactjs做的最大的优化，虚拟dom树）等等...

3.页面的复用以及js的解耦。我会将每个页面都独立分开来控制，用单独的js来写。每个js单独一个controler.而不是全部写在一个js文件中，官网的毕竟只是demo。
这样的好处就是代码管理会方便直观很多，提高移植性，便于复用。
例如，一些内容展示页面，结构是一样的，只是内容文字不同。如果有多个页面的时候，我们一般可以直接根据传入的url的加上一个变量来判断。
但是，如果页面还是有很多逻辑不同的话，我们至少还是可以复用html页面的。根据自己定制的路由规则来决定。我一般会连js文件都复用了。
亦或者是一些工具类，util方法，至少不用再多造轮子。有时候甚至是控件也能多写一些，写成一些小的html，然后直接用。虽然我也觉得是奇怪的写法，但是很多人会这么做。真奇怪。

4.补充一条，关于jQuery lite. ionic毕竟是不推荐使用jQuery的，推荐响应式的写法。但是有时候jQuery使用还是挺方便的，所以引入了一个轻量级jQuery.
其实还是有一些人不习惯，喜欢用jQuery（其实在一些业务逻辑下，使用还是更加方便的，而且一些UI库都是依赖jQuery的写法）这里推荐用zepto.比jQury轻量，更加适用于移动端。
但是基本的功能都有的。

5.还有其它各种优化也好，写法等等，各位读者需要自己敢于尝试去探索了...毕竟学无止境...