vue 使用企业微信扫一扫

vue 使用企业微信扫一扫

vue 使用企业微信扫一扫

第一次调用企业微信功能,有点坑,折腾了好几天,终于好了,记录一下操作过程。

了解功能所需权限(config和agentConfig)

首先要确定使用的功能需要获取的权限:一般使用config,特殊使用agentConfig。
agentConfig的作用
config注入的是企业的身份与权限,而agentConfig注入的是应用的身份与权限。尤其是当调用者为第三方服务商时,通过config无法准确区分出调用者是哪个第三方应用,而在部分场景下,又必须严谨区分出第三方应用的身份,此时即需要通过agentConfig来注入应用的身份信息。
注意!!!:主要看这个功能下面有没有文字说明一定要获取agentConfig权限,没有则默认是config权限即可。使用config权限
使用agentConfig

congfig和agentConfig相同之处

要使用权限需要有几个参数

config: appId企业微信系统直接获取
agentConfig: corpid,agentid企业微信系统直接获取 (注意参数大小写)

其中:jsApiList,timestamp,nonceStr在config或者agentConfig都是一样的
参数jsApiList: [] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来,使用什么接口就写什么
参数 timestamp,nonceStr,前端后端都可处理

timestamp,nonceStr获取

重中之重signature(config和agentConfig基本一致,jsapi_ticket获取时有点不同)

signature这个参数获取坑很多:
需要四个数据拼接加密:jsapi_ticket=JSAPITICKET&noncestr=NONCESTR&timestamp=TIMESTAMP&url=URL

1、其中noncestr,timestamp就是上面获取的数据直接使用,注意!!!一定要和上面的数据一模一样才行,反正就获取之后在两个地方都用就行。

2、其中url一定要是当前页面的路由**,hash模式下就是#前面的部分**,如果是history模式下写了重定向,问题就来了,本来写的就是history模式重定向,结果苹果手机在微信里面打开会有问题,它会显示真实路径和当前路径不是同一个。但是如果单纯是使用企业微信的话,安卓和苹果都是行的。!!!所有建议使用hash模式。

3、到了jsapi_ticket这个参数是需要调接口获取的,一般都是后端获取,前端直接调后端接口就好,主要是因为有次数限制。
jsapi_ticket
这个参数获取主要涉及两个接口
(1)https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=ID&corpsecret=SECRET
使用方式:https://developer.work.weixin.qq.com/document/path/91039
其中注意corpid是企业ID,corpsecret是应用的凭证密钥

(2)config:https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=ACCESS_TOKEN

agentConfig:https://qyapi.weixin.qq.com/cgi-bin/ticket/get?access_token=ACCESS_TOKEN&type=agent_config
agentConfig的情况下会多一个type参数

以下是signature在前端的处理方式:
signature在前端的处理方式

最后一个很重要的点: 扫码功能的回调要延时才能获取回调数据,扫码功能只需使用config

扫码功能

不要忘了引用
引用

以上就是全部内容,希望可以帮到有需要的人,企业微信开发中心https://developer.work.weixin.qq.com/document/path/90514

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现Vue企业内部应用拉起企业微信扫一扫,你可以按照以下步骤进行操作: 1. 在Vue应用中引入企业微信提供的JS-SDK依赖。可以使用npm或yarn进行安装,例如:`npm install weixin-js-sdk`。 2. 在Vue组件的`mounted`钩子函数中,调用企业微信提供的`wx.config`方法,传入相应的配置参数。配置参数包括`corpId`(企业ID)、`agentId`(应用ID)、`jsApiList`(需要使用的API列表)等。 ```javascript import wx from 'weixin-js-sdk'; export default { mounted() { wx.config({ // 企业ID corpId: 'YOUR_CORP_ID', // 应用ID agentId: 'YOUR_AGENT_ID', // 需要使用的API列表 jsApiList: ['scanQRCode'] }); }, methods: { scanQRCode() { wx.scanQRCode({ needResult: 1, scanType: ['qrCode', 'barCode'], success: function (res) { const result = res.resultStr; console.log('扫码结果:', result); // 在这里处理扫码结果 }, fail: function (err) { console.error('扫码失败:', err); // 处理扫码失败的情况 } }); } } } ``` 3. 在需要拉起企业微信扫一扫的地方,添加一个按钮或其他交互元素,并绑定一个点击事件。例如: ```html <template> <div> <button @click="scanQRCode">拉起扫一扫</button> </div> </template> ``` 4. 在Vue组件的`methods`中定义 `scanQRCode` 方法,该方法将调用企业微信提供的 `wx.scanQRCode` 方法来拉起扫一扫功能,并处理扫码结果。 5. 至此,当用户点击 "拉起扫一扫" 按钮时,会调用 `scanQRCode` 方法,从而拉起企业微信扫一扫功能,并在成功回调中处理扫码结果。 请确保在企业微信后台进行相应的配置,包括设置JS-SDK权限、配置可信域名、配置安全域名等。 希望对你有所帮助!如果你还有其他问题,请继续提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值