1、功能需求描述:
企微分享侧边栏,增加小程序的商品、活动落地页的分享快捷发送分享,点击 【发送】可快速发送对应的小程序商品链接给客户
2、功能实现效果图:技术栈:vue2+vant2+新版WECOM-JSSDK
3、话不多说,直接上代码:(企微相关部分)
mounted() {
this.init()
},
methods: {
/**
* @methods 初始化
*/
async init(){
// getGiweiSharingConfig 后端提供的接口
const { data: { ret: { config },result } } = await getGiweiSharingConfig()
if (!result) {
this.$toast('初始化页面出错');
return false;
}
//注册
ww.register({
corpId: config.corpid, // 必填,当前用户企业所属企业ID
agentId: config.agentid, // 必填,当前应用的AgentID
jsApiList: ['getContext','getExternalContact', 'sendChatMessage'], // 必填,需要使用的
JSAPI列表
getConfigSignature: function () { // 必填,根据url生成企业签名的回调函数
let timestamp = config.timestamp
let nonceStr = config.nonceStr
let signature = config.signature
return { timestamp, nonceStr, signature }
},
getAgentConfigSignature: function () { // 必填,根据url生成企业签名的回调函数
let timestamp = config.timestamp
let nonceStr = config.nonceStr
let signature = config.signature
return { timestamp, nonceStr, signature }
},
onAgentConfigSuccess: function (e) {
console.info('+++++++++++',e)
},
onAgentConfigFail: function (e) {
console.info('************',e)
}
})
},
/**
* @methods 发送按钮
*/
sendInfo(itemInfo){
ww.checkJsApi({
jsApiList: ['getContext','getExternalContact', 'sendChatMessage']
})
//新版
ww.sendChatMessage({
msgtype:"miniprogram", //消息类型,必填
enterChat: true, //为true时表示发送完成之后顺便进入会话,仅移动端3.1.10及以上版本支持该字段
miniprogram: {
appid: itemInfo.appid,//小程序的appid,企业已关联的任一个小程序
title: itemInfo.subtitle || itemInfo.activityTitle, //小程序消息的title
imgUrl: itemInfo.goodsImage || itemInfo.image,//小程序消息的封面图。必须带http或者https协议头,否则报错 $apiName$:fail invalid imgUrl
page: itemInfo.page, //小程序消息打开后的路径,注意要以.html作为后缀,否则在微信端打开会提示找不到页面
},
success(res){
console.info('-----------',res)
that.$toast('分享成功')
},
fail(res){
console.info('*****-----',res)
that.$toast('分享失败')
},
})
},
}
4、注意事项:
4.1:首先要先看企业微信的官方文档,现在有新版与旧版之分,其实也差不多的,新版是ww.xxx
旧版是wx.xxxx,如下图,
官方文档地址:分享消息到当前会话 - 接口文档 - 企业微信开发者中心
4.2:我当时遇到的问题,ww.sendChatMess分享报错信息如下:就是权限配置的问题了
{
errCode: -1
errmsg: "fail_no permission"
errMsg: "sendChatMessage:no permission"
........
}
解决方案如下图:
最后有问题的地方,欢迎大家评论区留言,谢谢哦!