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

深藏阁楼爱情的钟 2022-03-16 15:37 1252阅读 0赞

官方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 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
    					})
    				});
    			}
    		}
    	}
    </script>
    
    <style>
    
    </style>
    复制代码

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