一、效果

二、功能描述

• 预览照片
• 照片自适应
• 快速拨打电话
• 快速连接小程序客服
• 快速复制客服社交账号信息

三、用到的API知识点

1、预览照片

API：wx.previewImage
点击此处：开发者文档

2、快速拨打电话

API:wx.makePhoneCall
点击此处:开发者文档

3、快速复制

API:wx.setClipboardData
点击此处:开发者文档

4、小程序客服

API：handleContact
点击此处:开发者文档

四、“手撕代码”

wxml部分

<view class="allCon">
    <image class="imgs" mode="widthFix"  src="{{imgs}}" data-info="{{imgs}}" bindtap="bindPreviewImg"/>
    <view class="rows">
        <text class="rowsText" >微信号:{{weChatNum}}</text>
        <view class="rowsCopy" bindtap="bindPrevieWechat" data-info="{{weChatNum}}">复制信息</view>
    </view>
    <view class="rows">
        <text class="rowsText">手机号:{{phoneNum}}</text>
        <view class="rowsCopy" bindtap="bindPreviewPhone" data-info="{{phoneNum}}">复制信息</view>
    </view>
    <view class="rows">
        <text class="rowsText">QQ号:{{qq}}</text>
        <view class="rowsCopy" bindtap="bindPreviewQQ" data-info="{{qq}}">复制信息</view>
    </view>
    <button  type="primary" open-type="contact" bindcontact="handleContact" session-from="sessionFrom" style="border-radius: 15rpx;width: 95%;">快速连接客服</button>
</view> 

xcss

/* pages/serviceCenter/serviceCenter.wxss */
page{
    background-color: rgb(247, 247, 247);
}
.allCon{
    width: 95%;
    border-radius: 20rpx;
    background-color: white;
    margin: 20rpx auto;
    padding-bottom: 20rpx;
    
}
.imgs{
    width: 95%;
    padding-bottom: 20rpx;
    border: 2px solid #3478f6; /* 设置蓝色边框 */
    box-shadow: 0 0 5px #3478f6;
    margin: 20rpx 20rpx;
    
}
.rows{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 95%;
    justify-content: space-between;
    margin: 20rpx auto;
    border-bottom: 1rpx solid #ccc;
    height: 60rpx;
    font-size:35rpx;
}
.rows:last-child {
    padding-bottom: 40rpx; /* 设置 padding-bottom 的值，这里为 20rpx */
}
.rowsCopy{
    background-color: green;
    color: white;
    font-size: 27rpx;
}

js部分

这里有一个坑：复制的内容只能是字符串形式不能是数字类型

// pages/serviceCenter/serviceCenter.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        
    },
     /* 接入客服 */
     methods: {
        handleContact(e) {
          console.log(e.detail.path)
          console.log(e.detail.query)
        }
    },
    /* 预览图片 */
    bindPreviewImg(res){
        var value = res.currentTarget.dataset.info
        wx.previewImage({
          urls: [value],
        })
    
    },
    /* 复制微信 */
    bindPrevieWechat(res){
        var value = res.currentTarget.dataset.info
        wx.setClipboardData({
            data: value,
            success:()=>{
                wx.getClipboardData({
                    success:()=>{
                        wx.showToast({
                          title: 'Success',
                          icon:'success',
                          duration:'2000',
                          mask:"ture"//是否设置点击蒙版，防止点击穿透
                        })
                    }
                })
            },fail(e){
                console.log(e);
            }
          })
    },
    /* 复制手机号 */
    bindPreviewPhone(res){
        var value = res.currentTarget.dataset.info
        wx.setClipboardData({
            data: value,
            success:()=>{
                wx.getClipboardData({
                    success:()=>{
                        wx.showToast({
                          title: 'Success',
                          icon:'success',
                          duration:'2000',
                          mask:"ture"//是否设置点击蒙版，防止点击穿透
                        })
                    }
                })
            },fail(e){
                console.log(e);
            }
          })
    },
    /* 复制QQ号 */
    bindPreviewQQ(res){
        var value = res.currentTarget.dataset.info
        wx.setClipboardData({
            data: value,
            success:()=>{
                wx.getClipboardData({
                    success:()=>{
                        wx.showToast({
                          title: 'Success',
                          icon:'success',
                          duration:'2000',
                          mask:"ture"//是否设置点击蒙版，防止点击穿透
                        })
                    }
                })
            },fail(e){
                console.log(e);
            }
          })
    },
   /* 拨打电话 */
    callPhone(e){
        var phone = e.currentTarget.dataset.phoneNum
        wx.makePhoneCall({
        phoneNumber: phone,
        })
    },
})