Native+Html 5移動(dòng)應(yīng)用開(kāi)發(fā)實(shí)踐 網(wǎng)易博客Android客戶端
【項(xiàng)目歷程】歷時(shí)三個(gè)月,經(jīng)過(guò)交互、前端設(shè)計(jì)、開(kāi)發(fā)、測(cè)試,近期網(wǎng)易博客Android客戶端即將面世,屆時(shí)廣大使用Android 手機(jī)的博友們可以隨地隨地 寫(xiě)日志、心情,評(píng)論,推薦。
早在去年年底左右,技術(shù)組已經(jīng)著手調(diào)研技術(shù)可行性,***選型 native結(jié)合Html 5的混合開(kāi)發(fā)方式,并于今年3月底發(fā)布了***個(gè)可行性示例。
此時(shí)積累了如下實(shí)踐成果:
自主開(kāi)發(fā)的面向移動(dòng)客戶端的JS mobile web Framework (mwf)
mwf框架包含:基礎(chǔ)庫(kù)(節(jié)點(diǎn)操作、觸摸事件等),控件庫(kù)(事件調(diào)度、緩存、ajax引擎、模板引擎等)、移動(dòng)庫(kù)(通知、文件處理、地理位置等)
◆Patched Phonegap Framework (Phonegap 基礎(chǔ)上的patch)
修正了如Fling事件被skip、Focus問(wèn)題與軟鍵盤(pán)處理、Fixed position、Click延遲等問(wèn)題(更多內(nèi)容請(qǐng)查看51CTO獨(dú)家專題: 跨平臺(tái)移動(dòng)web應(yīng)用框架PhoneGap開(kāi)發(fā)入門(mén))
◆Native Util (項(xiàng)目需求增加的工具類,如消息通知、menu等)
接著4月份開(kāi)始,該技術(shù)開(kāi)始應(yīng)用到博客Android的產(chǎn)品。經(jīng)過(guò)團(tuán)隊(duì)各位同事的協(xié)作,現(xiàn)在產(chǎn)品的雛形如下:

Native+Html 5的混合開(kāi)發(fā)
【功能簡(jiǎn)介】
網(wǎng)易博客Android V1.0 功能概況:
◆“發(fā)布日志、心情,圖片日志”等基礎(chǔ)發(fā)布功能:

◆“瀏覽個(gè)人中心動(dòng)態(tài)、他人博客、日志、心情、相冊(cè)”等基礎(chǔ)閱讀功能:

◆“推薦、評(píng)論、留言、處理各種消息中心”等基本博客操作功能:

【 技術(shù)解析】
◆客戶端和服務(wù)器的交互
博客客戶端其實(shí)可以理解為一個(gè)chrome瀏覽器(webkit引擎),與服務(wù)器的交互采用web開(kāi)發(fā)常用的dwr操作數(shù)據(jù)的方式,這樣方便了web開(kāi)發(fā)人員平滑的過(guò)度到手機(jī)客戶端的開(kāi)發(fā),同時(shí)充分發(fā)揮出了瀏覽器調(diào)試工具的作用。
◆客戶端數(shù)據(jù)的緩存(Html 5)
考慮到移動(dòng)設(shè)備流量的寶貴性及離線的可訪問(wèn)性,產(chǎn)品將用戶訪問(wèn)的數(shù)據(jù)緩存于本地,用戶在使用過(guò)產(chǎn)品后,后續(xù)的使用均默認(rèn)從緩存獲取數(shù)據(jù),只有當(dāng)用戶顯式的刷新時(shí)才會(huì)從服務(wù)器重新獲取數(shù)據(jù)。
在自主開(kāi)發(fā)mwf框架里集成了Local Storage 的緩存處理,并且針對(duì)本地存儲(chǔ)做了兩點(diǎn)優(yōu)化
- 對(duì)每個(gè)要存儲(chǔ)的數(shù)據(jù)增加臟數(shù)據(jù)標(biāo)志位的判斷。解決在實(shí)踐中遇到Local Storage 的刪除操作完成后,緩存數(shù)據(jù)并未真正刪除的問(wèn)題。
- 在本地存儲(chǔ)的基礎(chǔ)上增加了對(duì)象內(nèi)存緩存,提高了讀取數(shù)據(jù)的性能。
◆消息的實(shí)時(shí)通知(Html 5)
用戶的互動(dòng)操作(如評(píng)論、留言、關(guān)注、加博友的場(chǎng)景)中采用了實(shí)時(shí)雙向推送技術(shù)WebSocket,通過(guò)native擴(kuò)展的接口友好的呈現(xiàn)給用戶,該技術(shù)的應(yīng)用很大程度的改善了用戶的互動(dòng)體驗(yàn)。

通知
◆拍照、通知欄通知等的實(shí)現(xiàn)( native擴(kuò)展 )
客戶端和手機(jī)的相互操作(如拍照,通知欄),采用phonegap暴露的js api 來(lái)調(diào)用實(shí)現(xiàn)。

拍照

文件上傳

通知鈴聲設(shè)置
◆Css3的應(yīng)用

附件(小組android內(nèi)測(cè)版):解壓后安裝 androidblog-0.9.1.7beta.apk
androidblog-0.9.1.7beta.rar(550.31K)