最近小程序项目需求有通讯录这样的需求
简单效果图是这样的
首先，我们需要调后台接口获取姓名还有其他信息，将获取回来的中文名字转换为拼音，这里做的是转为姓名首字母大写的简写格式（比如：“安其拉” 转为“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.getSystemInfoSync();
// ios系统默认有个模态框
if (res.platform == 'ios') {
uni.makePhoneCall({
phoneNumber: phone,
success() {
console.log('拨打成功了');
},
fail() {
console.log('拨打失败了');
}
})
} else {
//安卓手机手动设置一个showActionSheet
uni.showActionSheet({
itemList: [phone, '呼叫'],
success: function(res) {
console.log(res);
if (res.tapIndex == 1) {
uni.makePhoneCall({
phoneNumber: phone
})
}
}
})
}
}
}
细节比较繁琐，整体代码给大家奉上，代码可以根据自己需求进行修改。
<template>
<view class="">
<view class="" v-if="show"></view>
<van-index-bar v-else>
<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>
</view>
</template>
<script>
import pinyin from "wl-pinyin";
export default {
data() {
return {
show: false,
token: '',
phoneNumber: '',
firstName: {
},
employeeNameList: [],
indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
AlphabetList: ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T",
"W", "X", "Y", "Z"
],
List: [{
"createdAt": "2020-08-27 18:06:53",
"employeeName": "安琪拉",
"objectId": "4a3eed5344",
"phoneNumber": "18012251502",
"serialNumber": "1",
"updatedAt": "2020-08-27 18:06:53",
},
{
"createdAt": "2020-08-27 18:06:53",
"employeeName": "蔡文姬",
"objectId": "4a3eed5344",
"phoneNumber": "18012251500",
"serialNumber": "1",
"updatedAt": "2020-08-27 18:06:53",
},
{
"createdAt": "2020-08-27 18:06:53",
"department": "总经理办公室",
"employeeName": "貂蝉",
"objectId": "4a3eed5344",
"phoneNumber": "15330220110",
"serialNumber": "1",
"staffPosition": "总经理",
"updatedAt": "2020-08-27 18:06:53",
"username": "18012251502"
},
{
"createdAt": "2020-08-27 18:06:53",
"department": "总经理办公室",
"employeeName": "东皇太一",
"objectId": "4a3eed5344",
"phoneNumber": "10000220110",
"serialNumber": "1",
"staffPosition": "总经理",
"updatedAt": "2020-08-27 18:06:53",
"username": "18012251502"
},
{
"createdAt": "2020-08-27 18:06:53",
"department": "生产部",
"employeeName": "吕布",
"objectId": "7236fed315",
"phoneNumber": "18257122100",
"serialNumber": "41",
"staffPosition": "装配",
"updatedAt": "2020-08-27 18:06:53",
"username": "18257122100"
},
{
"createdAt": "2020-08-27 18:06:53",
"department": "技术部",
"employeeName": "赵云",
"objectId": "6a1daa9a80",
"phoneNumber": "15852855556",
"serialNumber": "42",
"staffPosition": "管理员",
"updatedAt": "2020-08-27 18:07:26",
"username": "15852855556"
}, ,
{
"createdAt": "2020-08-27 18:06:53",
"department": "技术部",
"employeeName": "甄姬",
"objectId": "6a1daa9a80",
"phoneNumber": "15852855556",
"serialNumber": "42",
"staffPosition": "管理员",
"updatedAt": "2020-08-27 18:07:26",
"username": "15852855556"
}, ,
{
"createdAt": "2020-08-27 18:06:53",
"department": "技术部",
"employeeName": "妲己",
"objectId": "6a1daa9a80",
"phoneNumber": "15852851116",
"serialNumber": "42",
"staffPosition": "管理员",
"updatedAt": "2020-08-27 18:07:26",
"username": "15852855556"
}, ,
{
"createdAt": "2020-08-27 18:06:53",
"department": "技术部",
"employeeName": "妲己",
"objectId": "6a1daa9a80",
"phoneNumber": "15852800006",
"serialNumber": "42",
"staffPosition": "管理员",
"updatedAt": "2020-08-27 18:07:26",
"username": "15852855556"
}
]
}
},
onShow() {
// 判断是否登录 登录显示通讯录
this.token = uni.getStorageSync('token')
if (this.token == '') {
this.show = true
uni.showModal({
content: '请先登录',
showCancel: true,
success(res) {
if (res.confirm) {
uni.reLaunch({
url: '/pages/views/login'
})
}
}
});
}
},
onLoad() {
// 判断是否登录 登录显示通讯录
this.token = uni.getStorageSync('token')
if (this.token == '') {
this.show = true
uni.showModal({
content: '请先登录',
showCancel: true,
success(res) {
if (res.confirm) {
uni.reLaunch({
url: '/pages/views/login'
})
}
}
});
}
// 处理获取的数据
for (let k in this.List) {
// this.employeeNameList.push(this.List[k].employeeName)
this.employeeNameList.push(this.List[k].employeeName + ' ' + this.List[k].phoneNumber)
// this.phoneNumber.push(this.List[k].phoneNumber)
}
console.log(this.employeeNameList, '名字列表')
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
console.log(this.firstName, '7878')
},
methods: {
// 传入号码拨打电话
callphone(phone) {
console.log('传入的电话', phone);
let phonename = phone
console.log('传入的电话ming', phonename);
this.List.forEach((item, index) => {
if (item.employeeName === phone) {
phone = item.phoneNumber
}
})
console.log(phone)
const res = uni.getSystemInfoSync();
// ios系统默认有个模态框
if (res.platform == 'ios') {
uni.makePhoneCall({
phoneNumber: phone,
success() {
console.log('拨打成功了');
},
fail() {
console.log('拨打失败了');
}
})
} else {
//安卓手机手动设置一个showActionSheet
uni.showActionSheet({
itemList: [phone, '呼叫'],
success: function(res) {
console.log(res);
if (res.tapIndex == 1) {
uni.makePhoneCall({
phoneNumber: phone
})
}
}
})
}
}
}
}
</script>
<style>
</style>