Vue pc 微信掃碼登錄-內嵌版

微信文檔：

https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

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加密 https://the-x.cn/zh-cn/base64 解碼時候不帶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,
},