用ionic快速开发hybird App（已附源码,在下面+总结见解）
?
1.ionic簡(jiǎn)介
ionic 是用于敏捷開發(fā)APP的解決方案。核心思路是：利用成熟的前端開發(fā)技術(shù)，來(lái)寫UI和業(yè)務(wù)邏輯。也就是說(shuō)，就是一個(gè)H5網(wǎng)站，這個(gè)區(qū)別于react-native，native。即是：“寫一次，到處運(yùn)行”。從去年到現(xiàn)在，也是紅得發(fā)紫，很多APP相繼噴薄而出，至今也見(jiàn)過(guò)學(xué)多做得非常好的APP，當(dāng)然，是指在iOS的機(jī)器上體驗(yàn)到的。android不敢恭維。簡(jiǎn)介參見(jiàn)官網(wǎng)： http://cordova.apache.org/ http://ionicframework.com/ionic其實(shí)是cordova的升級(jí)版，所以在使用的時(shí)候，很多命令都是相似的，而且，涉及到插件的開發(fā)，也是使用cordova的命令，具體開發(fā)后面介紹。
?
2.ionic安裝
安裝教程也非常簡(jiǎn)單，幾條命令，可能會(huì)讓人奔潰的，就是GWF。 我能提供的解決思路，就是：cnpm（淘寶鏡像等鏡像方式），vpn.vps.甚至肉身FQ.....然后get start：http://ionicframework.com/getting-started/?
3.ionic初步使用調(diào)試，源碼查看：https://github.com/wfxiaolong/ionic-social-app?覺(jué)得有幫助的話，記得star.
2.接下來(lái)，要做的，就是常規(guī)的學(xué)習(xí)方式，看文檔。遵循原生的CSS，JS組件，一些特別的provide，看著官網(wǎng)的一些小例子，甚至別人寫得代碼，然后參考著運(yùn)行。就可以快速寫出好看的界面，以及處理一些基本的邏輯了，加上網(wǎng)絡(luò)請(qǐng)求，寫兩個(gè)小接口，登陸注冊(cè)用戶系統(tǒng)來(lái)一套，商品電商來(lái)一套....然后xxx，當(dāng)當(dāng)當(dāng)?shù)?#xff0c;不到兩天，一個(gè)小應(yīng)用就出來(lái)了。下面的圖片演示：（長(zhǎng)得好看，大部分是因?yàn)閕onic的自帶的UI空間設(shè)計(jì)得好...） 3.調(diào)試：
讀者可以試一下命令行：ionic serve -lc，這是ionic提供的一種調(diào)試模式。也就是：-l -c. 原話是：You can always run it from the command line using the live-reload and console flag.
a.在web端的效果會(huì)變成： 非常的性感！
b.如果是android機(jī)器，運(yùn)行：ionic run android -lc.會(huì)發(fā)現(xiàn)android上面的web頁(yè)面變成的遠(yuǎn)程電腦上地址。意味著你可以直接改代碼，然后andorid上面會(huì)動(dòng)態(tài)更新頁(yè)面（即自動(dòng)執(zhí)行刷新F5），其實(shí)都是對(duì)代碼的監(jiān)控和watchman一樣的邏輯。輪詢...這個(gè)功能真的太方便了！！！天啊，我之前還笨笨的自己電腦搭建一個(gè)web serve，然后手動(dòng)修改工程目錄下的route文件，利用自帶的路徑攔截（route的裝飾器模式）重定向所有的資源請(qǐng)求....
c.iOS的真機(jī)事實(shí)調(diào)試上：哈哈，反正我沒(méi)在真機(jī)上成功過(guò)，模擬器一直沒(méi)有更新...已經(jīng)跳過(guò)。但是這里可以使用一種取巧的方式：就是直接用UC瀏覽器，二維碼掃描上面的運(yùn)行ionic run android -lc后生成的URL...調(diào)試UI也是沒(méi)有問(wèn)題的...
d.還有官網(wǎng)推薦的兩種奇怪的（一點(diǎn)都不好用）真機(jī)調(diào)試方式：chrome 和safari的開發(fā)工具，搜搜設(shè)備，同一局域網(wǎng)下動(dòng)態(tài)監(jiān)聽(tīng)web內(nèi)容...
如果掌握了上面的調(diào)試模式，寫ionic項(xiàng)目將會(huì)變得非常平躺，舒服！不管是哪個(gè)平臺(tái)！
?
?4.ionic進(jìn)階：插件開發(fā)，源碼參考：https://github.com/wfxiaolong/ionic-plugin-damaiwechat
官方教程：http://ngcordova.com/docs/install/ https://cordova.apache.org/docs/en/latest/plugin_ref/spec.html#plugin
這里就可以直白的看出來(lái)，ionic是繼承自cordova的...... 先直接上簡(jiǎn)單的開發(fā)教程，讀者按照下面的步驟，都可以開發(fā)出一個(gè)hello world的插件：
1.使用plugman工具生成模板代碼：
a.install?plugman
b.plugman create --name helloWord --plugin_id com.plugin.helloWorld --plugin_version 1.0.0? //生成插件 會(huì)快速生成下面的目錄結(jié)構(gòu)：│- plugin.xml // 插件的配置腳本，可以實(shí)現(xiàn)各種操作，例如xcode plist中添加type,項(xiàng)目中添加lib等各種操作，甚至提示<info>什么的.. ├─src // android以及iOS工程文件的存放目錄 └─www
│-helloWord.js // 暴露出來(lái)，在ionic上使用的直接接口 c.plugman platform add --platform_name ios //src目錄下生成iOS插件的代碼（就一個(gè).m文件...）
d.plugman platform add --platform_name android //src目錄下生成android插件的代碼（還是一個(gè)源碼文件...）
2.修改helloWord.js文件 var exec = require('cordova/exec');
var helloWorld = {
// echo接口，msg為傳入的參數(shù)，success, error為回調(diào)函數(shù)
echo : function(msg, success, error) {
exec(success, error, "helloWorld", "echo", [msg]);
}
};
window.hello = helloWorld;
注意：這里直接把對(duì)象直接賦值到window上，其實(shí)是為了：1.調(diào)試調(diào)用方便 2.ngcordova不會(huì)每次都自動(dòng)創(chuàng)建一個(gè)factory...
官方的做法：是直接放到exports上的...
3.分別修改java和xcode文件中的代碼...(這里不在解釋.插件的開發(fā)本來(lái)就是需要有原生開發(fā)經(jīng)驗(yàn)的.具體可以對(duì)比查看上面的插件源碼)
? 4.cordova plugin add xxx（把插件通過(guò)絕對(duì)路勁直接引用，可以放在github上，git地址引用...）
? 5.代碼中引用...
? 6.我自己開發(fā)了一個(gè)插件：繼承支付寶以及微信支付，還有友盟社會(huì)會(huì)組件（分享，認(rèn)證登陸功能）的插件...也開發(fā)了一個(gè)星期左右，android是找的另一個(gè)同學(xué)開發(fā)的...
（運(yùn)行后的官方效果圖...）
?
?
5.前端的修改
東西挺多的，一個(gè)一個(gè)講了。
1.使用scss，是因?yàn)榭梢宰宑ss支持各種花式寫法，能更加具有可讀性性。加上一些工具壓縮打包：http://koala-app.com/
能快速的滿足業(yè)務(wù)邏輯需求，多快好省的完成各種花式頁(yè)面，例如，一元奪寶電商什么的？
2.使用ionic框架后，為了避免初始化的時(shí)候加載太多東西，我們可以用requireJS異步加載一些資源.
等到使用的時(shí)候才去加載顯示出來(lái)，當(dāng)然，程序使用一段時(shí)間后，資源還是不能釋放的。
這是前端的問(wèn)題，畢竟是網(wǎng)頁(yè)，可做各種優(yōu)化。例如少用圖片。復(fù)用dom（這也是reactjs做的最大的優(yōu)化，虛擬dom樹）等等...
3.頁(yè)面的復(fù)用以及js的解耦。我會(huì)將每個(gè)頁(yè)面都獨(dú)立分開來(lái)控制，用單獨(dú)的js來(lái)寫。每個(gè)js單獨(dú)一個(gè)controler.而不是全部寫在一個(gè)js文件中，官網(wǎng)的畢竟只是demo。
這樣的好處就是代碼管理會(huì)方便直觀很多，提高移植性，便于復(fù)用。
例如，一些內(nèi)容展示頁(yè)面，結(jié)構(gòu)是一樣的，只是內(nèi)容文字不同。如果有多個(gè)頁(yè)面的時(shí)候，我們一般可以直接根據(jù)傳入的url的加上一個(gè)變量來(lái)判斷。
但是，如果頁(yè)面還是有很多邏輯不同的話，我們至少還是可以復(fù)用html頁(yè)面的。根據(jù)自己定制的路由規(guī)則來(lái)決定。我一般會(huì)連js文件都復(fù)用了。
亦或者是一些工具類，util方法，至少不用再多造輪子。有時(shí)候甚至是控件也能多寫一些，寫成一些小的html，然后直接用。雖然我也覺(jué)得是奇怪的寫法，但是很多人會(huì)這么做。真奇怪。
4.補(bǔ)充一條，關(guān)于jQuery lite. ionic畢竟是不推薦使用jQuery的，推薦響應(yīng)式的寫法。但是有時(shí)候jQuery使用還是挺方便的，所以引入了一個(gè)輕量級(jí)jQuery.
其實(shí)還是有一些人不習(xí)慣，喜歡用jQuery（其實(shí)在一些業(yè)務(wù)邏輯下，使用還是更加方便的，而且一些UI庫(kù)都是依賴jQuery的寫法）這里推薦用zepto.比jQury輕量，更加適用于移動(dòng)端。
但是基本的功能都有的。
5.還有其它各種優(yōu)化也好，寫法等等，各位讀者需要自己敢于嘗試去探索了...畢竟學(xué)無(wú)止境...
?
6.繪制冰山圖
ionic框架就像一座冰山，浮在水面上的10%看起來(lái)并不危險(xiǎn)，最終讓你船毀人亡的是隱藏在下面的那90%。
實(shí)際上更合適的一個(gè)比喻是，學(xué)習(xí)ionic框架就像對(duì)一座冰山繪圖。
為了使用框架你必須學(xué)會(huì)框架里所有的內(nèi)容，花精力去把所有的內(nèi)容對(duì)應(yīng)到傳統(tǒng)的UI原生適配，甚至于是原生代碼的輔助改寫！
這個(gè)過(guò)程對(duì)于開發(fā)者的個(gè)人能力要求比較高，甚至于全棧化趨勢(shì)，有時(shí)候會(huì)略顯得不償失。
從長(zhǎng)期來(lái)看這個(gè)過(guò)程毫無(wú)意義，因?yàn)楸阶罱K都會(huì)融化。我已經(jīng)準(zhǔn)備跳出這個(gè)坑，敬而遠(yuǎn)之......
?
注.如果有遇到問(wèn)題的同學(xué)：歡迎加QQ群討論學(xué)習(xí)：238911405
可以聯(lián)系我，一起交流，找我做外包都可以，質(zhì)量用APP Store分類商品 排行第一的APP來(lái)保證....不管是原生的，還是hybird APP，不管是后臺(tái)還是后端。
注：博主最近肉翻到了新西蘭，想在這邊工作一段時(shí)間。由于時(shí)差問(wèn)題，所以一般的事情就直接在群里問(wèn)就好了...
?
posted on 2016-04-16 18:13 yanshanLove 閱讀(...) 評(píng)論(...) 編輯 收藏轉(zhuǎn)載于:https://www.cnblogs.com/Lxiaolong/p/5399008.html
總結(jié)
以上是生活随笔為你收集整理的用ionic快速开发hybird App（已附源码,在下面+总结见解）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 理解sqlalchemy与ORM
- 下一篇： java中商业数据计算时用到的类BigD