用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.甚至肉身翻牆.....

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

 

6.繪制冰山圖

ionic框架就像一座冰山,浮在水面上的10%看起來並不危險,最終讓你船毀人亡的是隱藏在下面的那90%。

實際上更合適的一個比喻是,學習ionic框架就像對一座冰山繪圖。

為了使用框架你必須學會框架里所有的內容,花精力去把所有的內容對應到傳統的UI原生適配,甚至於是原生代碼的輔助改寫!

這個過程對於開發者的個人能力要求比較高,甚至於全棧化趨勢,有時候會略顯得不償失。

從長期來看這個過程毫無意義,因為冰山最終都會融化。我已經准備跳出這個坑,敬而遠之......

 

注.如果有遇到問題的同學:歡迎加QQ群討論學習:238911405
可以聯系我,一起交流,
找我做外包都可以,質量用APP Store分類商品 排行第一的APP來保證....不管是原生的,還是hybird APP,不管是后台還是后端。

注:博主最近肉翻到了新西蘭,想在這邊工作一段時間。由於時差問題,所以一般的事情就直接在群里問就好了...

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM