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

AbnerMing 發(fā)布于2019-08-02 15:54 / 2522人閱讀

摘要：我們定義一個類的數(shù)據(jù)源組件，并向其中添加本地通訊錄中讀取出來的數(shù)據(jù)，因為比較特殊，數(shù)據(jù)源中每項的第一個元素為索引組的數(shù)據(jù)，點擊該條數(shù)據(jù)無法觸發(fā)和事件。自定義模塊這里想要導(dǎo)入自定義的庫，獲取通訊錄的聯(lián)系人的首字母拼音。

第五章和第六章間隔時間有點長，對不起大家了。下面繼續(xù)。

本節(jié)教程將要教會大家如何加載本地通訊錄。

導(dǎo)入項目
導(dǎo)入通訊錄
自定義js模塊
發(fā)送和訂閱page消息
將要學(xué)習(xí)的demo效果圖如下所示

導(dǎo)入完整項目

本節(jié)示例demo請參考下載地址，可以導(dǎo)入到設(shè)計器中學(xué)習(xí)。

這節(jié)教程中將要用到的組件有do_Contect、do_IndexListView，請大家前幾節(jié)教程所教授的方法，提前添加這兩個組件，并打成相應(yīng)調(diào)試包用于調(diào)試。

導(dǎo)入通訊錄
DeviceOne開發(fā)的do_Contact組件是針對手機本地通訊錄的增刪查改提供相應(yīng)功能的一個組件，而do_IndexListView是一個右邊帶索引的ListView組件，通過索引能快速定位到該索引下首條數(shù)據(jù)，常被用于類似通訊錄和歌曲列表等功能中。

所以想要在App中模擬手機通訊錄功能，只需簡單地將本地通訊錄里的數(shù)據(jù)讀取出來并將這些數(shù)據(jù)綁定給IndexListView中展示即可。

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

接下來再準(zhǔn)備數(shù)據(jù)module。我們定義一個MM類的數(shù)據(jù)源組件do_HashData，并向其中添加本地通訊錄中讀取出來的數(shù)據(jù)，因為do_IndexListView比較特殊，數(shù)據(jù)源中每項value的第一個元素為索引組的數(shù)據(jù)，點擊該條數(shù)據(jù)無法觸發(fā)touch和longTouch事件。

自定義js模塊
這里想要導(dǎo)入自定義的js庫，獲取通訊錄的聯(lián)系人的首字母拼音。