PC端企业微信扫码登录和修改二维码下面的文字

PC端企业微信扫码登录和修改二维码下面的文字

1、在index.html文件里引入

https:
    <!-- <script src="https://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.7.js"></script> -->
http:
    <script src="http://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.7.js"></script>

2、在页面里添加一个div容器，写上id

<div id="qrCode"></div>

3、创建一个企业或者加入一个有管理员权限的企业
3.1、登录企业微信后台，进入应用管理

https://work.weixin.qq.com/

3.2、创建一个应用，然后进入

这里可以获取agentid，下面要用
3.3、退出去，找到我的企业


这里获取appid，下面要用

4、在vue的onMounted里或者react的useEffect里加入

    new WwLogin({
      id: "qrCode",
      appid: "上面步骤获取的",
      agentid: "上面步骤获取的",
      redirect_uri: encodeURIComponent(
        `http://192.168.1.1:80/#/home`
      ),//扫码成功跳转的地址，需要添加参数可直接在地址后面拼接
      state: Math.ceil(Math.random() * 1000),
      lang: "zh",
    });

5、再次进入应用管理，进入创建的应用，在最下面


这里把上方代码里面的IP和端口号添加进去（192.168.1.1:80）
注意：这里的ip和端口号要一致，不然二维码出不来
这时，就可以看见二维码了。

6、改变二维码下面的文字
6.1、首先文字需要用unicode进行编码，编码后需要加“\”后面的u去掉

修改前的
\u4f60\u597d\u554a
这是修改后的
\4f60\597d\554a

6.2、然后书写样式

#wx_default_tip{
	display:none
}
.info::before{
	content:"\4f60\597d\554a";
	color:#4c4c4c
}

6.3、对样式进行base64编码

I3d4X2RlZmF1bHRfdGlwewoJZGlzcGxheTpub25lCn0KLmluZm86OmJlZm9yZXsKCWNvbnRlbnQ6Ilw0ZjYwXDU5N2RcNTU0YSI7Cgljb2xvcjojNGM0YzRjCn0=

6.4、在代码里添加一个key

    new WwLogin({
      id: "qrCode",
      appid: "上面步骤获取的",
      agentid: "上面步骤获取的",
      redirect_uri: encodeURIComponent(
        `http://192.168.1.1:80/#/home`
      ),//扫码成功跳转的地址，需要添加参数可直接在地址后面拼接
      state: Math.ceil(Math.random() * 1000),
      lang: "zh",
      href: "data:text/css;base64,讲上面的base64编码复制过来"
    });

7、修改二维码大小
生成的二维码会在第二步创建的div容器里生成iframe标签，对该标签进行宽高设置，可以控制二维码大小

7、其他参数说明请参考官方文档

https://developer.work.weixin.qq.com/document/path/98268

这只是个人的方法，如果有更好的方法，欢迎留言

如果觉得对你有帮助的话，点个赞吧！