作者:平凡书生518 | 来源:互联网 | 2023-05-17 22:49
在这里教大家如何在微信小程序客服回话里显示用户的头像和昵称。先给大家看下获取头像与昵称后的实际效果:第一步,百度搜索芝麻小客服或者点击此链接打开之后点击一键接入小客服按钮,
在这里教大家如何在微信小程序客服回话里显示用户的头像和昵称。
先给大家看下获取头像与昵称后的实际效果:
第一步,百度搜索芝麻小客服 或者 点击此链接 打开之后点击 一键接入小客服 按钮,按照提示接入小程序客服系统。如图:
第二步,接入客服系统成功后,在你的小程序代码里增加微信登陆的代码,例如:
//app.js
App({
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}
})
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
{{userInfo.nickName}}
{{motto}}
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}
第三步: 给你的小程序添加登陆功能成功后,修改你的客服按钮为如下:
在这里我复制了小程序开发者工具建立的快速开发模板里的代码,实际开发过程中你可以实现自己的逻辑,然后替换客服 按钮 session-from 里的值,具体如下:
nickname:客户的微信昵称,最大长度1024
avatar:客户的微信头像
session-from的值为json格式
userInfo.nickName,userInfo.avatarUrl 是获取到的用户昵称和头像