企业微信扫码登录有两种方式，一种是构建独立窗口的二维码，第二种是构建内嵌二维码。我的项目中选第二种
二维码构造流程请查阅官方文档
步骤一：引入JS文件
构建内嵌二维码第一步就是引入官方的js 文件，在需要展示企业微信网页登录二维码的网站引入如下JS文件，（支持https）：js地址，建议下载下来在本地使用，我自己的项目使用的是vue-cli 3.xx 的，下载下来的js 放到项目目录public下，然后在入口也引入
文件目录
。别忘了，还需要配置一下webpack，在vue.config.js做如下配置:
configureWebpack: {
externals: {
'wxLogin': 'WwLogin'
},
resolve: {
alias: {
'@': resolve('src')
}
}
}
这样就可以全局访问WxLogin这个方法了。当然也可以直接在你需要的内嵌二维码的地方引入模块 import WwLogin from your_path。
步骤二：引入JS文件
在需要使用微信登录的地方实例JS对象：
WwLogin({
"id" : "二维码容器的id",
"appid" : "",
"agentid" : "",
"redirect_uri" :"",
"state" : "",
"href" : "",
});
参数说明请请查阅官方文档。困惑我最多的是这个 redirect_uri，这个是授权回调地址，他的作用就是当你完成扫码之后，微信官方会将扫码结果返回的数据作为参数拼接到redirect_uri，并会自动跳转redirect_uri 所指向的路由。根据官网说明，redirect_uri 需要 使用 encodeURIComponent 编码一下。我的项目redirect_uri 指向当前页，因此这个参数 就应该是redirect_uri: encodeURIComponent(window.location.href)。在vue项目中，我们就可以通过 watch 去监听路由变化，然后获取路由中的 code参数（这个参数是后台用来获取企业微信用户信息的必要参数），
$route: {
handler: function(route) {
const query = route.query;
if (query) {
this.redirect = query.redirect;
this.otherQuery = this.getOtherQuery(query);
if (this.otherQuery.code) {
this.userWxLogin(this.otherQuery.code)
.then(res => {
this.loginSuccess();
this.loginFailed = false;
})
.catch(err => {
this.loginFailed = true;
});
//成功后删除不必要的参数（state,code,appid 在其他页面并不需要），保证路由是干净的
delete this.otherQuery.code;
delete this.otherQuery.state;
delete this.otherQuery.appid;
}
}
},
immediate: true
}
整个登录流程就结束了。
当然了还有一个参数是href，是用来定义 二维码样式的.
.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.status_icon {display: none !important}
.impowerBox .status {text-align: center;}
你可以专门做一个这个样式文件，然后放到支持https协议的资源地址的服务器上。或者转成 base64 在线base64编码，之后将编码后的字符串传递给href 参数href:data:text/css;base64,编码后的字符串
例子
。
我们并不需要自己去判断二维码是否过期，微信自动会给你做判断，如果过期二维码区域会自动增加刷新按钮，点击就刷新二维码了。要注意的是，先要在企业微信开通授权回调域名，这个域名应该跟 redirect_uri 参数所在的域名一直，否则二维码会获取失败。
失败例子
加入 WwLogin 这个函数的参数不对，也会在插入二维码的区域中做提示。如果参数全对，就会生成如下二维码：
image.png
实际上，不管是构造独立二维码 还是 构造内嵌二维码 原理是一样的，内嵌二维码 实际上就是在指定容器中加载了一个 iframe。另外，一直好奇的是，为什么扫码成功之后，在手机上点击确认登录页面就会自动跳转到 redirect_uri 指定的路由呢，当我打开控制台就发现，其实 引入的js文件中，会有一个 jsonp的轮询，以此来判断二维码的各个阶段的状态。然后再成功的状态下给你跳转到指定路由。
由于配置回调域名不能是本地域名，所以在本地开发的时候做一个内网穿透，可以使用natapp这个软件，免费的就行，传送门
结束
整个过程就是这样，没有什么坑。
网友评论