PC端微信扫码登陆

1、跳转URL扫码

https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 

2、内置微信二维码扫码登陆

  mounted() {
    // 编码回调地址
    let url = encodeURIComponent(process.env.VUE_APP_ROUTE + "/pc/middleware");
    var obj = new WxLogin({
      // 获取登陆二维码参数
      self_redirect: true,
      id: "login_container", // 渲染二维码的div的ID
      appid: process.env.VUE_APP_WEIXIN_APP_ID,// 公众号的appid
      scope: "snsapi_login",// 写死
      redirect_uri: url,// 回调地址
      state: "",
      style: "black",// 二维码黑白风格white，black或不填
      href: "https://showjane2020.oss-cn-hangzhou.aliyuncs.com/show/css/init.css",
     // href可以直接放八色64的二维码样式或服务器样式文件
    });
     

    window.addEventListener("message", (e) => { 
        // 监听扫码后的message事件，获取code
        // 拿到code后去请求后端接口，获取accessToken, openId, unionId等信息
      let data = e.data;
    });
  },


 

3、使用vue-wxlogin插件

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

// 使用插件生产的组件
<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: 'wx6**9da50', // 后端提供
redirect_uri: 'http：www.*com', // 后端提供

 扫码生产的二维码后，页面的url会给一个带code的地址 ，去获取code

let code = window.location.href.split('?')[1];

code = code.substring(5, code.indexOf('&'));