企业微信开发

本篇主要介绍，在vue中使用企业微信JS-SDK来开发企业微信的应用
详细案例：本次开发，是通过企业微信，创建外部群既客户群，然后再客户群中添加侧边栏页面。在侧边栏页面中引入vue的H5页面，在其中一个页面点击按钮获取到当前外部群的群id

在企业微信外部群内的效果：是正确的的，也只能在企业微信内进行测试。

在浏览器内调试只能进行一部分逻辑，因为有些api是必须在企业微信内运行

以下为实际开发遇到的问题和步骤：

文章目录

企业微信开发
一、准备工作
- 1.新建一个vue项目，用于开发H5
- 2.需要在企业微信中创建应用，在应用中关联上本vue项目
二、注意要点和坑
- 1.必须注意以下问题：
三、帮助文档和工具
四、实例代码：
总结

一、准备工作

1.新建一个vue项目，用于开发H5

2.需要在企业微信中创建应用，在应用中关联上本vue项目

具体创建应用和关联应用查看此篇

二、注意要点和坑

1.必须注意以下问题：

1.在企业微信创建应用，需要管理员权限

2.所有的JS接口只能在企业微信应用的可信域名下调用(包括子域名)，且可信域名必须有ICP备案且在管理端验证域名归属。验证域名归属的方法在企业微信的管理后台“我的应用”里，进入应用，设置应用可信域名。

3.相关企业微信的api只能在企业微信中调用：也就是说本地开发，调用企业微信api是会报错的，所以你只能把项目部署上线后，才能去企业微信进行验证。
不过我在工作台配置了本地应用地址（例如：http://192.168.12.123:9999/#/login）：本地IP+端口号+地址，这样本地开发时候，也可以在企业微信的工作台内实时看到效果。但还是存在有些api必须在聊天框内才能调用的问题。
建议： 用自己企业微信创建个自己的企业，当成测试环境，在上面调试。注意代码需要区分好本地和线上调用不同企业微信的应用。

4.官方提供的引入企业微信JS-SDK好像不行？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？

我在index.html引入后，不是找不到wx，就是找不到wx.config，又或者找不到wx.agentConfig报undefined
官方文档写的引入企业微信JS-SDK：

<!-- 企业微信开发 引入 jwxwork sdk -->
<script src="//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>

.
.
.

后来我在index.html里引入，在script标签上加了 referrerpolicy="origin"，然后就正常了：
我自己引入方式：

<!-- 企业微信开发 引入 jwxwork sdk -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" referrerpolicy="origin"></script>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script>

5.JS-SDK使用权限签名算法驼峰命名问题：
注意里面的noncestr是有大小写的，既有noncestr，也有nonceStr。
还有签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。

6.wx.config和wx.agentConfig不同：
具体区别看文档
wx.agentConfig必须在wx.config成功后调用，也就是在wx.config的wx.ready内调用。但是你想要看到wx.config成功后进入到wx.ready，你就必须将wx.config参数debug设置为debug:true 才可以。

6企业微信的相关：jsApiList 数组中传入需要调用的接口名称

6.wx.config和wx.agentConfig不同：

三、帮助文档和工具

1.开发文档
2.管理后台
3.基本概念术语
4.开发者社区
5.错误码查询工具，帮助开发者根据接口报错，进行快速定位bug。

四、实例代码：

1.index.html：引入sdk

    <!-- 在需要调用JS接口的页面引入如下JS文件 --><!-- 企业微信开发 引入 jwxwork sdk --><script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" referrerpolicy="origin"></script><script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script>

2.vue页面：通过环境变量获取企业微信id和应用id，同时引入初始化鉴权的js代码

<template><div><div style="text-align: center;">发票页</div><div>chatId:{{chatId}}</div><div>corpid:{{corpid}}</div><div>agentid:{{agentid}}</div><el-button @click="setToken">鉴权后获取群id</el-button></div>
</template><script>
import { getAuthTicket } from 'common/js/wx_auth_token' //初始化
import { MyPost, MyGet, PayPost } from "common/js/request"
import { G_CGI_PHP } from "api/api"
export default {data () {return {chatId: '',//外部群idcorpid: '',agentid: '',}},mounted () {},methods: {setToken () {let _this = thislet flag = false// 根据环境判断 调用后端接口 获取测试环境和线上环境的两个idif (process.env.NODE_ENV === "development") {alert("开发环境")MyGet(G_CGI_PHP.superOrder.corpGet + '?name=zhbtest', {}).then((res) => {if (res.success) {console.log(res)// 上线时候需要替换成线上真正的id  --  开发使用自己的企业微信应用 -- 最会保test -- 测试企业flag = getAuthTicket(res.data.corpid, res.data.agentid)//企业微信的id:corpid   企业微信的应用id:agentidconsole.log('flag1', flag)this.corpid = res.data.corpidthis.agentid = res.data.agentid} else {this.$message({message: res.return_message,type: "error",})}})} else {alert("生产环境")// MyGet(G_CGI_PHP.superOrder.corpGet + '?name=zhbnoncar', {MyGet(G_CGI_PHP.superOrder.corpGet + '?name=zhbtest', {}).then((res) => {if (res.success) {console.log(res)// 上线时候需要替换成线上真正的id  --  上线使用公司的企业微信应用 -- 最会保经纪flag = getAuthTicket(res.data.corpid, res.data.agentid)//企业微信的id:corpid   企业微信的应用id:agentidconsole.log('flag2', flag)this.corpid = res.data.corpidthis.agentid = res.data.agentid} else {this.$message({message: res.return_message,type: "error",})}})}}},
}
</script><style>
</style>

3.wx_auth_token.js：初始化鉴权的代码

1.access_token是后端通过接口计算好：因为access_token有2小时的有效期同时调用次数有限制而且前端获取需要传入秘钥不安全故是后端计算出来的
2.通过后端接口获取到企业和应用的ticket（都需要先获取到access_token）：注意拿到的ticket是未加密的，在调用wx.config和wx.agentConfig时候需要自己加密得到签名
3.总体逻辑：
①先获取access_token
②获取企业ticket
③加密得到签名
④调用wx.config 注意 jsApiList 需要配置agentConfig
⑤在wx.ready里再获取应用的ticket
⑥加密得到签名
⑦在定时器setTimeout里调用wx.agentConfig 注意 jsApiList 需要配置你要调用的接口方法例如getCurExternalChat获取外部群id
⑧在success里调用wx.invoke对应的接口方法

// ---------------------------------做企业微信的和应用的授权与初始化---------------------------------
/*
1.access_token是后端通过接口计算好：因为access_token有2小时的有效期 同时调用次数有限制 而且前端获取需要传入秘钥不安全 故是后端计算出来的
2.通过后端接口获取到企业和应用的ticket（都需要先获取到access_token）：注意拿到的ticket是未加密的，在调用wx.config和wx.agentConfig时候需要自己加密得到签名
3.总体逻辑：①先获取access_token②获取企业ticket③加密得到签名④调用wx.config  注意 jsApiList 需要配置agentConfig⑤在wx.ready里再获取应用的ticket⑥加密得到签名⑦在定时器setTimeout里调用wx.agentConfig 注意 jsApiList 需要配置你要调用的接口方法 例如getCurExternalChat获取外部群id⑧在success里调用wx.invoke对应的接口方法
*/import {MyPost,MyGet
} from 'common/js/request'// 引入加密依赖
let sha1 = require('js-sha1')let obj = {ticket1: '', //获取企业的ticket ---  对应config注入的是企业的身份与权限ticket2: '', // 获取应用的ticket ---  对应agentConfig注入的是应用的身份与权限access_token: '', // 登录凭证
}
let corpidVal = ''
let agentidVal = ''
let _this = this// 先获取企业的ticket
export function getAuthTicket(corpid, agentid) {corpidVal = corpidagentidVal = agentidMyGet('/chc-shop/api/v1/qywechat/jsapiticket/corp', {}).then(res => {console.log('先获取企业的ticket', res);alert('先获取企业的ticket')if (res.success) {obj.ticket1 = res.data;const ticket1 = res.data // 很重要！！！！let nonceStr = 'Y7a8KkqX041bsSwT' // 随机字符串let timeStamp = new Date().getTime() // 时间戳let newTimeStamp = String(timeStamp).substr(0, 10) // 10位数的时间戳// 当前网页的 URL（可以为本地局域网网址），不包含 # 及其后面部分let url = String(location.href.split('#')[0])let verifyStr = `jsapi_ticket=${ticket1}&noncestr=${nonceStr}&timestamp=${newTimeStamp}&url=${url}`let signature = sha1(verifyStr)console.log('签名1', signature)wx.config({beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题// 上线的时候记得将 debug 关掉哦！！！！！debug: process.env.NODE_ENV === "development" ? true : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: corpid, // 必填，企业微信的corpidtimestamp: newTimeStamp, // 必填，生成签名的时间戳nonceStr: nonceStr, // 必填，生成签名的随机串signature: signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法jsApiList: ['agentConfig','checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','hideMenuItems','showMenuItems','hideAllNonBaseMenuItem','showAllNonBaseMenuItem','chooseImage','previewImage','uploadImage','downloadImage','getLocalImgData','getNetworkType','openLocation','getLocation','hideOptionMenu','showOptionMenu','closeWindow','scanQRCode','chooseWXPay','openProductSpecificView','addCard','chooseCard','openCard'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来});wx && wx.ready(function () {// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，// 所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。// 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。alert('ready')getAuthTicket2(corpid, agentid)});wx && wx.error(function (res) {// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。console.log('wx.error', res)alert(res.errMsg)});} else {alert(res.return_message)}})
}// 先获取应用的ticket
export function getAuthTicket2(corpid, agentid) {MyGet('/chc-shop/api/v1/qywechat/jsapiticket/app', {}).then(res2 => {console.log('先获取应用的ticket', res2);alert('先获取应用的ticket')alert(res2)if (res2.success) {alert('进入success')obj.ticket2 = res2.dataconst ticket2 = obj.ticket2 // 很重要！！！！let nonceStr = 'Y7a8KkqX041bsSwT' // 随机字符串let timeStamp = new Date().getTime() // 时间戳let newTimeStamp = String(timeStamp).substr(0, 10) // 10位数的时间戳// 当前网页的 URL（可以为本地局域网网址），不包含 # 及其后面部分let url = String(location.href.split('#')[0])let verifyStr = `jsapi_ticket=${ticket2}&noncestr=${nonceStr}&timestamp=${newTimeStamp}&url=${url}`let signature = sha1(verifyStr)console.log('签名2', signature)alert('签名2:' + signature)alert(wx)console.log('wx', wx);alert(wx.agentConfig)// 企业微信ios/mac 端如果出现 "wx.agentConfig undefined" 的报错，可将调用放在异步操作中进行，例如使用：setTimeout 包裹setTimeout(() => {alert('进入定时器')wx.agentConfig({corpid: corpid, // 必填，企业微信的corpid，必须与当前登录的企业一致 https://developer.work.weixin.qq.com/document/path/90665#agentidagentid: agentid, // 必填，企业微信的应用id （e.g. 1000247）  https://developer.work.weixin.qq.com/document/path/90665#agentid// timestamp: +new Date(), // 必填，生成签名的时间戳// nonceStr: +new Date(), // 必填，生成签名的随机串timestamp: newTimeStamp, // 必填，生成签名的时间戳nonceStr: nonceStr, // 必填，生成签名的随机串signature: signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法 https://developer.work.weixin.qq.com/document/path/90506jsApiList: ['getCurExternalChat','chooseCard',], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来success: function (res2) {// 回调console.log('success==', res2)alert('success==' + res2)wx.invoke('getCurExternalChat', {}, function (res) {console.log('获取群id==', res)if (res.err_msg == "getCurExternalChat:ok") {// _this.chatId = res.chatId //返回当前外部群的群聊IDalert('群ID:' + res.chatId)} else {//错误处理alert('fail===' + res.err_msg)}})return true},fail: function (res2) {console.log('fail===', res2)alert('fail===' + res2.errMsg)if (res2.errMsg.indexOf('function not exist') > -1) {alert('版本过低请升级')return false}return false}})}, 1000);} else {alert(res2.return_message)return false}})
}

总结

提示：这里对文章进行总结：需要注意，只能本地先开发，然后将代码发布到线上，然后再去实际调试效果（可以先发布到自己测试的那个企业微信上看看效果，没问题再将代码的企业微信和应用id改真正的线上企业微信数据id）

vue引入企业微信JS-SDK；企业微信开发步骤；vue开发企业微信；企业微信侧边栏应用开发相关推荐

使用微信js sdk关于选择及上传图片至腾讯云COS
使用微信js sdk关于选择及上传图片至腾讯云COS 使用微信js sdk关于选择及上传图片至腾讯云COS 背景名词参考效果图展示开发步骤 1:概要步骤 2:上代码结束: 使用微信js sd ...
微信-js sdk invalid signature签名错误问题解决
微信-js sdk invalid signature签名错误问题解决参考文章: (1)微信-js sdk invalid signature签名错误问题解决 (2)https://www.cn ...
微信js sdk 分享失败有时候好有时候坏
微信js sdk 分享失败有时候好有时候坏用了一个www开头的域名和一个xx.com的域名两个在解析上有问题. 实践是www.xx.com的比较稳定转载于:https://www.c ...
微信JS SDK开放，前端开发者“鸡冻”了！
HTML5又一次逆袭了,其实之前微信也是有一些JS API的,比如分享.但这次一股脑开放了拍摄.录音.语音识别.二维码.地图.支付.分享.卡券等几十个API,这条消息不需宣传,瞬间就占满了HTML5从 ...
微信js sdk 授权上传头像下载代码片段和注意事项
/* * 描述:当前页授权 * @param url 例:index.html / 如果有参数,需加密index.html?id=1 */ 1.对需要运用js sdk的页面授权 get ...
实战微信JS SDK开发：贺卡制作与播放（1)
前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细 ...
微信JS SDK Demo 官方案例
2019独角兽企业重金招聘Python工程师标准>>> 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信 ...
微信JS SDK开发共享问题小结
首先,我要吐槽一下这个SDK,看了第一遍,完全不知所云,一会获取这个,一会获取那个,也没确切的告诉怎么获取. 和腾讯客服(拿钱不干事的好工作)讨教,人家不懂技术,不知道怎么解决,也没有相关技术人员对应 ...
php转发朋友圈缩略图片,解释最全的，手把手教的微信JS sdk分享设置教程-微信分享插件PHP源码JS-SDK接口，分享到朋友圈转发好友带缩略图...
亲们,此文是我上传的有关微信分享插件PHP源码JS-SDK接口的.rar和.zip的说明使用文件许多朋友都面临自己编写的网站通过微信转发时,无论是分享微信好友或是微信朋友圈时,出现无缩略图显示的问题 ...
微信JS SDK Demo 官方案例[转]
摘要: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用 ...

vue引入企业微信JS-SDK；企业微信开发步骤；vue开发企业微信；企业微信侧边栏应用开发