内嵌式js微信扫码登录及自定义样式

最新推荐文章于 2024-04-07 09:28:44 发布

李维山

最新推荐文章于 2024-04-07 09:28:44 发布

阅读量1.7w

点赞数 10

文章标签：微信登录内嵌 js

本文链接：https://blog.csdn.net/msllws/article/details/81223949

版权

Javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

关于微信扫码登录网站的功能介绍，请阅读官方文档【网站应用微信登录开发指南】

根据官方文档我们知道微信扫码登录有两种方式

一种是跳转到一个大黑屏二维码界面进行扫码登录：

（参见博客：PHP实现跳转式微信扫码登录网站）

另外一种是把二维码内嵌到页面中，这样可以自定义一些样式，例如二维码的大小、是否有标题等，默认效果如下：

（官方文档说的挺好，JS微信登录主要用途：网站希望用户在网站内就能完成登录，无需跳转到微信域下登录后再返回，提升微信登录的流畅性与成功率）

实现代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>内嵌式 - 微信扫码登录</title>
<!-- 引入微信扫码登录js文件 -->
<script type="text/javascript" src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
</head>
<body>
  <!-- 放置二维码的div -->
  <div id="login_container"></div>
</body>
<script type="text/javascript">
var obj = new WxLogin({
  self_redirect:true,
  id:"login_container", 
  appid: "wxbdc5610cc59c1631", 
  scope: "snsapi_login", 
  redirect_uri: encodeURIComponent("http://"+window.location.host+"/..."), 
  state: Math.ceil(Math.random()*1000), 
  style: "black",
  href: ""
});
</script>
</html>

参数说明（摘自官方文档）：

这里的href参数可以自定义扫码样式，一种据说是引入一个https地址的css文件例如：href: "https://lws.com/test.css"，由于没有配置https所以没有实践，另一种是把样式代码进行base64加密放到href参数中。

官方文档给的样式代码如下（每条代表的样式自己理解）：

.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.status_icon {display: none}
.impowerBox .status {text-align: center;}

我们用站长工具对样式代码进行base64加密：

修改href参数，格式：href: "data:text/css;base64,base64加密后的字符串"

href:"data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIwMHB4O30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0NCi5pbXBvd2VyQm94IC5zdGF0dXMge3RleHQtYWxpZ246IGNlbnRlcjt9"

样式如下，二维码变小了，默认的标题去掉了：

李维山

关注

10
点赞
踩
39

收藏

觉得还不错? 一键收藏
打赏
6
评论
内嵌式js微信扫码登录及自定义样式

关于微信扫码登录网站的功能介绍，请阅读官方文档【网站应用微信登录开发指南】根据官方文档我们知道微信扫码登录有两种方式一种是跳转到一个大黑屏二维码界面进行扫码登录：（参见博客：PHP实现跳转式微信扫码登录网站）另外一种是把二维码内嵌到页面中，这样可以自定义一些样式，例如二维码的大小、是否有标题等，默认效果如下：（官方文档说的挺好，JS微信登录主要用途：网站希望用户在网站内就...
复制链接

扫一扫