uniapp 企业微信侧边栏开发网页授权 注入企业权限 注入应用权限 获取userid（2）

1、网页授权，获取code

代码：

oauthUrl() {const that = thisuni.removeStorageSync('code')let REDIRECT_URI = encodeURIComponent(window.location.href)let CORPID = webConfig.appIdlet url =`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${CORPID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`if (window.location.href.indexOf('code=') != -1) { // 避免一直重复重定向无限获取codelet code = that.getQueryVariable('code')if (code == that.getCode()) { // 微信获取code会重定向，所以从上个页面返回主页后，返回的其实是重定向之后的url,此时url一定带有上次的code,code只能用一次，这时候要重新获取let urls = that.ridUrlParam(window.location.href, ['code']) // 从url中祛除code,用没有code的url重新生成code window.location.href = urls}that.setCode(code)  // 保存codethat.getConfig() // 注入企业权限} else {window.location.href = url}},

里面用到的方法：

// 获取url后参数code

getQueryVariable(variable) {var query = window.location.search.substring(1);var vars = query.split("&");for (var i = 0; i < vars.length; i++) {var pair = vars[i].split("=");if (pair[0] == variable) {return pair[1];}}return (false);},

// 删除URL中指定search参数

ridUrlParam(url, params) {/*** 删除URL中指定search参数,会将参数值一起删除* @param {string} url 地址字符串* @param {array} aParam 要删除的参数key数组，如['name','age']* @return {string} 返回新URL字符串*/for (var index = 0; index < params.length; index++) {var item = params[index];var fromIndex = url.indexOf(item + "="); //必须加=号，避免参数值中包含item字符串if (fromIndex !== -1) {// 通过url特殊符号，计算出=号后面的的字符数，用于生成replace正则var startIndex = url.indexOf("=", fromIndex);var endIndex = url.indexOf("&", fromIndex);var hashIndex = url.indexOf("#", fromIndex);var reg = "";if (endIndex !== -1) {// 后面还有search参数的情况var num = endIndex - startIndex;reg = new RegExp(item + "=.{" + num + "}");url = url.replace(reg, "");} else if (hashIndex !== -1) {// 有hash参数的情况var num = hashIndex - startIndex - 1;reg = new RegExp("&?" + item + "=.{" + num + "}");url = url.replace(reg, "");} else {// search参数在最后或只有一个参数的情况reg = new RegExp("&?" + item + "=.+");url = url.replace(reg, "");}}}var noSearchParam = url.indexOf("=");if (noSearchParam === -1) {url = url.replace(/\?/, ""); // 如果已经没有参数，删除？号}return url;}

这个时候就会发现，如果你是从企业微信客户端侧边栏配置的自定义应用，点击不同的外部联系人时，获取到的code都是一致的，这时候从企业微信后台管理去配置，就每次获取到不同的code了

在这里插入图片描述
2、注入企业权限、应用权限、获取当前外部联系人userid
html引入js文件

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

然后在manifest.json中配置模板路径

在这里插入图片描述
这个时候，一般页面中会出现一个无法去掉的“取消”字样，通过查看是多了个<uni-actionsheet__action>组件，这时候在index.html中加了一行代码就解决了

<link rel="stylesheet" href="<%= BASE_URL %>static/index.css" />

完整代码如下:
在这里插入图片描述

注入企业权限（必须先注入企业权限，不然wx（jWeixin）中找不到agentConfig方法，就没法注入应用权限）：

如果你使用的是uniapp，那么你会发现你在html引入js文件后，window中会找不到wx对象，这是因为uniapp把wx自用了，但是wx返回了wx和jWeixin两个，这时候直接用jWeixin就行。

tips：代码中的getWxVerify是我们后台的接口，用来获取签名的，，，，最重要的一点，告知后台开发仔细看文档，获取access_token要用的corpsecret是应用秘钥，不是企业秘钥

在这里插入图片描述
还有，请求你们后端接口是，要把请求的ip添加到企业微信后台管理的白名单中

在这里插入图片描述

// 注入企业权限

getConfig() {const that = thisconst path = window.location.href.indexOf("#") !== -1 ? window.location.href.split("#")[0] : window.location.href;getWxVerify({url: encodeURIComponent(path),appId: webConfig.appId}).then(res => {console.log(res, 'ressss')window.jWeixin.config({beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: res.result.appid, // 必填，企业微信的corpID，必须是本企业的corpID，不允许跨企业使用timestamp: res.result.timestamp, // 必填，生成签名的时间戳nonceStr: res.result.noncestr, // 必填，生成签名的随机串signature: res.result.signature,// 必填，签名，见 附录-JS-SDK使用权限签名算法jsApiList: ['getCurExternalContact'] ,// 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来});window.jWeixin.ready(function(){console.log('注入企业权限成功')console.log(window, 'window')// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。that.getAgentConfig()  // 注入应用权限});})
},

注入应用权限：

// 注入应用权限

getAgentConfig() {const that = thisconst path = window.location.href.indexOf("#") !== -1 ? window.location.href.split("#")[0] : window.location.href;getWxVerify({url: encodeURIComponent(path),appId: webConfig.appId,type: 'agent_config'}).then(res => {console.log(res, 'ressss')window.jWeixin.agentConfig({corpid: res.result.appid, // 必填，企业微信的corpID，必须是本企业的corpID，不允许跨企业使用agentid: 1000066, // 必填，企业微信的应用id （e.g. 1000247）timestamp: res.result.timestamp, // 必填，生成签名的时间戳nonceStr: res.result.noncestr, // 必填，生成签名的随机串signature: res.result.signature,// 必填，签名，见 附录-JS-SDK使用权限签名算法jsApiList: ['getCurExternalContact'] ,// 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来success: function(res) {// 回调console.log('注入应用权限成功',res)that.getCurrentUserId()  // 获取当前联系人的userid},fail: function(res) {console.log('注入应用权限失败',res)if (res.errMsg.indexOf('function not exist') > -1) {alert('版本过低请升级')}}});})},

获取当前联系人userid:

getCurrentUserId() {const that = thiswindow.jWeixin.invoke('getCurExternalContact', {}, function(res){console.log(res, '获取当前外部联系人userIdres')if(res.err_msg == "getCurExternalContact:ok"){let userId  = res.userId ; //返回当前外部联系人userIdthat.setCurrentUserId(userId)console.log(userId, '获取当前外部联系人userId', res)}else {//错误处理}});},

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/45245.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Flink-----Yarn应用模式作业提交流程

Flink-----Yarn应用模式作业提交流程

Yarn应用模式作业提交流程 在Yarn当中又分为Session&#xff0c;PerJob&#xff0c;Application&#xff0c;建议和推荐使用独立集群的&#xff0c;其中就包含PerJob 和Application&#xff0c;但是1.17版本的Flink已将PerJob标记为过时&#xff0c;并且Application可以解决Pe…
阅读更多...
AI绘画之三_StableDiffusion_界面操作

AI绘画之三_StableDiffusion_界面操作

1 介绍 首先&#xff0c;介绍界面中的重要元素&#xff0c;如图所示&#xff1a; 基础模型&#xff1a;基础模型是最重要的设置项文生图&#xff1a;选项卡列出了各大功能&#xff0c;文生图指通过文字生成图片图生图&#xff1a;图生图指通过图片和文字生成图片修复照片&am…
阅读更多...
sql类型-用户定义表类型

sql类型-用户定义表类型

一、创建用户定义表类型String_Table_Type CREATE TYPE String_Table_Type AS TABLE ( Id nvarchar(200) NOT NULL ) GO DECLARE test String_Table_Type INSERT INTO test VALUES(a),(b),(c) SELECT * FROM test 二、SqlSugar中使用
阅读更多...
PostgreSQL could not identify an equality operator for type json

PostgreSQL could not identify an equality operator for type json

问题 我的SQL&#xff1a; select {"id":"1"}::json UNION select {"id":"2"}::json;在将两个含有json字段的表union时&#xff0c;报错了&#xff1a; > ERROR: could not identify an equality operator for type json分析 …
阅读更多...
【IMX6ULL驱动开发学习】06.DHT11温湿度传感器驱动程序编写与测试

【IMX6ULL驱动开发学习】06.DHT11温湿度传感器驱动程序编写与测试

一、DHT11简介 DHT11是一款可测量温度和湿度的传感器。比如市面上一些空气加湿器&#xff0c;会测量空气中湿度&#xff0c;再根据测量结果决定是否继续加湿。 DHT11数字温湿度传感器是一款含有已校准数字信号输出的温湿度复合传感器&#xff0c;具有超小体积、极低功耗的特点…
阅读更多...
【图像分割】理论篇（1）评估指标代码实现

【图像分割】理论篇（1）评估指标代码实现

图像分割是计算机视觉中的重要任务&#xff0c;用于将图像中的不同区域分割成具有语义意义的区域。以下是几种常用的图像分割评价指标以及它们的代码实现示例&#xff08;使用Python和常见的计算机视觉库&#xff09;&#xff1a; 1. IoU (Intersection over Union) 与目标检…
阅读更多...
银行客户关系管理系统springboot财务金融进销存java jsp源代码

银行客户关系管理系统springboot财务金融进销存java jsp源代码

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 银行客户关系管理系统springboot 系统有1权限&#x…
阅读更多...
linux文件搜索相关命令

linux文件搜索相关命令

一、find命令用于在目录树中搜索文件和目录的工具。 下面是 find 命令常用选项的用法举例说明&#xff1a; 按名称查找文件&#xff1a; find /path/to/dir -name "filename"&#xff1a;在指定的目录及其子目录中按照文件名称进行查找。 例如&#xff1a;find /hom…
阅读更多...
Jetpack系列-ViewModel的使用及原理浅析

Jetpack系列-ViewModel的使用及原理浅析

作者&#xff1a;碎星 简介 ViewModel在架构中用于承载业务逻辑和作为容器保存屏幕状态&#xff0c;它可以缓存界面的状态&#xff0c;并且能在配置变更后持久保留相应的界面状态。 在jetpack套件中&#xff0c;ViewModel随lifecycle一起提供。 优势 简介 ViewModel在架构…
阅读更多...
8.19 校招 内推 面经

8.19 校招 内推 面经

绿泡泡&#xff1a; neituijunsir 交流裙&#xff0c;内推/实习/校招汇总表格 1、校招 | Momenta 2024校园招聘正式启动 (内推) 校招 | Momenta 2024校园招聘正式启动 (内推) 2、校招 | TP-Link 联洲国际2024秋季校园招聘正式启动 (内推) 校招 | TP-Link 联洲国际2024秋季…
阅读更多...
vue菜单

vue菜单

1、创建组件 TreeMenu <template><template v-for"item in menuTree" :key"item._id"><el-sub-menu v-if"item.children && item.children.length > 0" :key"item._id" :index"item.name">&l…
阅读更多...
第5步---MySQL的DQL查询语句

第5步---MySQL的DQL查询语句

第5步---MySQL的DQL查询语句 DQL 数据库查询语言 1.基本的查询语句 1.完整得查询得语句 简化版的查询语句 select * from 表名 where 条件; 2.创建用于测试的表 1.创建测试数据 -- DQL -- 创建测试表 DROP TABLE IF EXISTS product; CREATE TABLE IF NOT EXISTS product( pi…
阅读更多...
一文详解4种聚类算法及可视化（Python）

一文详解4种聚类算法及可视化（Python）

在这篇文章中&#xff0c;基于20家公司的股票价格时间序列数据。根据股票价格之间的相关性&#xff0c;看一下对这些公司进行聚类的四种不同方式。 苹果&#xff08;AAPL&#xff09;&#xff0c;亚马逊&#xff08;AMZN&#xff09;&#xff0c;Facebook&#xff08;META&…
阅读更多...
计算机毕设项目之基于django+mysql的疫情实时监控大屏系统(前后全分离)

计算机毕设项目之基于django+mysql的疫情实时监控大屏系统(前后全分离)

系统阐述的是一款新冠肺炎疫情实时监控系统的设计与实现&#xff0c;对于Python、B/S结构、MySql进行了较为深入的学习与应用。主要针对系统的设计&#xff0c;描述&#xff0c;实现和分析与测试方面来表明开发的过程。开发中使用了 django框架和MySql数据库技术搭建系统的整体…
阅读更多...
多线程实现与管理

多线程实现与管理

进程与线程 进程 &#xff1a; 进程是操作系统进行资源分配的最小单位&#xff0c;每执行一个程序、一条命令操作系统都会启动一个进程&#xff0c;进程是一个程序的执行过程&#xff0c;当程序启动时&#xff0c;操作系统会把进程的代码加载到内存中&#xff0c;并为新进程分配…
阅读更多...
uni-app根据经纬度逆解析详细地址

uni-app根据经纬度逆解析详细地址

uni-app中的getLocation()方法可以获取到用户当前的地理位置&#xff08;经纬度&#xff09;、速度。 但是返回参数中的address在app中才会显示&#xff0c;小程序中不会显示&#xff0c;所以我们需要进行逆解析其地址&#xff0c;解析出它的地址信息。 1.首先要在腾讯位置服务…
阅读更多...
ahooks.js：一款强大的React Hooks库及其API使用教程（二）

ahooks.js：一款强大的React Hooks库及其API使用教程（二）

一、ahooks.js简介二、ahooks.js安装三、继续ahooks.js API的介绍与使用教程21. useLocalStorageState22. useSessionStorageState23. useClickAway24. usePersistFn25. useCreation26. useFullscreen27. useInViewport28. useInfiniteScroll29. usePagination30. useDynamicLi…
阅读更多...
如何正确地设置Outlook SMTP发送电子邮件（wordpress配置）

如何正确地设置Outlook SMTP发送电子邮件（wordpress配置）

如何正确地设置Outlook SMTP发送电子邮件&#xff08;wordpress配置&#xff09; 作者&#xff1a;虚坏叔叔 博客&#xff1a;https://pay.xuhss.com 早餐店不会开到晚上&#xff0c;想吃的人早就来了&#xff01;&#x1f604; 正在寻找正确的Outlook SMTP设置&#xff1f…
阅读更多...
LRU 算法

LRU 算法

LRU 缓存淘汰算法就是一种常用策略。LRU 的全称是 Least Recently Used&#xff0c;也就是说我们认为最近使用过的数据应该是是「有用的」&#xff0c;很久都没用过的数据应该是无用的&#xff0c;内存满了就优先删那些很久没用过的数据。 力扣&#xff08;LeetCode&#xff09…
阅读更多...
[Linux] C获取键盘输入值

[Linux] C获取键盘输入值

检测指令&#xff1a;cat /dev/input/event1 | hexdump 当键盘有输入时&#xff0c;会有对应的一堆16进制输出。它其实对应着input_event结构体【24字节】。 struct input_event ​​​​​​​{struct timeval time;__u16 type;__u16 code;__s32 value; }; #include <st…
阅读更多...
最新文章

Copyright @ 2022~2023