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 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))