vue 微信扫码登录

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,'后面就可以了

相关推荐
excel11 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼13 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping13 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙14 小时前
[译] Composition in CSS
前端·css
白水清风14 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix14 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780014 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端14 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧14 小时前
Promise 的使用
前端·javascript
NBtab14 小时前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端