使用未认证的订阅号实现微信登陆|7B2主题优化插件

关于7B2主题，其实本身功能算是比较多的。并且第三方登录之类的功能也比较完善，尤其是最近上线了聚合登录。但有一个问题一直困扰着我，如果使用7b2官方的微信登录功能，就必须是验证的订阅号、服务号之类的，还得花钱并且也比较麻烦。

1.有没有办法可以使用未认证的订阅号来实现微信登录

答案是有的，通过模板兔大佬所开发的插件来实现，目前星空已经实现了用未认证的订阅号来实现微信登录的功能了，并且已经集成在登录弹窗内了。具体大家可以在本站体验一下~

本次教程是付费内容，支持未认证的订阅号来实现关注公众号一键登录网站！已认证的公众号也是可以使用的哦~

在用户关注公众号后回复“登录”二字即可获取验证码，输入验证码后即可登录。

2.这么做的好处是什么

布丁认为至少有三点好处：

1. 不用认证公众号即可实现微信登录功能
2. 提供公众号粉丝数量，尤其是通过网站引流到公众号的站长
3. 方便用户登录，毕竟现在不用微信的人还是比较少的

3.开始进入正题（教程开始）

3.1 下载插件

插件完全免费：https://github.com/erphp/erphp-weixin-scan （请自备魔法或者从本站下载）

下载后在后台中上传并安装启用。

然后新建页面，输入以下短码并保存页面

[[erphp_weixin_scan]]

3.2 配置公众号

首先，进入微信公众号后台：https://mp.weixin.qq.com/

找到设置与开发选项 –> 基本配置，从中获取插件所需要的信息。

插件后台设置

4.集成到B2主题

[content_hide]
打开你的宝塔面板亦或是通过其他软件连接，从B2主题中将/Modules/Templates/VueTemplates.php，复制粘贴一份作为备份，然后下载至本地进行编辑，或在宝塔面板中进行编辑。

搜索大概至248行，将以下代码复制到如图所示红框位置即可

<a class="button222" onclick="wxlogin()" style="cursor: pointer; color: #7bb32e; background: rgba(0, 132, 255, 0.05); font-size: 12px; border-radius: 3px; border: 0; display: flex; align-items: center; height: 30px; line-height: 30px; padding: 0 10px;"><i class="b2font b2-weixin b2-weixin" style="font-size: 14px; margin-right: 4px;"></i>微信</a>

然后在223行左右加入如图所示红框位置或者搜索：'登录', 'b2').'</a></span></p>

<div id="wxlogin" class="entry-content" style ="display:none;margin-top:10px; text-align: center;">
<style>
.erphp-weixin-scan{margin:0 auto;position:relative;max-width: 300px;}
.erphp-weixin-scan .ews-title{text-align:center;font-size:18px;}
.erphp-weixin-scan img{max-width: 100%;height: auto;}
.erphp-weixin-scan .ews-box{text-align: center;}
.erphp-weixin-scan .ews-box .ews-input{border:1px solid #eee;border-radius:3px;padding:6px 12px;width:150px;height: 35px;box-sizing: border-box;}
.erphp-weixin-scan .ews-box .ews-button{background: #07C160;border:none;padding:7px 12px;color:#fff;border-radius: 3px;font-size:14px;cursor: pointer;height: 35px;box-sizing: border-box;}
.erphp-weixin-scan .ews-tips{text-align:center;font-size:13px;color:#999;margin-top:10px;}
</style>
<div class="erphp-weixin-scan">
<div class="ews-title">微信扫一扫关注</div>
<img src="https://www.salanghe.com/gongzhonghao.jpg" title="这里修改为你的图片链接" alt="微信登陆插图">
 
<div class="ews-box">
<input type="text" id="ews_code" class="ews-input" placeholder="验证码">
<button type="button" class="ews-button">验证登录</button>
</div>
<div class="ews-tips">
如已关注，请回复“登录”二字获取验证码
</div>
</div>
</div>

搜索

<div class="login-box-in" v-show="!(invitation != 0 && (loginType == 2 && !invitationPass))">

替换成

<div id="wxlogin1" class="login-box-in" v-show="!(invitation != 0 && (loginType == 2 && !invitationPass))">

再将以下代码添加至站点的底部即可

<script>
function wxlogin(){
var wx = document.getElementById("wxlogin")
var wx1 = document.getElementById("wxlogin1")
if(wx.style.display == "none"){
wx.style.display = "block"
wx1.style.display = "none"
 
}else{
wx.style.display = "none"
wx1.style.display = "block"
}
}
</script>

最后按照下图开启相应设置

[/content_hide]

好了，这就完成了，如果有问题可以私聊我！仅限B2 Pro主题用户。