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

ionic 是用于敏捷开发APP的解决方案。核心思路是：利用成熟的前端开发技术，来写UI和业务逻辑。也就是说，就是一个H5网站，这个区别于react-native，native。便是：“写一次，处处运行”。

从去年到如今，也是红得发紫，不少APP相继喷薄而出，至今也见过学多作得很是好的APP，固然，是指在iOS的机器上体验到的。android不敢恭维。

简介参见官网：
http://cordova.apache.org/ http://ionicframework.com/

ionic实际上是cordova的升级版，因此在使用的时候，不少命令都是类似的，并且，涉及到插件的开发，也是使用cordova的命令，具体开发后面介绍。

安装教程也很是简单，几条命令，可能会让人奔溃的，就是GWF。
我能提供的解决思路，就是：cnpm（淘宝镜像等镜像方式），vpn.vps.甚至肉身翻墙.....

而后get start：http://ionicframework.com/getting-started/

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项目将会变得很是平躺，舒服！不论是哪一个平台！

前言：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文件中的代码...(这里不在解释.插件的开发原本就是须要有原生开发经验的.具体能够对比查看上面的插件源码)react

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

  5.代码中引用...ios

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

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

这一部分想讲的东西太多了，例如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.还有其它各类优化也好，写法等等，各位读者须要本身勇于尝试去探索了...毕竟学无止境...