装饰你的手机通讯录-同步微信头像

本文介绍了如何使用NodeJS自动化同步微信好友的头像到手机通讯录,通过解析微信网页版的数据,下载头像并更新手机联系人照片。
摘要由CSDN通过智能技术生成

5月10日 坚果Pro 到手,Smartisan OS 很赞,但我不太喜欢手机联系人的头像,没特色、辨识度不高。
微信用多了,一看头像就能想到具体的人,要是联系人头像能和微信好友头像一样就好了。
phonecontacts

用蛮力,一个一个修改联系人头像当然可行,但这样的纯体力活程序员不应该做。
先网上搜了下,有类似需求,如“QQ头像如何同步到手机联系人”,但没看到解决方案,只有靠自己了。

以下是我的思路,先说明一下,我习惯手机联系人姓名、微信好友备注名都使用真名,也就是说二者能以此关联起来。

  1. 获取微信好友名称和头像,生成 name-photo-map
  2. 遍历手机联系人,根据联系人姓名去 name-photo-map 中查找,为联系人添加头像。

下面来看看具体实现。


1. 工具

  • Chrome浏览器
  • NodeJS

2. 获取微信全部好友的名称和头像

Chrome F12打开开发者工具,登录微信网页版,查看Network。
request
这个请求返回的是JSON,全部好友的信息都在 MemberList

  • 备注 对应 RemarkName
  • 昵称 对应 NickName
  • 头像 对应 HeadImgUrl

注意 RemarkName 我设置的是中文,这里显示的是乱码。这是Chrome没有使用UTF8编码导致的。
在请求上右键 Open in new tab,在新的标签页上 ctrl+s 将请求返回结果保存到文件 wx-contacts.json,我用vscode打开,信息都正常显示了。
rightclick charset
下面这段NodeJS程序用来解析JSON、下载头像图片、并以备注名作为图片的文件名。

var https = require('https');
var fs = require(
UniApp是一个基于Vue.js的跨平台应用开发框架,它允许开发者编写一套代码,同时构建iOS、Android、Web等多端应用。仿照微信通讯录页面的设计,你可以通过以下几个步骤来创建: 首先,在uni-app项目中,你需要安装一些必要的UI组件库,如`uni-charts`用于联系人头像,`uni-list`处理列表结构,`uni-input`用于搜索框等。 ```html <!-- app.vue --> <template> <view class="contact-list"> <search-box v-model="searchKeyword" placeholder="搜索联系人"></search-box> <list :data="filteredContacts" @itemtap="selectContact"></list> </view> </template> <script> import SearchBox from '@/components/SearchBox.vue'; import List from '@/components/List.vue'; export default { components: { SearchBox, List }, data() { return { searchKeyword: '', contacts: [], // 假设你有一个预置的联系人数组 filteredContacts: [] }; }, computed: { filteredContacts() { return this.contacts.filter(contact => contact.name.includes(this.searchKeyword)); } }, methods: { selectContact(item) { console.log('选择的联系人:', item); } } }; </script> ``` 在上面的代码中,我们定义了一个简单的搜索框和一个列表,列表的内容根据搜索关键字过滤。当用户点击列表项时,会触发`selectContact`方法。 注意这只是一个基础示例,实际页面可能需要更复杂的样式调整和功能实现,比如联系人的详细信息展示、分组显示、添加删除联系人等。如果你想要查看完整的代码,可以在开源社区搜索"uni-app微信通讯录样例"找到相关的教程或GitHub仓库。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值