一個App完成入門篇（六）- 完成通信錄頁面

第五章和第六章間隔時間有點長，對不起你們了。下面繼續。

本節教程將要教會你們如何加載本地通信錄。

導入項目
導入通信錄
自定義js模塊
發送和訂閱page消息
將要學習的demo效果圖以下所示

1. 導入完整項目

本節示例demo請參考下載地址，能夠導入到設計器中學習。

這節教程中將要用到的組件有do_Contect、do_IndexListView，請你們前幾節教程所教授的方法，提早添加這兩個組件，並打成相應調試包用於調試。

1. 導入通信錄
   DeviceOne開發的do_Contact組件是針對手機本地通信錄的增刪查改提供相應功能的一個組件，而do_IndexListView是一個右邊帶索引的ListView組件，經過索引能快速定位到該索引下首條數據，常被用於相似通信錄和歌曲列表等功能中。

因此想要在App中模擬手機通信錄功能，只需簡單地將本地通信錄裏的數據讀取出來並將這些數據綁定給IndexListView中展現便可。

先給do_IndexListView定義一個模板頁addressCell.ui，在addressCell.ui.js中定義好數據映射，再將do_IndexListView的template屬性指向addressCell.ui的地址，這樣ViewModel就定義好了。

接下來再準備數據module。咱們定義一個MM類的數據源組件do_HashData，並向其中添加本地通信錄中讀取出來的數據，由於do_IndexListView比較特殊，數據源中每項value的第一個元素爲索引組的數據，點擊該條數據沒法觸發touch和longTouch事件。

1. 自定義js模塊這裏想要導入自定義的js庫，獲取通信錄的聯繫人的首字母拼音。