uniapp使用企业微信SDK踩坑指南
这篇文章,主要是面向工作中在企业微信里引入jssdk的人。其实企业微信jssdk和微信公众号的jssdk是差不多的,但这里面有很多需要注意的地方。特别是在uniapp中使用企业微信SDK,有个很大的坑,因为无法联系企业微信的技术人员,这个问题拖了很久,经过不断的试错,最后才得以解决。
企业微信开发文档
developer.work.weixin.qq.com/document/pa…
引入JSSDK, 然后注册
<!--按照官方文档需要引入这两个SDK-->
<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>
正常的话,从这一步开始,成功引入以后在相关的页面根据企业微信的文档来构建相关的接口 调用 config和angetConfig,调用成功后就可以使用企业微信提供的相关API了。在windows电脑上和安卓手机端也确实很快就成功了。
注册过程
- 通过config接口注入权限验证配置
wx.config({beta: true,// 必须这么写,否则wx.invoke调用形式的jsapi会有问题debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId: '', // 必填,企业微信的corpIDtimestamp: , // 必填,生成签名的时间戳nonceStr: '', // 必填,生成签名的随机串signature: '',// 必填,签名,见 附录-JS-SDK使用权限签名算法jsApiList: [] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
});
- 通过ready接口处理成功验证
wx.ready(function(){// config信息验证后会执行ready方法,//所有接口调用都必须在config接口获得结果之后,//config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。//对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
- 通过error接口处理失败验证
wx.error(function(res){});
- 继续注册wx.agentConfig
wx.agentConfig({corpid: '', // 必填,企业微信的corpid,必须与当前登录的企业一致agentid: '', // 必填,企业微信的应用id (e.g. 1000247)timestamp: , // 必填,生成签名的时间戳nonceStr: '', // 必填,生成签名的随机串signature: '',// 必填,签名,见附录-JS-SDK使用权限签名算法jsApiList: [], //必填,传入需要使用的接口名称success: function(res) {// 回调},fail: function(res) {if(res.errMsg.indexOf('function not exist') > -1){alert('版本过低请升级')}}
});
以上是根据企业微信提供的文档整理的一些代码片段,在开发过程中,还需要对这些注册进行二次封装,便于不同页面使用。
踩坑分析
就在我在windows电脑上实现了相应的功能觉得万事大吉的时候,后来在测试的时候,发现了一个uniapp和企业微信的一个大坑。由于uniapp在转H5的过程中在内部编译的时候会将全局变量wx给用掉来适应微信公众号(不知道uniapp以后会不会做企业微信的适配而区分wx和jweixin,但现阶段没有)。这样一来企业微信的wx对象就无法使用了。后来查阅文档说可以用jWeixin这个对象来替代(企业微信的sdk返回了两个对象一个wx一个jWeixin)。但是在我们实际的使用的时候会发现jWeixin这个对象在ios或者mac中居然不生效无法获取(这个是什么鬼,这个锅好像应该是企业微信来背把)。这就导致了在企业微信上无法正常运行,一直卡在wx.agentConfig这儿走不下去,通过网络搜索我们会找到很多处理的方法,但是我一一试过之后好像都不行。
- 方法1,在main.判断设备将wx和jWeixin挂在vue的原型上,经测试不行。
- 方法2,将wx.agentConfg延时注册,说是苹果设备中是在页面完全加载完成以后才注入的,我将wx.agentConfig延迟1000ms执行依然失败。
- 方法3,更换SDK,下面为文章链接,但是我尝试过依然不行,更换SDK甚至导致了公众号都不能正常使用,所以放弃。
developers.weixin.qq.com/community/d…
- 使用npm安装依赖包解决 ,但是该方法依然存在mac设备的适配问题,所以我甚至都不愿意尝试。
npm install jweixin-module --save
还有其他的一些方法,就不一一描述,反正都没有成功,最后在unaipp的论坛看到一篇文章跟我的情况类似,根据他提供的代码片段尝试了一下,最终成功。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-62oXehwL-1655362052916)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6c6ba7f7482e45e69975544103b4dc0d~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)] 上图是最后在mac电脑的截图,图中右侧是企业微信侧边栏内嵌的h5网页。
正确的实现方法
首先在第一步引入SDK的时候,必须将wx对象重置
<!--按照官方文档需要引入这两个SDK-->
<script> window.wx = null;//uniapp默认的wx重置 </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>
在封装的工具函数work.js中,根据设备使用不同的对象,并且将wx.agentConfig在wx.ready中注册,为了保险起见,我依然延迟1000ms注册。
import {getWorkConfig,getWorkAgentConfig} from "@/api/work.js"
export function initWxConfig() {return getTicket;
}const getTicket = new Promise((resolve, reject) => {getWorkConfig(location.href).then(res=>{if (/(iPhone|iPad|iPod|iOS|macintosh|mac os x)/i.test(navigator.userAgent)) {wx.config({beta: true,// 必须这么写,否则wx.invoke调用形式的jsapi会有问题debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId: res.data.appId, // 必填,企业微信的corpIDtimestamp:res.data.timestamp , // 必填,生成签名的时间戳nonceStr: res.data.nonceStr, // 必填,生成签名的随机串signature: res.data.signature,// 必填,签名,见 附录-JS-SDK使用权限签名算法jsApiList: res.data.jsApiList // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来});wx.ready(function() {// resolve(wx);setTimeout(()=>{getWorkAgentConfig(location.href).then(response=>{wx.agentConfig({corpid: response.data.corpid, // 必填,企业微信的corpid,必须与当前登录的企业一致agentid: response.data.agentid, // 必填,企业微信的应用id (e.g. 1000247)timestamp: response.data.timestamp, // 必填,生成签名的时间戳nonceStr: response.data.nonceStr, // 必填,生成签名的随机串signature: response.data.signature,// 必填,签名,见附录-JS-SDK使用权限签名算法jsApiList: response.data.jsApiList, //必填,传入需要使用的接口名称success: function(data) {resolve(data);},fail: function(err) {if(err.errMsg.indexOf('function not exist') > -1){reject('版本过低请升级');}}});})},1000)})}else{// window.wx = window.jWeixin;jWeixin.config({beta: true,// 必须这么写,否则wx.invoke调用形式的jsapi会有问题debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId: res.data.appId, // 必填,企业微信的corpIDtimestamp:res.data.timestamp , // 必填,生成签名的时间戳nonceStr: res.data.nonceStr, // 必填,生成签名的随机串signature: res.data.signature,// 必填,签名,见 附录-JS-SDK使用权限签名算法jsApiList: res.data.jsApiList // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来});jWeixin.ready(function() {// resolve(wx);getWorkAgentConfig(location.href).then(response=>{jWeixin.agentConfig({corpid: response.data.corpid, // 必填,企业微信的corpid,必须与当前登录的企业一致agentid: response.data.agentid, // 必填,企业微信的应用id (e.g. 1000247)timestamp: response.data.timestamp, // 必填,生成签名的时间戳nonceStr: response.data.nonceStr, // 必填,生成签名的随机串signature: response.data.signature,// 必填,签名,见附录-JS-SDK使用权限签名算法jsApiList: response.data.jsApiList, //必填,传入需要使用的接口名称success: function(data) {resolve(data);},fail: function(err) {if(err.errMsg.indexOf('function not exist') > -1){reject('版本过低请升级');}}});})})}}).catch(err=>{reject(err);})
})
在页面调用initWxConfig方法成功以后,使用具体的api依然判断设备,使用wx和jWeixin。
onLoad() {initWxConfig().then((jWeixin) => {this.getUserID();}).catch((err) => {return this.$util.Tips({title: err});});}
},
methods:{getUserID(){if (/(iPhone|iPad|iPod|iOS|macintosh|mac os x)/i.test(navigator.userAgent)){wx.invoke('getContext', {}, (res)=>{if(res.err_msg == "getContext:ok" && res.entry == "single_chat_tools"){let entry = res.entry ; //返回进入H5页面的入口类型,//目前有normal、contact_profile、single_chat_tools、group_chat_tools、chat_attachmentwx.invoke('getCurExternalContact', {entry}, (response)=>{if(response.err_msg == "getCurExternalContact:ok"){//返回当前外部联系人userIdthis.userId = response.userId;this.$Cache.set('work_user_id',response.userId)this.getInfo();}});}else if(res.err_msg == "getContext:ok" && res.entry == "group_chat_tools"){uni.reLaunch({url:"/pages/work/groupInfo/index"})}});}else{jWeixin.invoke('getContext', {}, (res)=>{if(res.err_msg == "getContext:ok" && res.entry == "single_chat_tools"){let entry = res.entry ; //返回进入H5页面的入口类型,//目前有normal、contact_profile、single_chat_tools、group_chat_tools、chat_attachmentjWeixin.invoke('getCurExternalContact', {entry}, (response)=>{if(response.err_msg == "getCurExternalContact:ok"){//返回当前外部联系人userIdthis.userId = response.userId;this.$Cache.set('work_user_id',response.userId)this.getInfo();}});}else if(res.err_msg == "getContext:ok" && res.entry == "group_chat_tools"){uni.reLaunch({url:"/pages/work/groupInfo/index"})}});}}
}
至此uniapp使用企业微信SDK在mac电脑的适配问题就得到了解决,如果有更好的方法或者建议,欢迎一起讨论。
uniapp使用企业微信SDK踩坑指南相关推荐
- 企业微信H5踩坑指南
企业微信开发H5功能,正在进行中,需要记录的点有两个: 第一是:域名验证,针对SPA应用,下载下来的验证文件跟index.html同一目录或者使用其他方式,需要保证域名+文件名可以访问即可,再次登录微 ...
- tabbar角标 小程序_【沃行课堂】恭喜你遇到“坑”,小程序踩坑指南
上周我们的开发小哥哥带领我们一起领略了开发中遇到的各种问题,以及基于SaaS模式的平台技术架构及实现.本周我们换个方向,由高级开发工程师秋哥带领大家共同探讨下小程序开发中踩过的坑.秋哥会从公司的几个小 ...
- 高德定位SDK踩坑-高精度模式下获取不到GPS定位(无网络环境)
高德定位SDK踩坑-高精度模式下获取不到GPS定位(无网络环境) 关键字:定位模式 高精度模式 GPS定位 无网络 一句话描述问题:高精度模式在断网环境下不可靠.有几率重复报错或使用缓存定位,不使用G ...
- 微信开发踩坑之旅 之 开发准备及服务器配置
在工作和兴趣的机缘巧合之下,我开始接触微信开发.在这里简单记述自己的微信开发踩坑之旅. 首先,由于本人标准的理工科生,记述的语言有所不足,我尽量说明准确和详细点. 本文记述主线 ·申请公众号 ·公众号 ...
- 我的域名注册踩坑指南
我的域名注册踩坑指南 一.前言 二.目前拥有的纯字母域名 ds.mba csu.asia mpkq.org impkq.com openhm.com okotlin.com ktanjava.com ...
- Android applink 踩坑指南
Android applink 踩坑指南 原理 接入步骤 将链接与activity关联起来 加入meta data 生成身份验证JSON 真机测试 结论 官方文档 原理 与url scheme不同的地 ...
- Manjaro KDE 18.1.2踩坑指南(含双显卡黑屏解决方案)
Manjaro KDE 18.1.3踩坑指南(含双显卡黑屏解决方案) 一.前言 用了win10那么久,对于windows环境特别厌恶,处处商业化严重的软件及广告,还有杀不完的病毒,更不完的新,感觉电脑 ...
- 微信开发踩坑系列一之Native支付
微信开发踩坑系列一之Native支付 1.前言 1.1.文章说明 1.2.微信支付简介 1.3.项目技术栈 2.Native支付开发 2.1.官方描述 2.2.两种模式介绍 2.3.开发前准备工作 2 ...
- 加入域时出现以下错误 登陆失败 该目标账户名称不正确_微信支付踩坑合集:微信小程序支付失败是什么原因?持续更新...
微信小程序开发的过程一定会遇到各种问题,最让人棘手的就是支付问题,因为没有支付做商城类似的小程序就没有办法完成最关键的一步.那么支付失败到底什么原因呢?一下子收集了几个错误类似,希望对你有帮助: No ...
- 微信分享踩坑:config:invalid signature错误的解决方法
微信分享踩坑:config:invalid signature错误的解决方法 一般出现这个错误多半是签名获取失败,而我根据我获取到的签名跟签名算法校验里面得到的签名是一样的,于是查找大量文档,核实可能 ...
最新文章
- Linux多线程的同步-----信号量和互斥锁
- 数据预处理之独热编码(One-Hot)
- phpcms v9中模板标签和联动菜单的使用方法详解
- ORACLE 分区表 PARTITION table
- DotNetNuke 框架总揽
- linux 普通用户间切换,Linux中管理员用户与普通用户之间的切换
- Vue + Spring Boot 项目实战(二):使用 CLI 搭建 Vue.js 项目
- ubuntu16 安装opencv
- php for循环建数据
- [LeetCode]题解(python):146-LRU Cache
- xposed微信模块源代码
- STM32F103系列(二):如何使用串口下载程序
- linux下python网络编程框架-twisted安装手记,linux下Python网络编程框架-Twisted安装
- dell perch330_使用Perch CMS构建快速,可扩展的网站
- man page 中代号的意思
- python并发编程之semaphore(信号量)_python 之 并发编程(守护进程、互斥锁、IPC通信机制)...
- Appium架构介绍与环境安装
- 图解在EXCEL中,通过身份证自动获得出生日期和性别。
- 【Banana PI Leaf S3开发板试用体验】MicroPython环境搭建
- #小何不断努力#8.18
热门文章
- appleid注册服务器错误,连接apple id 服务器时出错(Apple ID 验证连接失败,试试这招)...
- win8页面 html,Win8 Metro风格界面设计HTML+CSS网页模板
- C位流行语言,“2018年十大流行语”
- 转:YY淘宝商品数据库设计
- Ubuntu Linux 8.04系统下智能拼音输入法
- oracle数据库查表函数,Oracle数据库的常用函数列表快速查1
- python cprofile_《Python高性能编程》——2.6 使用cProfile模块
- java泛型:T与?的使用及区别
- ubuntu添加桌面快捷方式图标
- IIS6,IIS7,IIS8的脚本自动安装