【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】

【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】,第1张

我是前端视角来写的,不包含后端内容哈~

前言

最近刚好遇到了这么个任务
需要我在企业微信中内嵌一个自建应用,
用于打通跟我们医院后台系统的数据对接。
这样就可以直接让客服们在企业微信上点击右边页面 *** 作后台的数据了。
这可是给我踩了好多坑。毕竟从来没有做过企业微信的开发,有点懵。
也是踩了好多坑后,这里写一个帖子汇总一下我经历的全流程开发
当然这是基础的流程啊。因为我的功能要求也不是很高。后面如果开发更多的东西再补充

效果图

这是聊天时右边的页面,那个客户管理就是我加的自建应用
【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】,在这里插入图片描述,第2张

企业微信开发如何调试

在企业微信开发者中心点击附录,常见问题,滚动到下面客户端调试,按照要求弄就可以开启调试了
开发者中心
【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】,在这里插入图片描述,第3张
简单说一下:下载文件放到企业微信文件夹内,然后重启企微,然后打开按ctrl + alt + shift + D,会出现这样的页面,代表开启成功
【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】,在这里插入图片描述,第4张
然后再右边的页面右键,会看到一个英文的这个showdevtools,就是调试台了,点击
【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】,在这里插入图片描述,第5张
然后就会d出一个窗口,可以正常调试了。
【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】,在这里插入图片描述,第6张

遇见的问题:

报错 wx.invoke is not a function。
解决办法:页面调试必须在企业微信上调试,其他在微信开发者工具或者直接网页调试都是会报这个错误的。
【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】,在这里插入图片描述,第7张
报错:no permission
解决办法:这就是你没有注入,调用方法就会报错,先注入agentConfig才可以。

流程说明:

1,如果你需要获取到自己也就是登录这个微信的用户信息,那么你需要先授权,然后拿到授权链接上返回给你的code参数,传给后端接口,后端也会调用企业微信的api拿到用户信息再返给前端。
2,如果只是需要拿到客户的userid或者某些简单的api不涉及隐私的。一般是可以不需要授权的。直接agentConfig注入了就可以用了。

开发流程

1,登录企业微信官网,然后点击企业登录按钮,用企业微信扫码登录(前提:你这个微信要是管理员,不然没有权限登录),然后点击应用管理,在下面自建的地方点击创建应用

【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】,在这里插入图片描述,第8张

2,然后输入名称和头像创建,选择可见范围就是你选了谁谁就可以看见这个应用

【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】,在这里插入图片描述,第9张

3,创建完毕后你自建的这里就会多一个应用。

【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】,在这里插入图片描述,第10张

4,点击进去开始设置主页的网址,点击这个设置就可以进去输入网址了,你是小程序就去关联小程序,是H5就直接填个网址就行。这个网址就是你要展示的页面。你可以先去创建页面放到服务器上再来添加。

【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】,在这里插入图片描述,第11张

5,还是这个页面滚动到下方,设置你的接口白名单,按照他的要求来填写就行。这个接口就是你前端和后端请求的那个域名。不备案的话是不能请求的。

【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】,在这里插入图片描述,第12张

6,好了,然后接下来我们就可以去添加到聊天的右边栏了。

注意:这里右边栏是只有你跟外部客户聊天才有的,你跟本企业的人或者自己发信息的时候窗口是没有右边栏的。也就是说你需要让一个不是你们公司的人企业微信加你一下,然后聊天就会有这个侧边栏了。
继续介绍流程:
在你的右边栏有一个自定义按钮,点击后选择添加页面
【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】,在这里插入图片描述,第13张
然后选中你刚才创建的应用,去添加就行了。前提你得有页面啊,如果你设置的主页地址没有页面,是没有的
【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】,在这里插入图片描述,第14张
然后你就可以点击进入页面了。后续的 *** 作就是在页面里面了

7,页面代码:我发一个页面的代码,可以参考流程,我都注释了,应该看得懂的。

注意:引入这两个js,不引入不能使用注入和企业微信的api

<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>

完整代码

几个注意点:
注入agentConfig时:所有参数可以都后端给,也可以签名三个后端传,corpid和agentid前端自己写。这两个id在哪找下面我会说
授权:授权是前端写就可以,不需要后端。直接按填写id和跳转网址就可以了。appid就是corpid。
客户的userid:也是前端拿到的,注入后直接调用api就可以拿到了,传给后端,后端根据这个userid可以拿到客户的信息
jsApiList:注入时这个参数就是填写你需要用到的企业微信的api名称,不是后端的接口啊注意

<!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.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> <title>话术库</title> </head><body> <div id="app"> <div > <div > <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" accordion></el-tree> </div> <div class="treelist"> <div @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: 'ww9123021d144c9172', // 必填,企业微信的corpid,必须与当前登录的企业一致 agentid: '1000124', // 必填,企业微信的应用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.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> <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.qq.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在哪里看

corpid就是企业id,在企业微信后台–我的企业–企业信息
【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】,在这里插入图片描述,第15张
agentid:在应用管理,点击你自建的应用进去,这里就是agentid
【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】,在这里插入图片描述,第16张

【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】,在这里插入图片描述,第17张

2023/4/18 更新踩坑

最新踩的坑,记录一下:

1,页面传参,方法:在企业微信后台,点击你创建的自建应用,然后再里面点击配置到聊天工具栏,在里面设置你的页面地址,然后地址后面添加参数就行。直接在应用主页的地址后面加参数是拿不到的。 2,我遇到一直报错:invalid signature more info at https://open.work.weixin.qq.com/devtool/query?e=40093。一直报的这个,我差了说是签名错误。后来找了很久终于找到了原因。 是因为我用iframe嵌套的页面,我在页面中注入的,而注入的时候会传一个当前页面的url给后端,后端拿来生成一个signature签名,由于我是授权之类的跳转和主页进去参数都是跳的首页。不是嵌套的页面。 导致嵌套的页面中当前地址拿不到后面的url附带的参数。所以生成的签名是错误的。后面我把注入放到了最外面的主页内直接注入,然后所有子页面调用父页面的wx来执行方法就可以了。 这里后端注意:有个坑!!我发的网址带了参数过去,后端拿着个生成签名,需要注意去除后面参数的转译。我们找到报错的问题其中之一就是后端拿到带有参数的url后,后面的参数转译了,然后拿着转译的url去生成签名,导致一直失败,可以后端打印一下就行。 3,发送信息电脑中是点击后,直接插入到输入框的,点击发送在发送。移动端企业微信上点击后是跳出来一个d框,问你是不是发送,发送点击后直接就发出去了。不会插入到输入框。发现企微自带的快捷回复移动端是可以插入输入框的,经过搜索,这个功能是内部api。不对外开放,所以没有。

发送消息到客户朋友圈功能

用js-sdk这个api
【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】,在这里插入图片描述,第18张
注意:用的时候先要注入成功才行。然后使用这个。里面和发消息一样,分为文字和图片视频链接地址之类的。需要什么用什么。

使用范围:只有手机可以使用,电脑端的企业微信不生效。
点击发送后会发送到自己的企业微信朋友圈里,所有你的客户都可以在自己的私人微信中看到你发的朋友圈。

这里注意一点:你添加的客户必须是微信客户。如果是企业微信的客户。那是发送不了的,会显示当前没有可发送的客户。我当时测试的时候加了个企业微信的客户测试的。一直发不了。
看后缀名就行了。绿色的才是微信客户,黄色的是企业微信的客户。
【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】,在这里插入图片描述,第19张

2023-5-9更新:分享小程序到聊天框发给别人功能步骤

1,首先你需要去企业微信的后台找到你的自建应用
【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】,在这里插入图片描述,第20张
2,在这里设置管理小程序
【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】,在这里插入图片描述,第21张
3,然后去页面内调用企微的api发送
就是这个api,我这里用的是文档里面的例子。然后发送就可以发送出去了。

wx.invoke('sendChatMessage', { msgtype:"miniprogram", //消息类型,必填 enterChat: true, //为true时表示发送完成之后顺便进入会话,仅移动端3.1.10及以上版本支持该字段 miniprogram: { appid: "wx8bd80126147df384",//小程序的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') { //发送成功 } })

报错情况:
【企业微信开发流程前端篇】企业微信自建应用开发流程详细介绍,js-sdk获取用户信息,快捷回复,授权,发送朋友圈功能实现【一次看懂,简单开发】,在这里插入图片描述,第22张
这种报错就是代表你发送的小程序并没有被你绑定授权。也就是上面的关联小程序你没有做才会报这个错。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/13518570.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2024-02-04
下一篇 2024-02-07

发表评论

登录后才能评论

评论列表(0条)

保存