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'
})
}
})
}
}

最后

以上就是壮观老虎为你收集整理的vue中实现二维码登录功能的全部内容，希望文章能够帮你解决vue中实现二维码登录功能所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。