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

需求：

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

问题：

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

操作：

一、获取手机通讯录
话不多说，先来官网的介绍，里面很详细https://www.html5plus.org/doc/zh_cn/contacts.html
放一下我的截图吧
1.在onload()中调用此方法，获取通讯录

2.this.getContacts()方法


如官网展示一样，返回的contacts数据格式为：

二、页面代码
页面需要一个数组，里面是多个对象，方便对其进行遍历。

三、对取到的数据进行处理
1.因此，定义AddressMessage的格式如下：
2.把取到的"displayName"(字符型)值和"phoneNumbers“(数组型)进行处理
（1）如何取值：
首先对取到的 contacts 值进行 forEach(item =>{})处理，获得 item.displayName ,然后把 item.phoneNumbers进行forEach(t =>{})，获取到 t.valuet
（2）处理 此处上截图

四：最终效果图

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

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