2013/06/16

jQuery Mobile + PhoneGap 快速打造 App

再次回到 mobile app 的世界。

最近接了一個 case,要做一個跨平台的 news feed,想到的組合就是 jQuery Mobile + PhoneGap,為了讓 code 更乾淨,也加入了 backbone.js 這個 MV* framework,說真的,這樣的組合我還沒開發過任何一支產品,本身是 back-end 起家,frontend 算是玩興趣的,兜一些小玩意還可以,開發大 project 就辛苦些...


用 jQuery mobile 兜 UI 比 native code 快了 n 倍,常用的 page view、table view、navigation bar...都可以在簡單的幾行 html 搞定。呈現 static 資料很容易,如果是 dynamic 資料對我這新手就...
分析需求之後,大概就幾個版型:category list、title list、content display,然後塞進不同的資料(來源可以是 api server 吐回來的 json)


Main menu 打算用 slide panel 來呈現,panel 這物件是要擺在 page 裡面的,那如果每個 page 都需要 panel 該怎做?
javascript - jquery mobile: do I have to create a new panel for every page - Stack Overflow
一份 menu 共用摟,我想到的是把 panel 獨立成一個 template,在 pageshow event 去加載
看到一些蠻炫的 panel


jQM 的 page sample 中,同個 html 嵌了多個 page,這在現實環境也是不合需求的。第一、全部的 page 放在同一頁肯定 code 會過長,第二、page 的內容會是 dynamic 的,page 本身應該只是個樣版
官網有提到動態載入 page 的方式:jQuery Mobile and Dynamic Page Generation
很明顯的沒有 router 與 template 的支援,code 相當冗長,於是就引入了 backbone.js 的 route 與 underscore.js 的 template

由於 jQM 與 backbone.js 都會監聽 hash change event,若要使用後者的 router,請參考


如果閒自己寫 html 太慢,可以使用 jQM UI builder


1 則留言:

  1. 謝謝分享!
    同時也推薦您 EZoApp 這套開發工具,
    同樣是利用 HTML+JS+CSS 來開發,
    也運用了 JQueryMobile 和 PhoneGap 的技術,
    在開發 Mobile Web 和 APP 上都相當方便快速
    推薦給您試用看看~ ^_^

    網站:http://www.ezoui.com/app/
    工具:http://jqmdesigner.appspot.com/designer.html
    影片:http://youtu.be/wzaubtL5az8

    回覆刪除