【企业微信】JS-SDK引入实现向企微群聊发送图文消息

本文链接：https://blog.csdn.net/Joseph_ZG/article/details/125421326

一、需求

企业自建应用商城需要实现分享商品链接到群聊。（标题/描述/图片/点击跳转商品链接H5详情页），API（打开已有群聊并发送信息）可实现
企微文档

二、引入Js-sdk

方式一：链接引入

<script src="https://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>

方式二：npm安装

npm install wecomjsdk

全局挂载

// 调用企业微信api的时候将wx换成$wx
import wx from "wecomjsdk"
Vue.prototype.$wx = wx

三、通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则无法调用，所以此处选用局部混入，需要使用的页面加入即可

调用wx.agentConfig之前，必须确保先成功调用wx.config. 注意：从企业微信3.0.24及以后版本（可通过企业微信UA判断版本号），无须先调用wx.config，可直接wx.agentConfig.

weChat.js（npm方式）

import { getCorp, getAgentConfig } from '@/api/qywx/crop' // 这是后端给的接口，用于获取签名算法等信息

// 仅部分接口才需要调用agentConfig，需注意每个接口的说明
const weChatMixin = {
	data() {
		return {}
	},
	methods: {
		// 用于调用wx.config
		async wxInterfaceCall(url, wxApi, fn) {
			const wx = window.wx
			const res = await getCorp({ url: url })
			if (res.code === 0) {
				const datas = res.result

				this.$wx.config({
					beta: true,
					debug: false,
					appId: datas.corpId,
					timestamp: datas.timestamp,
					nonceStr: datas.nonceStr,
					signature: datas.signature,
					jsApiList: Array.isArray(wxApi) && wxApi.length > 0 ? wxApi : []
				})

				if (fn && typeof fn === 'function') {
					this.$wx.ready(() => {
						fn(this.$wx)
					})
				}
			}
		},
		// 用于需要 调用agentConfig的接口
		async wxAgentConfig(url, wxApi, fn) {
			let me = this
			const wx = window.wx
			const res = await getCorp({ url: url })
			if (res.code === 0) {
				const datas = res.result
				this.$wx.config({
					beta: true,
					debug: false,
					appId: datas.corpId,
					timestamp: datas.timestamp,
					nonceStr: datas.nonceStr,
					signature: datas.signature,
					jsApiList: wxApi
				})
             // 通过ready接口处理成功验证
				this.$wx.ready(() => {
					me.$wx.checkJsApi({
						jsApiList: wxApi,
						success: async () => {
							const res1 = await getAgentConfig({ url: url })
							if (res1.code === 0) {
								const dataRes = res1.result
								me.$wx.agentConfig({
									corpid: dataRes.corpId, // 必填，企业微信的corpid，必须与当前登录的企业一致
									agentid: dataRes.agentId, // 必填，企业微信的应用id （e.g. 1000247）
									timestamp: dataRes.timestamp, // 必填，生成签名的时间戳
									nonceStr: dataRes.nonceStr, // 必填，生成签名的随机串
									signature: dataRes.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
									jsApiList: Array.isArray(wxApi) && wxApi.length > 0 ? wxApi : [],
									success: res => {
										if (fn && typeof fn === 'function') {
											fn(me.$wx)
										}
									}
								})
							}
						}
					})
				})
			}
		}
	}
}

export default weChatMixin

四、在页面中使用

// 引入
import weChatMixin from '@/public/mixin/weChat'

// 单页面混入
mixins: [weChatMixin],

// 使用
this.wxAgentConfig(location.href.split('#')[0], ['openExistedChatWithMsg'], wx => {
    me.$wx.invoke('openExistedChatWithMsg', {
        chatId: me.chatId,
        msg: {
            msgtype: "link",
            link: {
                title: me.goodsInfo.goodsName,
                desc: me.goodsInfo.goodsProfile,
                url: `http://xxxx/#/pages/mall/goods-details?id=${me.goodsInfo.id}&corpId=${corpId}`, // 自己的分享地址
                imgUrl: me.goodsInfo.imgList[0]
            }
        }
    },
    function(res) {
        uni.showToast({
            title: res,
            icon: 'none'
        })
    }
)
})