Vue WeChat scan code login

Vue WeChat scan code login

1. Use vue plugin

// 安装
npm install vue-wxlogin --save-dev
// js引入
import wxlogin from 'vue-wxlogin'
components: { wxlogin }

2. Use

<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', // 后端提供

Then the WeChat QR code will be displayed on the webpage written by myself

After scanning, the URL of the page will give an address with code to get the 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()
            }

Give the code to the backend, and the backend will return the person’s information to you