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

最新推荐文章于 2021-08-11 22:03:06 发布

qq_25990395

最新推荐文章于 2021-08-11 22:03:06 发布

阅读量4.7k

点赞数 1

分类专栏：微信小程序文章标签：小程序客服

本文链接：https://blog.csdn.net/qq_25990395/article/details/79875325

版权

本文详细介绍了如何在微信小程序的客服回话中展示用户头像和昵称，通过接入芝麻小客服系统，并在小程序代码中实现微信登录功能，结合客服按钮的设置，实现了用户信息的展示。

摘要由CSDN通过智能技术生成

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

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

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

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

//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)