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

最近小程序项目需求有通讯录这样的需求
简单效果图是这样的

首先，我们需要调后台接口获取姓名还有其他信息，将获取回来的中文名字转换为拼音，这里做的是转为姓名首字母大写的简写格式（比如：“安其拉” 转为“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 = phoneconsole.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 {//安卓手机手动设置一个showActionSheetuni.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><!--遍历每个字母对应的名字数组--><viewstyle="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 = trueuni.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 = trueuni.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 = firstNameconsole.log(this.firstName, '7878')},methods: {// 传入号码拨打电话callphone(phone) {console.log('传入的电话', phone);let phonename = phoneconsole.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 {//安卓手机手动设置一个showActionSheetuni.showActionSheet({itemList: [phone, '呼叫'],success: function(res) {console.log(res);if (res.tapIndex == 1) {uni.makePhoneCall({phoneNumber: phone})}}})}}}}
</script><style>
</style>

uniapp小程序项目中实现通讯录功能相关推荐

uni-app小程序项目发布流程
uni-app小程序项目发布流程开发工具:HbuilderX编辑器.微信小程序开发工具 1.小程序开发工具就可以点击发行版本了 2.登录开发者平台配置域名白名单在开发者设置里完成服务器域名配置(域 ...
2023年最新最全uniCloud入门学习，零基础入门到实战项目 uni-admin打造uniapp网页后端微信支付宝抖音小程序后端 unicloud数据后台快速打造uniapp小程序项目
今天开始带着大家一起零基础学习uniCloud,在下面的课程中我们就简称uniCloud为cloud吧.我这里从零基础开始教大家,后面可以带大家简单的做一个实战项目.所以不用担心自己没有基础,跟着石头 ...
微信小程序项目中JSON文件的作用详解
在微信小程序开发项目中,会包含多个JSON文件,不同的JSON文件会有不同的作用,下面就微信小程序开发中的json文件进行说明. JSON配置文件: json 是一种数据格式,在实际开发中,json总 ...
在微信小程序项目中使用mock模拟数据
之前对mockjs做了一个介绍,以及在js.vue中拦截ajax的方法,介绍是必看的,也是一些基础 mockjs介绍总结 mockjs拦截ajax 在vue项目中使用mock拦截axios请求这一篇 ...
uni-app 小程序项目三 1. 商品列表、过滤器、封装商品item组件、上拉加载、节流阀、下拉刷新、2. 商品详情、轮播图、商品价格闪烁问题 3.加入购物车、vuex、持久化存储、mixiins
1.0 创建 goodslist 分支 1.1 定义请求参数对象为了方便发起请求获取商品列表的数据,我们要根据接口的要求,事先定义一个请求参数对象: data() {return {// 请求参数对 ...
微信小程序项目中使用icon图标
效果: 步骤: 1.先让ui负责人把你的账号加入到项目中,加入到项目中后就可以在icon图标库中看到该项目 2.在小程序中使用新建一个view,在上面加一个class,复制icon名字上去即可,注意 ...
uni-app 小程序添加联系客服功能
小程序添加联系客服 0. 写在前面: 1. 开通小6客服 2. 添加客服入口 3. 避免入坑 4. 联系客服如下很多小程序,为了更好的服务用户.收到反馈之类的,一般都有联系客服的功能.那么,该如何实 ...
uni-app小程序echarts中tooltip被遮盖
问题描述柱状图图表中的文案过长,tooltip溢出容器,会被遮盖住解决方案: 在echarts的tooltip中有confine属性可将tooltip限制在容器内,不超过容器,就不易被遮盖
uniapp 小程序嵌套H5开发总结
项目需求是在uniapp小程序项目中嵌套H5页面,H5返回小程序需要传值给小程序进行通信. 好,百度一查确实可以实现用的uniapp提供的web-view(https://uniapp.dcloud ...

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

uniapp小程序项目中实现通讯录功能相关推荐

最新文章

热门文章