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

Native+Html 5的混合開發
【功能簡介】
網易博客Android V1.0 功能概況:
◆“發布日志、心情,圖片日志”等基礎發布功能:

◆“瀏覽個人中心動態、他人博客、日志、心情、相冊”等基礎閱讀功能:

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

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

通知
◆拍照、通知欄通知等的實現( native擴展 )
客戶端和手機的相互操作(如拍照,通知欄),采用phonegap暴露的js api 來調用實現。

拍照

文件上傳

通知鈴聲設置
◆Css3的應用

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