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

本文主要是介绍uni-app获取手机通讯录（基于HTML5+），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 

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

 

话不多说，直接上代码

contacts.vue

<template><view><button type="primary" @tap="getContacts">获取联系人</button><block  v-for="(item,index) in list" :key="index"><view>{{item.displayName}}</view><block v-for="(subitem,idx) in item.phoneNumbers" :key="idx"><view>{{subitem.value}}</view></block></block></view>
</template><script>var Contactsexport 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})});}}}
</script><style></style>
复制代码

 

 

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

这篇关于uni-app获取手机通讯录（基于HTML5+）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---