vue 微信扫码登录

Hello.鑫

已于 2024-01-05 14:44:44 修改

阅读量1.1k

点赞数 5

文章标签： vue.js 微信前端

于 2024-01-05 14:41:05 首次发布

本文链接：https://blog.csdn.net/weixin_44037153/article/details/135401643

版权

1、首先引入wxLogin.js 下载地址：https://download.csdn.net/download/weixin_44037153/88703768

import WxLogin from '../js/wxLogin.js'

2、使用方法
在页面内创建id

<div id="login_container"></div>

引用方法

new WxLogin({
                id: "login_container",
                appid: "wx67cfaf9e3ad31a0d",  // 应用唯一标识，在微信开放平台提交应用审核通过后获得
                scope: "snsapi_login", //应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
                redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC", //重定向地址，回调地址，必须使用encodeURLComponent()编码
                state: encodeURIComponent(window.btoa("http://127.0.0.1:8080" + _this.$route.path)), //用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
                style: 'blank', //提供"black"、"white"可选，默认为黑色文字描述。
                href: 'data:text/css;base64,QGNoYXJzZXQgIlVURi04IjsKLmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDE3MHB4OyBib3JkZXI6IG5vbmU7IG1hcmdpbi10b3A6IDB9Ci5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9Ci5pbXBvd2VyQm94IC5pbmZvIHt3aWR0aDogMTcwcHg7fQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9Ci5pbXBvd2VyQm94IC5zdGF0dXMge3RleHQtYWxpZ246IGNlbnRlcjt9IAo=', //自定义样式链接，第三方可根据实际需求覆盖默认样式。  只能使用https链接或者base64编码的地址
            });

注意：href必须使用 text/css模式,生成的base64添加到’data:text/css;base64,'后面就可以了