场景
在客服聊天页面可以,精确的查看学生的相关信息以及学习情况,从而定制不一样的学习计划等等
准备工作
企业微信客服-聊天工具栏配置自建微信小程序
-
第一步在企微后台
应用管理-应用-自建添加关联的微信小程序 -
第二步在
应用管理-应用-基础选择微信客服 -
第三步在微信客服配置页面划到底部选择
工具-聊天工具栏-配置跳转至工具栏配置页面 -
第四步点击
配置应用/小程序页面选择已绑定的自建应用(关联的微信小程序)
-
第五步配置跳转至小程序侯展示的页面
-
第六步在微信客服会话聊天界面就可以看到效果
-
PC端展示效果
-
移动端展示效果
-
设置企业自建应用可以调用可见范围内的外部联系人
不配置会导致调用"fail获取外部客户的userId"失败---- {errCode: 92001, errMsg: “qy__getCurExternalContact:fail no permission”}
-
第一步在企业微信后台选择
员联系与上下游菜单 -
第二步在
学员联系-学员模块展开API按钮
-
第三步配置微信开发者ID(公众号ID)
-
第四步配置可调用接口的应用
开发
获取到微信客服会话中的客户的userid(客户的微信id)
这里图省事在，app.js中onShow函数中调用了qiWeiLogin方法
第一步获取企业微信派发的临时登录凭证
// 获取企业微信登录凭证
qiWeiLogin () {
wx.qy && wx.qy.login({
success: res => {
// 日志上报监听
wx.reportEvent('qw_login', {
'qw_code': res.code || res.errMsg || ('wx.qy.login-success:' + JSON.stringify(res))
})
if (res.code) {
console.log('code', res.code)
// 根据code获取临时登录凭证
this.getSessionKey(res.code)
} else {
console.log('登录失败！' + res.errMsg)
}
},
fail (err) {
wx.reportEvent('qw_login', {
'qw_code': 'wx.qy.login-fail:' + JSON.stringify(err)
})
console.log('暂不支持，', err)
}
})
},
第二步使用临时登录凭证code获取 session_key、用户userid以及用户所在企业的corpid等信息。
// 企业微信获取session_key
getSessionKey (js_code = '') {
// 调用后端的接口获取
getCodeSession({jsCode: js_code}).then(res => {
console.log('getCodeSession-then', res)
wx.reportEvent('qw_codesession', {
'qw_session_key': res.session_key || ('getCodeSession-then' + JSON.stringify(res)),
'qw_corpid': res.corpid || 'corpid_未获取到',
'qw_userid': res.userid || 'userid_未获取到'
})
// 校验用户当前 session_key 是否有效
wx.qy.checkSession({
success: data => {
console.log('session_key 未过期，并且在本生命周期一直有效', data)
wx.reportEvent('qw_check_session', {
'qw_checksession_err_msg': data.errMsg + 'checkSession-success:session_key 未过期，并且在本生命周期一直有效',
'qw_expire_in': data.expireIn || 0
})
// 获取入口
this.getQiWeiEntry()
},
fail (err) {
wx.reportEvent('qw_check_session', {
'qw_checksession_err_msg': 'checkSession-fail:' + JSON.stringify(err),
'qw_expire_in': 0
})
}
})
}).catch(err => {
wx.reportEvent('qw_codesession', {
'qw_session_key': 'getCodeSession-catch：' + JSON.stringify(err),
'qw_corpid': 'corpid_获取失败',
'qw_userid': 'userid_获取失败'
})
console.log('getCodeSession-catch', err)
})
},
第三步校验用户当前 session_key 是否有效
写在了第二步
第四步获取客户是从企微哪个入口进入到小程序
// 获取进入小程序的入口类型
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
// 获取企业微信客服会话中的学生US二ID
getQiWeiStuUserId () {
wx.qy.getCurExternalContact({
success: function (res) {
var userId = res.userId // 返回当前外部联系人userId
wx.reportEvent('qw_get_stu_user_id', {
'qw_kf_stu_user_id': userId || 'succees-未收集到',
'qw_result': JSON.stringify(res)
})
// 跳转至客户信息页面
if (userId) {
wx.redirectTo({
url: '/pages/userinfo/userinfo?userId=' + userId
})
}
console.log('获取用户的userId', res, userId)
},
fail (err) {
wx.reportEvent('qw_get_stu_user_id', {
'qw_kf_stu_user_id': 'fail-api收集失败 ',
'qw_result': JSON.stringify(err)
})
console.log('fail获取用户的userId', err)
}
})
},
通过微信id结合系统查询出当前客户的基本信息
在第5步中的结果回调中进行跳转
import {getStudentInfoList} from '@/api/login-api'
Page({
data: {
userId: '', // 带过来的微信ID
info: { } // 客户信息
},
onLoad (option) {
console.log(option)
this.setData({
userId: option.userId
})
this.getStudentInfoListFun(option.userId)
},
// 获取客户信息
getStudentInfoListFun (userId) {
getStudentInfoList({
studentQwIdList: [userId]
}).then(res => {
console.log(res)
this.info = res.data || {}
}).catch(err => {
console.log(err)
})
}
})
扫码预览
因为获取入口的api开发工具上不支持,需要进行真机调试
第一步开发工具模式选择企业微信小程序模式
第二步模拟聊天工具栏场景进入
第三步企业微信扫描预览码并配置体验版并添加可体验成员
第四步测试企业微信扫描预览码有没有跳转至最终想要的页面
注意
- 由于聊天工具栏中配置的小程序是线上的版本，所以无法实现开发过程中从聊天工具栏跳转至开发版本和体验版
- 关于sessionkey过期这个可以存储下自行优化，我这里是放在了onShow周期中每次进入小程序都会重新登录下
微信小程序白名单ip配置入口
- 不配置可能会导致获取sessionKey接口请求失败
"resData" {data: {errcode: 60020, errmsg: "not allow to access from your ip, hint: [1726915852115810613294035], from ip: [113.138.48.240](http://113.138.48.240), more info at <https://open.work.weixin.qq.com/devtool/query?e=60020>"}, profile: {transportRttEstimate: 52, domainLookUpStart: 1726915852118, responseEnd: 1726915852406, sendBytesCount: 934, redirectStart: 0, connectEnd: 1726915852241, protocol: "http/1.1", peerIP: "[101.91.40.24](http://101.91.40.24)", requestStart: 1726915852118, socketReused: false, fetchStart: 1726915852117, SSLconnectionStart: 1726915852171, estimate_nettype: 5, httpRttEstimate: 115, throughputKbps: 0, SSLconnectionEnd: 1726915852241, downstreamThroughputKbpsEstimate: 1961, domainLookUpEnd: 1726915852119, responseStart: 1726915852403, redirectEnd: 0, rtt: 161, connectStart: 1726915852119, port: 443, receivedBytedCount: 555, requestEnd: 1726915852406}, header: {X-W-No: "4", Error-Code: "60020", Server: "nginx", Connection: "keep-alive", Error-Msg: "not allow to access from your ip, hint: [1726915852115810613294035], from ip: [113.138.48.240](http://113.138.48.240), more info at <https://open.work.weixin.qq.com/devtool/query?e=60020>", Content-Length: "189", Date: "Sat, 21 Sep 2024 10:50:52 GMT", Content-Type: "application/json; charset=UTF-8"}, statusCode: 200, cookies: [], errMsg: "request:ok"}
-
入口企业微信后台
应用管理-应用-自建选择小程序 -
进入小程序管理配置页面滑动至底部，选择
开发者接口-企业可信IP
扫一扫
1049
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
