html5模仿手机通讯录,uni-app获取手机通讯录（基于HTML5+）

官方API：https://www.html5plus.org/doc/zh_cn/contacts.html

话不多说，直接上代码

contacts.vue

获取联系人

{{item.displayName}}

{{subitem.value}}

var Contacts

export default {

data() {

return {

list: []

}

},

onShow() {

uni.setNavigationBarTitle({

title: '通讯录'

});

},

methods: {

getContacts: function() {

var that = this

// 获取通讯录对象

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

uni.showToast({

title: '获取通讯录对象成功',

duration: 2000

})

console.log('获取通讯录对象成功')

console.log(addressbook)

// 查找联系人

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

uni.showToast({

title: '获取联系人成功',

duration: 2000

})

console.log('获取联系人成功')

console.log(JSON.stringify(contacts))

that.list = contacts

}, function () {

uni.showToast({

title: '获取联系人失败',

duration: 2000

})

},{multiple:true});

}, function ( e ) {

uni.showToast({

title: '获取通讯录对象失败:' + e.message,

duration: 2000

})

});

}

}

}

注：由于hx调试输出console.log()不能直接输出对象，故用JSON.stringify()转一下，好作调试输出。示意：console.log(JSON.stringify(contacts))