uniapp踩坑(一):uniapp中获取手机通讯录好友,并展示昵称和号码

时间:2024-03-14 19:02:29

需求

获取手机通讯录中的好友列表并展示

问题

成功取到了手机通讯录好友数据,但是展示时要把昵称跟号码放在一个数组中,遍历展示,我无法对数据进行处理。

操作

一、获取手机通讯录
话不多说,先来官网的介绍,里面很详细https://www.html5plus.org/doc/zh_cn/contacts.html
放一下我的截图吧
1.在onload()中调用此方法,获取通讯录
uniapp踩坑(一):uniapp中获取手机通讯录好友,并展示昵称和号码
2.this.getContacts()方法
uniapp踩坑(一):uniapp中获取手机通讯录好友,并展示昵称和号码
uniapp踩坑(一):uniapp中获取手机通讯录好友,并展示昵称和号码
如官网展示一样,返回的contacts数据格式为:
uniapp踩坑(一):uniapp中获取手机通讯录好友,并展示昵称和号码
二、页面代码
页面需要一个数组,里面是多个对象,方便对其进行遍历。
uniapp踩坑(一):uniapp中获取手机通讯录好友,并展示昵称和号码
三、对取到的数据进行处理
1.因此,定义AddressMessage的格式如下:uniapp踩坑(一):uniapp中获取手机通讯录好友,并展示昵称和号码
2.把取到的"displayName"(字符型)值和"phoneNumbers“(数组型)进行处理
(1)如何取值:
首先对取到的 contacts 值进行 forEach(item =>{})处理,获得 item.displayName ,然后把 item.phoneNumbers进行forEach(t =>{}),获取到 t.valuet
(2)处理 此处上截图
uniapp踩坑(一):uniapp中获取手机通讯录好友,并展示昵称和号码
四:最终效果图
uniapp踩坑(一):uniapp中获取手机通讯录好友,并展示昵称和号码

这里说下我踩的坑
(1)开始想着肯定是 [{ },{ }] 这样格式进行遍历,才能保证昵称与手机号码无误,于是就一直在考虑如何把遍历获取到的 {”displayName“:小寒,“phoneNumbers”:88888888888}
这些对象进行拼接,网上搜了下Object.assign(),发现其对相同属性进行拼接时,只保留最后一个值,打印出的值永远是最后一个对象值。此法不可行。
(2)于是我就采用了
.push()
,闹的笑话是,我把数据处理成仅有一个对象了这种,发现刷新出来后,只会展示所有的昵称,手机号码不展示,此法不对。
[{”displayName“:[a,b,c,d…],“phoneNumbers”:[1,2,3,4…]
(3)不断尝试呗,最终找到上面所述的解决方法。

我是一个前端小白,这是我最近在做项目中遇到的问题,只是想与大家分享下我的处理过程,如果能帮到大家,那是我的荣幸,如果哪位大佬发现了我的bug,还请多多指教。