企业微信客服-聊天工具栏-对接H5页面

场景

在客服聊天页面可以,精确的查看学生的相关信息以及学习情况,从而定制不一样的学习计划等等

准备工作

企业微信客服-聊天工具栏配置自建应用

• 第一步在企微后台应用管理-应用-自建创建新的应用,并配置可见范围、网页授、权可信任ip、接收消息API等信息

  

  

  

• 第二步在应用管理-应用-基础选择微信客服

• 第三步在微信客服配置页面划到底部选择工具-聊天工具栏-配置跳转至工具栏配置页面

• 第四步点击配置应用/小程序页面选择刚创建的自建应用

  

• 第五步配置工具栏中对应菜单展示的页面地址

  

• 第六步在微信客服会话聊天界面就可以看到效果

  • PC端展示效果

    

  • 移动端展示效果

    

开发

获取到微信客服会话中的客户的userid(客户的微信id)

第一步引入jssdk文件

参考文档 使用说明 - 文档 - 企业微信开发者中心 (qq.com)

   <script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
   <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>

第二步通过config接口注入权限验证配置

    // 通过接口获取配置信息
    getQyTicket()
    .then(res => {
      this.getJsdkInfo({
        beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: 'ww5xxxxx', // 必填，企业微信的corpID，必须是本企业的corpID，不允许跨企业使用
        timestamp: res.data.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
        signature: res.data.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
        jsApiList: ['agentConfig', 'getContext', 'getCurExternalContact','openDefaultBrowser'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
      })
    })
    .catch(err => {
      this.loading = 'getQyTicket' + JSON.stringify(err)
    })
    
    // config接口注入
    getJsdkInfo(wxConfig = {}) {
      // 获取wxconfig
      wx.config(wxConfig)
      wx.ready(res => {
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        //通过agentConfig注入应用的权限
        this.getAppTicketFun()
      })
      wx.error(function (err) {
        this.loading = 'wx.error学生信息加载失败'
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      })
    },

第三步通过agentConfig注入应用的权限

getAppTicketFun() {
  this.studentInfoCode = ''
  // 通过后端接口获取agentConfig注入应用的配置项
  getAppTicket()
    .then(res => {
      // alert(JSON.stringify(res))
      this.studentInfoCode = res.data.studentInfoCode || ''
      this.setAgentConfig({
        agentid: res.data.agentId, // 必填，企业微信的应用id （e.g. ）
        corpid: 'ww5xxxxx', // 必填，企业微信的corpID，必须是本企业的corpID，不允许跨企业使用
        timestamp: res.data.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
        signature: res.data.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
        jsApiList: ['getContext', 'getCurExternalContact'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
      })
    })
    .catch(err => {
      this.loading = 'getAppTicket' + JSON.stringify(err)
    })
},
// 获取注入应用的权限
    setAgentConfig(config = {}) {
      wx.agentConfig({
        ...config,
        success: res => {
        // 获取入口权限
          this.getEntry()
        },
        fail: err => {
          if (err.errMsg.indexOf('function not exist') > -1) {
            this.loading = '版本过低请升级'
          }
        }
      })
    },

第四步获取客户是从企微哪个入口进入到该页面的

 // 获取进入小程序的入口类型
  getQiWeiEntry () {
    wx.qy.getContext({
      success: res => {
        var entry = res.entry // 返回进入小程序的入口类型
        var shareTicket = res.shareTicket
        console.log('入口', entry, shareTicket)
        wx.reportEvent('qw_get_entry', {
          'qw_entry': entry,
          'qw_share_ticket': shareTicket || 'wx.qy.getContext-success: ' + JSON.stringify(res)
        })
        if (entry === 'single_kf_tools') {
          this.getQiWeiStuUserId()
        }
      },
      fail (err) {
        wx.reportEvent('qw_get_entry', {
          'qw_entry': '获取入口失败',
          'qw_share_ticket': 'wx.qy.getContext-fail: ' + JSON.stringify(err)
        })
        console.log('fail', err)
      }
    })
  },

第五步获取客户的userid

 // 获取H5入口环境
getEntry() {
  wx.invoke('getContext', {}, res => {
    if (res.err_msg == 'getContext:ok') {
      // 如果是从客服聊天工具栏进入则获取客户的微信id
      if (res.entry === 'single_kf_tools') {
        //获取客户的微信id
        this.gerUserId()
      }
    } else {
      //错误处理
      this.loading = 'single_kf_tools:else'
    }
  })
},

第六步通过微信id结合系统查询出当前客户的基本信息

// 获取客户的userid
    gerUserId() {
      try {
        // this.loading = 'gerUserId:'
        wx.invoke('getCurExternalContact', {}, res => {
          if (res.err_msg == 'getCurExternalContact:ok') {
            let userId = res.userId //返回当前外部联系人userId
            this.getUserInfo(userId)
          } else {
            //错误处理
            this.loading = '获取userID错误:' + userId
          }
        })
      } catch (error) {
        this.loading = 'error___' + JSON.stringify(error)
      }
    },
    // 获取自己系统内部对应的的客户信息
    getUserInfo(userId = '') {
      // 拿到客户的微信id后在自己系统内部通过其获取对应的相关信息,其中 studentInfoCode 是后端接口为了安全做校验用的,根据自己后端的接口判断是否需要
      getStudentInfoList({
        studentQwIdList: [userId],
        studentInfoCode: this.studentInfoCode
      })
        .then(res => {
          this.info = res.data[0] || {}
        })
        .catch(err => {
          alert(JSON.stringify(err))
          this.info = {}
          this.loading = '获取学生信息失败，请刷页面新重试'
        })
    }