vue中实现二维码登录功能

1.在项目的控制台下载插件：

npm install vue-wxlogin --save-dev

2.导入该组件

<script>
import Wxlogin from 'vue-wxlogin'
export default {
  components: { Wxlogin },
</script>

3.在html中添加组件,其中Wxlogin的一些属性对照微信官方文档来写添加链接描述

 <Wxlogin v-if="i_IsShow=='i_one'" appid='wxxxxxxxxxce' :scope="'snsapi_login'" :redirect_uri='url' self_redirect='self_redirect' :state='uuid' :herf="qrcssherf"></Wxlogin>

4.设置二维码定时器saomaSwitch：500，表示500s后失效

watch:{
    code(rescode){
      if(rescode==404) {
        this.timer = setInterval(() => {
          this.codedata --;
          this.getLongPoll()
          if(this.codedata==0) clearInterval(timer),this.saomaSwitch=false
        }, 1000);
      }
      if(rescode==305) {
        this.saomaSwitch=false;
        clearInterval(this.timer);
        this.$router.push({name:'reg',params:{
          data:this.uuid
        }})
      }
      if(rescode ===200) {
        this.saomaSwitch=false
        clearInterval(this.timer)
      }
    }
  },

5.微信登录事件

  //微信登录事件
    weixDl() {
      this.saomaSwitch = true
      if(this.codedata==500){
        this.getLongPoll()
      }
      this.i_IsShow = 'i_one'; 
    },

6.向服务器轮询，不停的向后台请求。

 // 向服务器轮询
    async getLongPoll() {
      if(this.saomaSwitch){
        await this.$http0.get('/poll/'+this.uuid).then(data=>{
        this.code = data.data.code
        if(data.data.code==200){
          this.$message('正在登录')
          this.saomaSwitch = false
          this.$store.commit('user/localxx',{data:data.data.data})
          this.$router.push({
            'name':'index'
          })
        }
      })
      }
    }