uniapp小程序项目中实现通讯录功能

原创

已于 2022-12-07 17:44:21 修改 · 4.9k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #小程序 #前端

于 2022-12-07 17:16:40 首次发布

最近小程序项目需求有通讯录这样的需求
简单效果图是这样的
在这里插入图片描述

首先，我们需要调后台接口获取姓名还有其他信息，将获取回来的中文名字转换为拼音，这里做的是转为姓名首字母大写的简写格式（比如：“安其拉” 转为“AQL”）这里只需要名字的第一个字的首字母，使用js的截取功能就能实现，中文转拼音这里我使用的是js-pinyin，将转换好的内容渲染到页面上。

第一步下载js-pinyin包
（安装依赖这里可以参考这篇文章）

npm install js-pinyin

第二步在main.js中引入js-pinyin

import pinyin from 'js-pinyin'

第三步在methdos函数中调用接口获取名字的数据，获取回来的数据结构如下图
在这里插入图片描述
第四步处理获取来的数据得到下面一个数据结构

// 处理获取的数据
for (let k in this.List) {
   
   
     this.employeeNameList.push(this.List[k].employeeName + '  ' + this.List[k].phoneNumber)
}

在这里插入图片描述
在对改数据结构进行处理，得到以下数据结构便于我们使用

let firstName = {
   
   };
			this.AlphabetList.forEach((item, index) => {
   
   
				firstName[item] = [];
				this.employeeNameList.forEach((el) => {
   
   
					/** 主要在这一句，el代表每个名字如 “安琪拉” ，
					  pinyin.getFirstLetter(el) 取的是名字的首字母 “AQL” ，
					  .substring(0, 1) 就是只取第一个字符 ‘A’ **/
					let first = pinyin.getFirstLetter(el).substring(0, 1);
					if (first == item) {
   
   
						firstName[item].push(el)
					}
				})

			})
			this.firstName = firstName

在这里插入图片描述
再看html代码部分，使用vant库中 van-index-bar 组件，不知道的可以参考 vant官网地址

<van-index-bar >
	<view wx:for="{
   
   {firstName}}" wx:for-index="key" wx:for-item="value">
		<!--显示 A-Z -->
		<van-index-anchor index='{
   
   {key}}'>
		</van-index-anchor>
		<!--遍历每个字母对应的名字数组-->
		 <view style="margin-left: 40rpx;height: 60rpx;line-height: 60rpx;color: #848484;padding: 15rpx;font-size: 42rpx;" wx:for='{
   
   {value}}' wx:for-item='employeeName'  @tap="callphone(`${employeeName}`)">{
   
   {
   
   employeeName}}
		</view>
	</view>
</van-index-bar>

第五步在html代码上绑定callphone事件，在methods中定义callphone事件，用于点击之后拨打带电话

// 传入号码拨打电话
			callphone(phone) {
   
   
				console.log('传入的电话', phone);
				let phonename = phone
				console.log('传入的电话名字', phonename);
				this.List.forEach((item, index) => {
   
   
					if (item.employeeName === phone) {
   
   
						phone = item.phoneNumber
					}
				})
				console.log(phone)
				const res = uni.