用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.還有其它各種優化也好，寫法等等，各位讀者需要自己敢于嘗試去探索了...畢竟學無止境...