企微 - 使用jsdk的 openDefaultBrowser 实现打开默认浏览器

ゝ一世哀愁。 2021-09-09 03:10 1653阅读 1赞

今天应项目需求，要使用 **企业微信的jsdk** 写一个demo实现一进入页面就**跳转默认浏览器**的功能，一开始我直接使用的是wx.config来实现这个需求的，但是发现并不能实现这样的功能，跟大佬找了很多方法，但是都无法实现，后面才发现 **wx.config 和 wx.agentConfig 是有很大的区别的，config 注入的是企业的身份和权限，而 agentConfig 注入的是应用的身份和权限**。尤其是当调用者为第三方服务商时，通过config无法准确区分出调用者是哪个第三方应用，而在部分场景下，又区分严谨区分出第三方应用身份，此时即需要通过agentConfig来注入应用的身份信息。（PS：这部分在 [企微官方文档][Link 1] 是有注明的。）大家在使用agentConfig的时候要看一下此时的企微版本是3.0.24及以后版本就不需要先注入config再注入agentConfig，可以直接注入agentConfig 方法即可。

这里我分享一下我的代码和效果图。

###### 1、效果图：我这里就放一下图片，就不录小视频放上来了。 ######

![在这里插入图片描述][fa046e339ed190c09e7d1194001c4f7d.png]  
  一进入页面，就会自动触发跳转浏览器啦，这里面的流程是：先请求接口拿到 wx.config 和 wx.agentConfig 所需要的参数，然后 注入 wx.config 和 wx.agentConfig，注入成功之后 直接调用 openDefaultBrowser 方法即可，注意：openDefaultBrowser 是要放在 wx.invoke 里面使用的

wx.invoke('openDefaultBrowser', { 
    	'url': 'https://www.baidu.com/'
    }, function (res) { 
    	console.log("打开浏览器~~~res" + res)
    	if (res.err_msg == "openDefaultBrowser:ok") { 
    		alert('跳转成功！')
    	}
    });

这里给大家分享一下如何使用企业微信的开发者模式，打开企业微信，在企业微信的边边按住**快捷键：ctrl+alt+shift+d** 之后会弹出一个框，如下图，点击确定即可  
![在这里插入图片描述][c6b866f601e36e56233743a197e436b7.png]  
  然后在页面空白处点击右键 选择第一项（DevTools），就会出现下面的弹框了，出现这样的框大家应该就会使用了，我这里就不细说了。出现下面这几个名称的时候就表示这个方法调用成功了。  
![在这里插入图片描述][415deffb5c28bb55dc09b590a3ca48a6.png]

###### 2、相关代码： ######

<!DOCTYPE html>
    <html lang="en">
    
    <head>
    	<meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>jsdk demo</title>
    	<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    	<script src="./js/jquery-1.8.3.min.js"></script>
    
    </head>
    
    <body>
    	<script type="text/javascript">
    		$(function () { 
    			var urls = window.location.href;
    			// 调用接口请求需要的参数回来
    			$.ajax({ 
    				url: "http://reode.qiweidss.cn/ndsd/qw/authorize",
    				type: "post",
    				dataType: "json",
    				data: {  url: urls },
    				success: function (res) { 
    					if (res.code == 0 || res.code == '0') { 
    						console.log('res------------->', res.data)
    						var json = res.data;
    						wx.agentConfig({ 
    							corpid: json.corpId, // 必填，企业微信的corpid，必须与当前登录的企业一致
    							agentid: '1000247', // 必填，企业微信的应用id （e.g. 1000247）
    							timestamp: json.timestamp, // 必填，生成签名的时间戳
    							nonceStr: json.noncestr, // 必填，生成签名的随机串
    							signature: json.signature,// 必填，签名，见附录-JS-SDK使用权限签名算法
    							jsApiList: ['openDefaultBrowser'], //必填，传入需要使用的接口名称
    							// 没有效果的时候 可以直接给默认值试一下，因为有可能签名不对 -- 可以直接登录企微平台，在里面生成
    							// corpid: 'ww32d14c7f4a091112', // 必填，企业微信的corpid，必须与当前登录的企业一致
    							// agentid: '1000247', // 必填，企业微信的应用id （e.g. 1000247）
    							// timestamp: 1626779462, // 必填，生成签名的时间戳
    							// nonceStr: 'DqkX97N2U4', // 必填，生成签名的随机串
    							// signature: '9423da5de6b6fc16c28da8ca0241aae7d381a43b',// 必填，签名，见附录-JS-SDK使用权限签名算法
    							// jsApiList: ['openDefaultBrowser'], //必填，传入需要使用的接口名称
    							success: function (res) { 
    								// 回调
    								openBrowser()
    							},
    							fail: function (res) { 
    								if (res.errMsg.indexOf('function not exist') > -1) { 
    									alert('版本过低请升级')
    								}
    							}
    						});
    					}
    				}
    			})
    			function openBrowser() { 
    				wx.invoke('openDefaultBrowser', { 
    					'url': 'https://www.baidu.com/'
    				}, function (res) { 
    					console.log("打开浏览器~~~res" + res)
    					if (res.err_msg == "openDefaultBrowser:ok") { 
    						alert('跳转成功！')
    					}
    				});
    			}
    		})
    
    	</script>
    
    </body>
    
    </html>

###### 希望对大家有所帮助哟！ ######

[Link 1]: https://work.weixin.qq.com/api/doc/90001/90144/94325
[fa046e339ed190c09e7d1194001c4f7d.png]: /images/20210813/a0b7d5a67e434682abf3151a9af85a4f.png
[c6b866f601e36e56233743a197e436b7.png]: /images/20210813/835396613d4c4141b8694d40c242279e.png
[415deffb5c28bb55dc09b590a3ca48a6.png]: /images/20210813/a1f28d3b0698441da82fb568003a3f25.png