uni-app开发企微H5——推送消息给客户

前言：在企微推送个消息给客户怎么就这么难那？？？别以为有了开发文档你就可以勇往直前了！前面的路还需要你披荆斩棘那~

企微开发文档：聊天工具栏接口 - 接口文档 - 企业微信开发者中心

第一步：引用企微的js-sdk

<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

使用说明 - 接口文档 - 企业微信开发者中心

我把配置js-sdk的代码都放在了qy_wechat.js里，所以需要在main.js中引用一下，如下代码！

import qy_wechat from '@/common/qy_wechat.js'
Vue.prototype.$qy_wechat = qy_wechat; 
qy_wechat.initJssdk()

因为使用的是uni-app，引用的时候需要加在template.h5.html中（没有这个文件需要新建）uni-app官网，然后按图配置。

 如何判断引用成功？看下图 

在资源中能看到这个文件就代表你已经完成了第一步！！！

第二步：配置config 和 agentConfig

如果你是引用的jweixin-module，需要先卸载掉，然后直接用jWeixin来代替wx！不然就是wx.config is not a function~别问我为什么知道！不过这个方法也是看了别人的回答试的~

(1)、配置config代码

	initJssdk: function() {
		let that = this
		uni.request({
			url: 请求的接口url,
			data: {
				agentid: '你自己的agentid',
				purl: window.location.href
			},
			success: result => {
				if (result.data) {
					jWeixin.config({
						beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
						debug: false,
						appId: result.data.appId, // 必填，企业微信的corpID
						timestamp: result.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: result.data.nonceStr, // 必填，生成签名的随机串
						signature: result.data.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
						jsApiList: [
							'checkJsApi',
							'updateAppMessageShareData', //朋友
							'updateTimelineShareData', //朋友圈
							'chooseImage',
							'uploadImage',
							'getLocalImgData',
							'getLocation',
							'openLocation',
							'hideAllNonBaseMenuItem', //隐藏所有非基础按钮接口
							'showAllNonBaseMenuItem',
							'scanQRCode',
							'previewImage'
						]
					});

					// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
					// config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。
					// 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
					jWeixin.ready(function() {
						console.log("ready，配置完成")
						that.initWxWorkJssdk()
					});


				}
			}
		});
	},

(2)、配置agentConfig代码

	//初始化sdk配置  
	initWxWorkJssdk: function() {
		let that = this
		uni.request({
			url: 接口url,
			data: {
				agentid: 你自己的agentid,
				purl: window.location.href
			},
			success: res => {
				if (res.errMsg != "request:ok") {
					alert(res.errMsg);
				} else {
					let d = res.data.d;
					
						jWeixin.agentConfig({
							corpid: d.appId, // 必填，企业微信的corpid，必须与当前登录的企业一致
							agentid: 1000060, // 必填，企业微信的应用id
							timestamp: d.timestamp, // 必填，生成签名的时间戳
							nonceStr: d.nonceStr, // 必填，生成签名的随机串
							signature: d.signature, // 必填，签名，见附录1
							jsApiList: [
								'checkJsApi',
								'getContext',
								'getCurExternalContact',
								'getCurExternalChat',
								'sendChatMessage'
							], //必填
							success: function() {
								that.Getcontext()
							},
							fail: function(res) {
								alert(res.errMsg);
								if (res.errMsg.indexOf("function not exist") > -1) {
									alert("版本过低请升级");
								}
							}
						});
					
				}


			}
		});
	},

这里值得注意的是config可以在微信工具上调试，但是agentConfig需要发布之后再手机上看！我试过真机调试也不行！就很烦！！！爆炸~不知道你们有什么好方法~我看有的是用了什么代理软件搞的。没试过

第三步：获取进入H5页面的入口环境 - 接口文档 - 企业微信开发者中心

	//判断入口
	Getcontext() {
		var that = this;
			jWeixin.invoke('getContext', {}, function(res) {
				if (res.err_msg == "getContext:ok") {
					// that.entry = res.entry;
					uni.setStorageSync('entry',res.entry)
					
					//返回进入H5页面的入口类型，目前有normal、contact_profile、single_chat_tools、group_chat_tools、chat_attachment
					that.getExternalid(res.entry)
					// shareTicket = res.shareTicket; //可用于调用getShareInfo接口
				} else {
					//错误处理
				}
			});
	},

第四步：获取当前外部联系人userid - 接口文档 - 企业微信开发者中心

getExternalid(entry) {
		var that = this
		if (entry == 'contact_profile' || entry == 'single_chat_tools') {
			
			jWeixin.invoke('getCurExternalContact', {}, function(res) {
				
				if (res.err_msg == "getCurExternalContact:ok") {
					uni.setStorageSync('userId',res.userId)
					
					// that.userId = res.userId; //返回当前外部联系人userId
				
				} else {
					//错误处理
				}
			});
		}
		if (entry == 'group_chat_tools') {
			jWeixin.invoke('getCurExternalChat', {}, function(res) {
				if (res.err_msg == "getCurExternalChat:ok") {
					uni.setStorageSync('chatId',res.chatId)
					// that.chatId = res.chatId; //返回当前客户群的群聊ID
				} else {
					//错误处理
				}
			});
		}
	}

第五步：分享消息到当前会话 - 接口文档 - 企业微信开发者中心

// 推送消息
pushThis(){
				var that = this
				var ua = window.navigator.userAgent.toLowerCase();
				console.log(ua)
				console.log(ua.match(/wxwork/i) == 'wxwork')
				if (ua.match(/wxwork/i) == 'wxwork') {
					
					jWeixin.invoke('sendChatMessage', {
						msgtype:"text", //消息类型，必填
						enterChat: true, //为true时表示发送完成之后顺便进入会话，仅移动端3.1.10及以上版本支持该字段
						text: {
							content:that.content, //文本内容
						}
					}, function(res) {
						if (res.err_msg == 'sendChatMessage:ok') {
							//发送成功
							uni.showModal({
								title:'提示',
								content:"发送成功"
							})
						}
					})
				} else {
					uni.showToast({
						title: "请在企业微信端操作",
						icon: "none"
					})
					return
				}
}

推送消息的之前必须在企业微信后台配置上你的应用，才能调用，不然会出现报错——getCurExternalContact:fail_nopermission！如图：

如果发布之后，发现在企微打不开？确保你的应用在后台配置了可信域名！

结果发现苹果手机不能使用，请看下篇文章。

uni-app开发企微H5——推消息给客户（安装包版）_Strawberry96的博客-CSDN博客