Native+Html 5行動裝置 App開發實踐 網易部落格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延遲等問題更多內容請查看BKJIA獨家專題： 跨平台移動web應用程式框架PhoneGap開發入門）

◆Native Util (項目需求增加的工具類，如訊息通知、menu等)

接著4月份開始，該技術開始應用到部落格Android的產品。經過團隊各位同事的協作，現在產品的雛形如下：

Native+Html 5的混合開發

功能簡介】

網易部落格Android V1.0 功能概況：

◆“發布日誌、心情，圖片日誌”等基礎發布功能：

◆“瀏覽個人中心動態、他人部落格、日誌、心情、相簿”等基礎閱讀功能：

◆“推薦、評論、留言、處理各種訊息中心”等基本部落格操作功能：

 技術解析】

◆用戶端和伺服器的互動

部落格用戶端其實可以理解為一個chrome瀏覽器(webkit引擎)，與伺服器的互動採用web開發常用的dwr操作資料的方式，這樣方便了web開發人員平滑的過度到手機用戶端的開發，同時充分發揮出了瀏覽器調試工具的作用。

◆用戶端資料的緩衝(Html 5)

考慮到行動裝置流量的寶貴性及離線的可訪問性，產品將使用者訪問的資料緩衝於本地，使用者在使用過產品後，後續的使用均預設從緩衝擷取資料，只有當使用者顯式的重新整理時才會從伺服器重新擷取資料。

在自主開發mwf架構裡整合了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)