android h5 选择联系人,h5+ 读取手机联系人并渲染

完整的代码

v-for="(contactObj, index) in item.contactArr"

:key="index"

:title="contactObj.displayName"

:label="contactObj.phoneNumbers.value"

@click.native="onSelectContacts(contactObj)"

>

import vPinyin from '@/utils/vue-py-function.js'

export default {

data () {

return {

// 给mt-index-list组件设一个高度，随意设，反正都要使用js更改

mtIndexListHeight: 500,

contactList: [],

contactListArr: []

}

},

created () {

},

mounted () {

let windowWidth = document.documentElement.clientWidth

this.mtIndexListHeight = document.documentElement.clientHeight - 11.6 * windowWidth / 100 - 30

},

methods: {

// 获取通讯录列表数据

getContact () {

var that = this

if (!window.plus) return

// 获取通讯录对象

window.plus.contacts.getAddressBook(window.plus.contacts.ADDRESSBOOK_PHONE, function (addressbook) {

// 查找联系人

addressbook.find(['displayName', 'phoneNumbers'], function (contacts) {

that.dataFormatting(contacts)

}, function () {

this.$toast({ message: '获取联系人失败' })

}, {multiple: true})

}, function (e) {

this.$toast({ message: '获取通讯录对象失败:' + e.message })

})

},

// 通讯录列表的数据处理

dataFormatting (contacts) {

var that = this

contacts.forEach(item => {

let contactObj = {}

// 这里必须得判断一下，因为他会把微信通讯录也一并读取了，但是微信通讯录只有分享，没有号码

if (item.displayName && item.phoneNumbers[0]) {

contactObj.displayName = item.displayName

contactObj.phoneNumbers = item.phoneNumbers[0]

that.contactList.push(contactObj)

}

})

this.indexContactList()

},

// 将通讯录数据处理和 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' 对应的数组

indexContactList () {

'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').forEach(initial => {

let contactArr = this.contactList.filter(contact => {

// 获取第一个汉字的拼音首字母

var firstChineseInitial = this.getFirstChineseInitial(contact.displayName.substr(0, 1))

// 判断第一个汉字的拼音首字母 === ABCDEFGHIJKLMNOPQRSTUVWXYZ

if (firstChineseInitial === initial) return contact

})

this.contactListArr.push({

initial,

contactArr

})

})

},

// 调函数获取第一个汉字的首字母

getFirstChineseInitial (firstChinese) {

return vPinyin.chineseToPinYin(firstChinese).substr(0, 1)

},

// 点击选择某一联系人

onSelectContacts (contactObj) {

console.log(contactObj)

}

}

}

该功能通过h5+ api的contacts获取到手机通讯录数据，然后使用mint-ui的indexlist排序显示出来。

要注意数据的处理，特别是使用mt-cell，一定要注意数据格式和解构。

使用indexlist排序涉及到第一个中文的拼音首字母，我使用的是vue-pyconst和vue-py-function文件里的外部js。(vue-pyconst.js太长，我这里就不复制粘贴了)

使用mint-ui后，样式可能会错乱，超出被隐藏，没有完全分配布局等等....,要自己去修改样式。

每一次访问通讯录后，要清空，不然数据会重复请求叠加。

vue-py-function.js

import { pinyin } from './vue-pyconst.js'

export default {

chineseToPinYin: function (l1) {

var l2 = l1.length

var I1 = ''

var reg = new RegExp('[a-zA-Z0-9]')

for (var i = 0; i < l2; i++) {

var val = l1.substr(i, 1)

var name = this.arraySearch(val, pinyin)

if (reg.test(val)) {

I1 += val

} else if (name !== false) {

I1 += name

}

}

I1 = I1.replace(/ /g, '-')

while (I1.indexOf('--') > 0) {

I1 = I1.replace('--', '-')

}

return I1

},

arraySearch: function (l1, l2) {

for (var name in pinyin) {

if (pinyin[name].indexOf(l1) !== -1) {

return this.ucfirst(name)

}

}

return false

},

ucfirst: function (l1) {

if (l1.length > 0) {

var first = l1.substr(0, 1).toUpperCase()

var spare = l1.substr(1, l1.length)

return first + spare

}

}

}