绑定企业微信

最新推荐文章于 2025-02-09 21:00:28 发布

前端小木

最新推荐文章于 2025-02-09 21:00:28 发布

阅读量685

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/liaoxuewu/article/details/84543711

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

首先需要生成二维码，可以用两种方式显示。第一，用dialog弹出框显示，这种方式绑定成功之后后台会返回一个成功页面，直接刷新页面；第二，用JS中的子窗口来显示，返回的成功页面只在子窗口中。第一种方式如下：

1.引入微信JS

<script src="http://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js"></script>

2.渲染二维码的dialog

<el-dialog
	:visible.sync="dialogBindWeChat"
	width="30%"
	:before-close="handleCloseBindWeChat"
	style="margin-top: 50px">
	<div id="login_container"></div>
 </el-dialog>

3.从后台获取appid，agentid，redirect_rui

返回结果：

{
    "status": 1,
    "msg": "",
    "data": {
        "redirectUri": redirectURL,
        "agentid": 1000001,
        "appId": "aw9e9d1b93a6a27dd0"
    }
}

4.生成二维码

setTimeout(function(){
	window.WwLogin({
		 "id" : "login_container",
		  "appid" : appId,
		  "agentid" : agentId,
		  "redirect_uri" : redirectURL,
		  "state" : "",
		   "href" : ""
	});
},30);

绑定成功后会跳转到前端路由地址，即是成功页面。
第二种方式是直接打开一个子窗口：

//获得窗口的垂直位置
var iTop = (window.screen.availHeight - 30 - 600) / 2;
 //获得窗口的水平位置
var iLeft = (window.screen.availWidth - 10 - 600) / 2; //获取这些是为了让子窗口居中

var child = window.open('https://open.work.weixin.qq.com/connect?appid=' + appId + '&agentid=' + agentId + '&redirect_uri=redirectURL&state=lxw&usertype=admin',
                                '_blank','height=600, width=600, top='+ iTop + ', left=' + iLeft + ', toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');

绑定成功之后需要在返回成功页面里需要关闭子窗口，刷新父窗口：

setTimeout(function(){
	window.opener.location.reload(); //刷新父窗口中的网页
	window.close();//关闭当前窗窗口
},3000);

我们还可以监听子窗口关闭状态，用一个定时器去轮询：

var timer = setInterval(checkChild, 500);
	function checkChild() {
		if (child.closed) {
			clearInterval(timer);
		}
	}

关注微博、微信公众号搜索前端小木，让我们一起学习成长。