Vue pc 微信扫码登录-内嵌版

微信文档：

developers.weixin.qq.com/doc/oplatfo…

1.建立组建引入微信文件生成二维码

<div id="wxcode"></div>
// js
created () {

 const oScript = document.createElement('script');

    oScript.type = 'text/javascript';

    oScript.src = 'http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js';

    document.body.appendChild(oScript);

    

      setTimeout(function(){

        var obj = new WxLogin({

          id: "qrcode",//wx组建元素

          appid: 'xxxxxxxxxxxx',//微信平台开放id

          scope: "snsapi_login",

          redirect_uri: "http%3A%2F%2Ffrp.yezicl.com%2Fsale%2F%23%2Flogin",//回调地址 encodeURIComponent编码

          state: "",

          style: "black",//黑白样式

          href:"data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDE4MHB4O21hcmlnbi10b3A6LThweH0KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30KLmltcG93ZXJCb3ggLmluZm8ge2Rpc3BsYXk6IG5vbmU7fQ=="//通过href base64加密css可以微调样式

      });

      },500)

}

css base64加密 the-x.cn/zh-cn/base6… 解码时候不带data:text/css;base64,

引用微信组建扫描二维码

//监听路由可以检测返回的code
watch: {
    $route: {
      handler: function(route) {
        this.wxCode = this.$route.query.code||''
        //本地存储code是因为从其他页面返回vue页面存在缓存需要自定义刷新
        if(this.wxCode == localStorage["wxCode"]&&this.wxCode!=''){
          window.location.href=this.redirect_uri//回调地址
        }else{
          localStorage.setItem("wxCode",this.wxCode);//设置b为"isaac"
        }
        if(this.wxCode){
          let params = {
            code:this.wxCode,
            state:'',
          }
          wechatLogin(params).then(res=>{
            if(res.status){
              //返回参数如果绑定微信返回token正常存储登录未绑定账号返回unionid绑定当然也可以以微信信息为主题自动生成账号
            }
          }).catch(() => {
          //返回失败因为二维码已经被使用过所以需要刷新重新获取
            window.location.href=this.redirect_uri
          });
        }
      },
      immediate: true
    }
  },

如果自己不想写组建也可以使用vue-wxlogin

npm install vue-wxlogin --save

<wxlogin href='data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7CiAgICB3aWR0aDogMTUwcHg7Cn0KLmltcG93ZXJCb3ggLnRpdGxlIHsKICAgIHRleHQtYWxpZ246IGxlZnQ7CiAgICBmb250LXNpemU6IDE2cHg7CiAgICBmb250LXdlaWdodDogYm9sZDsKfQ==' id="wxcode" theme='' appid="appid" scope="snsapi_login" :redirect_uri="encodeURIComponent(redirect_uri)"></wxlogin>

import wxlogin from 'vue-wxlogin';
components: {
    wxlogin,
},