用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.
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
官方教程：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.前端的修改
東西挺多的，一個一個講了。
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.還有其它各種優化也好，寫法等等，各位讀者需要自己敢于嘗試去探索了...畢竟學無止境...
?
6.繪制冰山圖
ionic框架就像一座冰山，浮在水面上的10%看起來并不危險，最終讓你船毀人亡的是隱藏在下面的那90%。
實際上更合適的一個比喻是，學習ionic框架就像對一座冰山繪圖。
為了使用框架你必須學會框架里所有的內容，花精力去把所有的內容對應到傳統的UI原生適配，甚至于是原生代碼的輔助改寫！
這個過程對于開發者的個人能力要求比較高，甚至于全棧化趨勢，有時候會略顯得不償失。
從長期來看這個過程毫無意義，因為冰山最終都會融化。我已經準備跳出這個坑，敬而遠之......
?
注.如果有遇到問題的同學：歡迎加QQ群討論學習：238911405
可以聯系我，一起交流，找我做外包都可以，質量用APP Store分類商品 排行第一的APP來保證....不管是原生的，還是hybird APP，不管是后臺還是后端。
注：博主最近肉翻到了新西蘭，想在這邊工作一段時間。由于時差問題，所以一般的事情就直接在群里問就好了...
?
posted on 2016-04-16 18:13 yanshanLove 閱讀(...) 評論(...) 編輯 收藏轉載于:https://www.cnblogs.com/Lxiaolong/p/5399008.html
總結
以上是生活随笔為你收集整理的用ionic快速开发hybird App（已附源码,在下面+总结见解）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 理解sqlalchemy与ORM
- 下一篇： java中商业数据计算时用到的类BigD