给自己的微信小程序客服回话添加头像!

在这里教大家如何在微信小程序客服回话里显示用户的头像和昵称。

先给大家看下获取头像与昵称后的实际效果：

第一步，百度搜索芝麻小客服或者点击此链接打开之后点击 一键接入小客服 按钮，按照提示接入小程序客服系统。如图：

第二步，接入客服系统成功后，在你的小程序代码里增加微信登陆的代码，例如：

//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 发送给后台解码出 unionIdthis.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.userInfothis.setData({userInfo: res.userInfo,hasUserInfo: true})}})}},getUserInfo: function(e) {console.log(e)app.globalData.userInfo = e.detail.userInfothis.setData({userInfo: e.detail.userInfo,hasUserInfo: true})}
})

<!--index.wxml-->
<view class="container"><view class="userinfo"><button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button><block wx:else><image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text><button open-type='contact' session-from='{"nickName":"{{userInfo.nickName}}" ,"avatarUrl":"{{userInfo.avatarUrl}}"}'>联系客服</button></block></view><view class="usermotto"><text class="user-motto">{{motto}}</text></view>
</view>

/**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;
}

第三步：给你的小程序添加登陆功能成功后，修改你的客服按钮为如下：

<button open-type='contact' session-from='{"nickName":"{{userInfo.nickName}}","avatarUrl":"{{userInfo.avatarUrl}}"}'></button>

在这里我复制了小程序开发者工具建立的快速开发模板里的代码，实际开发过程中你可以实现自己的逻辑，然后替换客服按钮 session-from 里的值，具体如下：

nickname：客户的微信昵称，最大长度1024

avatar：客户的微信头像

session-from的值为json格式

userInfo.nickName，userInfo.avatarUrl 是获取到的用户昵称和头像

给自己的微信小程序客服回话添加头像!相关推荐

微信小程序客服功能把当前页面的信息卡片发送给客服
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 需求:微信小程序客服带详情页 , 场景:一个人通过微信小程序接入微信客服,聊天后带上入口链接效果图: ...
微信小程序客服相关功能
1.微信小程序客服浮动按钮 button 按钮中 open-type="contact" 可以跳转至客服注意!!! 客服对话在电脑端并不显示,只有真机调试时才会显示具体代码如下 ...
微信小程序客服消息（带流程图）
微信小程序客服消息功能介绍调用客服消息接口发送客服消息填写消息推送配置网页版客服工具与移动端小程序客服工具使用说明(后台接入消息服务) 一.在页面使用客服消息二.后台接入消息服务三.接收 ...
微信小程序客服系统怎么使用？小程序客服消息有没有什么限制？
越来越多的商家开始使用微信小程序,大批客户涌入,就会面临一个头疼的问题,如何和客户即时对话,怎么高效处理客户消息,所以就需要巧妙运用微信小程序客服系统.那么微信小程序客服系统怎么使用呢? 一.使用微信 ...
微信小程序客服系统手机版五大功能介绍
很多朋友小程序上线后,客服消息这块一直没得到解决.小程序客服消息只能在PC端回复,是让众多小程序运营商及商家头疼的问题,因为一个再牛逼的客服,也不可能随时随地都抱着电脑,这就导致很多用户的留言不能及时 ...
微信小程序客服消息授权给第三方Udesk
微信小程序客服消息授权给第三方Udesk 一.必须是微信认证过的微信小程序登录微信小程序后台-设置-基本设置链接:https://mp.weixin.qq.com/ 下面有一栏:微信认证(看是否认 ...
史上最简单最全 java后端对接微信小程序客服教程
文章参考--配置消息推送小程序发版体验成员使用步骤遇到的几个问题先分享一下遇到的几个问题提交消息推送服务起一直提示token校验失败是因为没有启动项目微信无法校验链接正确性体验用户无法正 ...
uni-app 微信小程序客服聊天和发送页面卡片功能
微信小程序客服聊天和发送页面卡片功能实现步骤如下: (一):首先登录微信公众平台 :https://mp.weixin.qq.com/ 登录成功后找到----->功能-----> 客服-- ...
微信小程序客服会话发送页面卡片
微信小程序客服会话发送页面卡片,这个腾讯在按钮里面已经封装好了,我们直接拿过来用就行了. 首先设置open-type="contact" 我们看下官方文档官方文档.png 常用的 ...

给自己的微信小程序客服回话添加头像!

给自己的微信小程序客服回话添加头像!相关推荐

最新文章

热门文章