大家好，欢迎来到IT知识分享网。
我是前端视角来写的，不包含后端内容哈~
前言
效果图
企业微信开发如何调试
遇见的问题：
流程说明：
开发流程
1，登录企业微信官网，然后点击企业登录按钮，用企业微信扫码登录(前提：你这个微信要是管理员，不然没有权限登录)，然后点击应用管理，在下面自建的地方点击创建应用
2，然后输入名称和头像创建，选择可见范围就是你选了谁谁就可以看见这个应用
3，创建完毕后你自建的这里就会多一个应用。
4，点击进去开始设置主页的网址，点击这个设置就可以进去输入网址了，你是小程序就去关联小程序，是H5就直接填个网址就行。这个网址就是你要展示的页面。你可以先去创建页面放到服务器上再来添加。
5，还是这个页面滚动到下方，设置你的接口白名单，按照他的要求来填写就行。这个接口就是你前端和后端请求的那个域名。不备案的话是不能请求的。
6，好了，然后接下来我们就可以去添加到聊天的右边栏了。
7，页面代码：我发一个页面的代码，可以参考流程，我都注释了，应该看得懂的。
注意：引入这两个js，不引入不能使用注入和企业微信的api
<script src="https://res.wx..com/open/js/jweixin-1.2.0.js"></script> <script src="https://open.work.weixin..com/wwopen/js/jwxwork-1.0.0.js"></script> 完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 移动端缩放 --> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <!-- vue方面文件 --> <script src="/statics/vue_element/vue.js"></script> <script src="/statics/vue_element/element.js"></script> <link rel="stylesheet" href="/statics/vue_element/element.css"> <script src="/statics/vue_element/axios.js"></script> <!-- 企业微信部分 --> <script src="https://res.wx..com/open/js/jweixin-1.2.0.js"></script> <script src="https://open.work.weixin..com/wwopen/js/jwxwork-1.0.0.js"></script> <title>话术库</title> </head> <body> <div id="app"> <div style="display:flex;"> <div style="width:35vw;overflow: hidden;border-right:1px solid #ccc;"> <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" accordion></el-tree> </div> <div style="flex:1;margin-left: 5px;overflow-y: auto;" class="treelist"> <div style="font-size:14px;border-bottom:1px solid #ccc;padding:5px 0;" @click="setContent(item)" v-for="(item,index) in content" :key="index">{
{
item.content}}</div> </div> </div> </div> </body> <script type="text/javascript"> new Vue({
el: '#app', data() {
return {
content: [], //内容列表 treeData: [], //tree菜单列表 // tree字段设置 defaultProps: {
children: 'child', label: 'name' }, qwInfoCode: '' //授权拿到的code } }, mounted() {
let that = this that.getTreeList() //获取tree分类列表 let userinfo = sessionStorage.getItem('kfInfo') // 授权过不再重复授权 if (userinfo) {
that.setConfig() //注入 console.log('已授权!'); } else {
location.href='https://zy.xxxx.cn/model/qiwe/login.html' //跳到授权页 } }, methods: {
// 获取tree列表 getTreeList() {
axios.get(`/api/zhjk_speech_class?hospital_id=121&channel=16`, {
}).then(res => {
this.treeData = res.data.data }).catch(error => {
console.log(error, '请求失败'); }) }, // 点击tree拿到对应话术库数据 handleNodeClick(e) {
axios.get(`/api/zhjk_speech_class_data?hospital_id=121&channel=16&class_id=${
e.id}`, {
}).then( res => {
this.content = res.data.data }).catch(error => {
console.log(error, '请求失败'); }) }, // 快捷回复:把点击的文本内容添加到聊天框 setContent(item) {
let that = this wx.invoke('sendChatMessage', {
msgtype: "text", //消息类型，必填 enterChat: true, //为true时表示发送完成之后顺便进入会话，仅移动端3.1.10及以上版本支持该字段 text: {
content: item.content, //文本内容 }, }, function (res) {
if (res.err_msg == 'sendChatMessage:ok') {
//发送成功 } }) }, // 获取客户信息 getYhUserId() {
// 获取外部人员userid wx.invoke('getCurExternalContact', {
}, function (res) {
if (res.err_msg == "getCurExternalContact:ok") {
console.log(res.userId, '外部人员userid'); axios.post( '/work/KwWecom/getWeWorkUserId', {
userid: res.userId } ).then( res => {
console.log(res, '外部人员信息'); }).catch(error => {
console.log(error, '请求失败'); }) } else {
//错误处理 } }); }, // 注入应用权限 setConfig() {
let that = this // 后端生成签名 axios.post('/work/KwWecom/index', {
url: "https://zy.xxxx.cn/model/qiwe/kjhf.html" }).then(res => {
let data = res.data.data // 注入应用权限 wx.agentConfig({
corpid: 'wwd144c9172', // 必填，企业微信的corpid，必须与当前登录的企业一致 agentid: '', // 必填，企业微信的应用id timestamp: data.timestamp, // 必填，生成签名的时间戳，后端返回 nonceStr: data.nonceStr, // 必填，生成签名的随机串，后端返回 signature: data.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法，后端返回 jsApiList: ['sendChatMessage', 'getCurExternalContact' ], //必填，传入需要使用的接口名称，名称就是企业微信文档中的那些api的名字 // 成功 success: function (res) {
console.log('注入应用权限成功'); }, // 失败 fail: function (res) {
console.log('注入应用权限失败', res); if (res.errMsg.indexOf('function not exist') > -1) {
alert('版本过低请升级') } } }); }).catch(error => {
console.log('请求失败', error); }) }, } }) </script> <style scoped> /* tree组件子级样式 */ .el-tree-node__content {
padding: 0 !important; } .treelist {
height: calc(100vh - 20px); } </style> </html> 授权需要跳转到新的页面，在新的页面授权，然后code处理数据之后跳回来主页面注入，不能授权和注入放在一个页面，授权也跳主页面授权，那样会一直注入失败的。我也没找到原因，反正就是要分开来就可以。
授权代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 移动端缩放 --> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <!-- vue方面文件 --> <script src="/statics/vue_element/vue.js"></script> <script src="/statics/vue_element/element.js"></script> <link rel="stylesheet" href="/statics/vue_element/element.css"> <script src="/statics/vue_element/axios.js"></script> <!-- 企业微信部分 --> <script src="https://res.wx..com/open/js/jweixin-1.2.0.js"></script> <script src="https://open.work.weixin..com/wwopen/js/jwxwork-1.0.0.js"></script> <title>授权</title> </head> <body> <div id="app"> 正在授权中。。。 </div> </body> <script type="text/javascript"> new Vue({
el: '#app', data() {
return {
qwInfoCode: '' //code } }, mounted() {
let that = this // 是否有授权 if (that.getCode()) {
that.getKfUserId() //获取用户信息 } else {
that.oauth() //授权 } }, methods: {
// 授权 oauth() {
location.href = "https://open.weixin..com/connect/oauth2/authorize?appid=ww9112321d144c9172&redirect_uri=https://zy.xxxx.cn/model/qiwe/login.html&response_type=code&scope=snsapi_base&state=STATE&agentid=1000124#wechat_redirect" }, // 获取url后参数code getCode() {
let that = this // 获取code参数 var url = decodeURI(decodeURI(location.search)); var theRequest = new Object(); if (url.indexOf("?") != -1) {
var str = url.substr(1); strs = str.split("&"); for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i] .split("=")[1]); } } that.qwInfoCode = theRequest.code //保存code return theRequest.code }, // 获取用户信息 getKfUserId() {
// code传给后端并获取客服的信息 axios.post( '/work/KwWecom/getWeWorkUserId', {
code: this.qwInfoCode } ).then( res => {
sessionStorage.setItem('kfInfo', res.data.data) //用户信息保存 location.href = 'https://zy.xxxx.cn/model/qiwe/kjhf.html'//跳转到主页 }).catch(error => {
console.log(error, '请求失败'); }) }, } }) </script> <style scoped> </style> </html> corpid和agentid在哪里看
2023/4/18 更新踩坑
最新踩的坑，记录一下：
1，页面传参，方法：在企业微信后台，点击你创建的自建应用，然后再里面点击配置到聊天工具栏，在里面设置你的页面地址，然后地址后面添加参数就行。直接在应用主页的地址后面加参数是拿不到的。 2，我遇到一直报错：invalid signature more info at https://open.work.weixin..com/devtool/query?e=40093。一直报的这个，我差了说是签名错误。后来找了很久终于找到了原因。 是因为我用iframe嵌套的页面，我在页面中注入的，而注入的时候会传一个当前页面的url给后端，后端拿来生成一个signature签名，由于我是授权之类的跳转和主页进去参数都是跳的首页。不是嵌套的页面。 导致嵌套的页面中当前地址拿不到后面的url附带的参数。所以生成的签名是错误的。后面我把注入放到了最外面的主页内直接注入，然后所有子页面调用父页面的wx来执行方法就可以了。 这里后端注意：有个坑！！我发的网址带了参数过去，后端拿着个生成签名，需要注意去除后面参数的转译。我们找到报错的问题其中之一就是后端拿到带有参数的url后，后面的参数转译了，然后拿着转译的url去生成签名，导致一直失败，可以后端打印一下就行。 3，发送信息电脑中是点击后，直接插入到输入框的，点击发送在发送。移动端企业微信上点击后是跳出来一个弹框，问你是不是发送，发送点击后直接就发出去了。不会插入到输入框。发现企微自带的快捷回复移动端是可以插入输入框的，经过搜索，这个功能是内部api。不对外开放，所以没有。 发送消息到客户朋友圈功能
2023-5-9更新：分享小程序到聊天框发给别人功能步骤
wx.invoke('sendChatMessage', {
msgtype:"miniprogram", //消息类型，必填 enterChat: true, //为true时表示发送完成之后顺便进入会话，仅移动端3.1.10及以上版本支持该字段 miniprogram: {
appid: "wx8bddf384",//小程序的appid，企业已关联的任一个小程序 title: "this is title", //小程序消息的title imgUrl:"https://search-operate.cdn.bcebos.com/d054b8892a7ab572cb296d62ec7f97b6.png",//小程序消息的封面图。必须带http或者https协议头，否则报错 $apiName$:fail invalid imgUrl page:"/index/page.html", //小程序消息打开后的路径，注意要以.html作为后缀，否则在微信端打开会提示找不到页面 }, }, function(res) {
if (res.err_msg == 'sendChatMessage:ok') {
//发送成功 } }) 免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/119622.html
