uni-app开发企微H5——推送消息给客户
作者:互联网
别以为有了开发文档你就可以勇往直前了!前面的路需要你披荆斩棘那~
第一步:引用企微的js-sdk
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
因为使用的是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!如图:
如果发布之后,发现在企微打不开?确保你的应用在后台配置了可信域名!
标签:function,必填,res,app,接口,H5,微信,uni,企微 来源: https://blog.csdn.net/zhangying1996/article/details/123053312