vue 微信扫码登录
1.使用vue插件
// 安装
npm install vue-wxlogin --save-dev
// js引入
import wxlogin from 'vue-wxlogin'
components: { wxlogin }
2.使用
<wxlogin
:appid="appid"
:scope="'snsapi_login'" // 网页固定的
:theme="'black'"
:redirect_uri="redirect_uri"
:href='bast64css'
rel="external nofollow"
>
</wxlogin>
// data
bast64css: 'data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O2hlaWdodDoyMDBweH0NCi5pbXBvd2VyQm94IC5pbmZvIHt3aWR0aDogMjAwcHh9DQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9DQouaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7fQ0KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lfQ0KaWZyYW1lIHtoZWlnaHQ6IDMyMnB4O30NCg==',
appid: 'wx64914809da50', // 后端提供
redirect_uri: 'http%3A%2F%2Flant.com', // 后端提供
这样微信二维码就会显示在自己写的网页上
扫描后,页面的url会给一个带code的地址 ,去获取code
if (window.location.href.indexOf('code') >= 0) {
let code = window.location.href.split('?')[1];
code = code.substring(5, code.indexOf('&'));
this.wechatcode = code
this.wechatLogin()
}
把code给后端,后端会返回给你这个人的信息