Uniapp Android/IOS 获取手机通讯录-EW帮帮网

介绍

最近忙着开发支付宝小程序和app，下面给大家介绍一下 app 获取通讯录的全部过程吧，也是这也是我app开发中的一项需求吧。

效果图如下

在这里插入图片描述

勾选配置文件

使用uniapp开发的童鞋都知道有一个配置文件 manifest.json 简单的说一下，就是安卓/ios/小程序中一些基础的配置文件，你可以配置应用的图标及权限等等。

记住这个是一定要勾选的，不然你点击获取通讯录时，是会报错误的提示的，博主已踩过坑了
在这里插入图片描述

填写配置文件

说到配置文件，我们获取用户的通讯录就得使用到权限配置

Android部分

在这里插入图片描述

<uses-permission android:name="android.permission.GET_ACCOUNTS"/>
<uses-permission android:name="android.permission.WRITE_CONTACTS"/>
<uses-permission android:name="android.permission.READ_CONTACTS"/>

IOS部分

在这里插入图片描述
翻到下面会有通讯录相关的配置，这里你们自己看着写

源码视图配置

这里就不多讲了，直接上配置文件

"app-plus": {
	 /* 应用发布信息 */
        "distribute" : {
            /* android打包配置 */
            "android" : {
                "permissions" : [
                	 // 联系人
                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
                    "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>"
                ],
            },
			 /* ios打包配置 */
            "ios" : {
            "privacyDescription" : {
                    "NSContactsUsageDescription" : "我们需要访问您的通讯录以便为您提供联系人相关的服务。",
                }
			}
}

好了，以上基础的已经配置好了

获取通讯录部分

话不多讲，直接上代码

界面结构部分

<template>
	<view class="contacts_box">
		<view @click="getContacts" class="contacts_title">
			获取联系人信息
		</view>
		<view v-for="(item,index) in contact_list" :key='index' class="contacts_list_item">
			<view style="font-weight: 700;">
				联系人:{{item.displayName}}
			</view>
			<view>
				联系人电话:{{item.phoneNumbers[0].value}}
			</view>
		</view>
	</view>	
</template>

逻辑处理部分

<script>
	export default {
		data() {
			return {
				contact_list: [],
			}
		},
		methods: {
			getContacts() {
				if (uni.getSystemInfoSync().platform === 'android') {
					plus.android.requestPermissions(
						['android.permission.READ_CONTACTS'],
						(resultObj) => {
							const result = resultObj.granted;
							if (result.indexOf('android.permission.READ_CONTACTS') !== -1) {
								this._getContacts();
							} else {
								uni.showToast({
									title: '您拒绝了通讯录权限，请在设置中开启',
									icon: 'none'
								});
								uni.hideLoading();
							}
						},
						(error) => {
							console.log('请求权限失败: ' + JSON.stringify(error));
							uni.showModal({
								title: '权限请求失败',
								content: '应用需要读取通讯录权限才能为您提供更好的服务，请在设置中授予该权限。',
								showCancel: false
							});
							uni.hideLoading();
						}
					);
				} else if (uni.getSystemInfoSync().platform === 'ios') {
					this._getContacts(); // iOS 直接调用
				}
			},

			_getContacts() {
				// 获取系统通讯录
				plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, function(addressbook) {
					// 查找联系人
					addressbook.find([], function(contacts) {
						this.contact_list = contacts;
					}.bind(this), function(e) {
						console.log('查找联系人失败: ' + e.message);
						if (e.code === 20) {
							uni.showToast({
								title: '您拒绝了通讯录权限，请在设置中开启',
								icon: 'none'
							});
						}
					});
				}.bind(this), function(e) {
					console.log('获取通讯录失败: ' + e.message);
					if (e.code === 20) {
						uni.showToast({
							title: '您拒绝了通讯录权限，请在设置中开启',
							icon: 'none'
						});
					}
				});
			}

		}
	}
</script>

注意事项

特别提醒！！！

如果你要使用通讯录功能的话，一定记得完善信息，不然不会让你打包的下面就是我实名的情况。
实名地址： https://dev.dcloud.net.cn/pages/user/info

在这里插入图片描述
完结！！！

撒花 🎉🎉🎉

Uniapp Android/IOS 获取手机通讯录

介绍