uni-app在APP端获取通讯录信息

uni-app在APP端获取通讯录信息,说实话这个功能太恶心了,手机号码全都不能保密的,之前小编有遇到这种单子,小编并没有做。

代码

<!-- 基于HTML5+ API获取手机通讯录联系人(姓名,手机号) -->
<template>
	<view class="page">
		<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>
	.page{
		padding: 20upx; 
	}
</style>

页面效果:

 

 

 

本站资源除特别声明外,转载文章请声明文章出处
东泰博客 » uni-app在APP端获取通讯录信息

发表评论

切图仔日常笔记博客