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=falseclearInterval(this.timer)}}},

5.微信登录事件

  //微信登录事件weixDl() {this.saomaSwitch = trueif(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.codeif(data.data.code==200){this.$message('正在登录')this.saomaSwitch = falsethis.$store.commit('user/localxx',{data:data.data.data})this.$router.push({'name':'index'})}})}}

vue中实现二维码登录功能相关推荐

Vue中生成二维码的一种方式—vue-qr
Vue中生成二维码的一种方式-vue-qr vue实现二维码生成(vue + vue-qr)
vue 中生成二维码，合成海报
1.分别引入 qrcodejs2.html2canvas 执行以下命令行 npm install qrcodejs2 npm install html2canvas 2.下载canvas2image, ...
在Vue中生成二维码扫描在手机上跳转页面
使用方法: 安装vue-qr npm install vue-qr --save 在components新建一个vue组件,eg:vueQr.vue (以下为组件完整代码) <template& ...
vue中生成二维码并自动批量下载
项目中经常又这样的需求,要求将字符串生成二维码,并下载下来一般分为生成一个二维码展示并下载,对于这种你只需调用 qrcodejs2生成二维码就可以了下载也是按钮触发今天我们要说的是批量下载, ...
在Vue中生成二维码(前端生成二维码:Qrcode)
1.首先我们需要使用"npm install --save qrcode"下载依赖包 npm install --save qrcode 2.在要使用qrcode的页面导入qrco ...
Android直播带货系统中如何实现二维码扫描功能
自李佳琦的出现将直播带货成功的引向了"巅峰",为了响应众平台和用户的需求,开发Android直播带货系统成为当下的开发热潮.那么在平时的直播软件中,登录.分享.支付等场景中经常出现 ...
JAVA 实现扫码二维码登录
最近在做一个扫码登录功能,为此我还在网上搜了一下关于微信的扫描登录的实现方式.当这个功能完成了后,我决定将整个实现思路整理出来,方便自己以后查看也方便其他有类似需求的程序猿些. 要实现扫码登录我们需要 ...
C(++) Websocket实现扫码二维码登录---GoEasy
最近在做一个扫码登录功能,为此我还在网上搜了一下关于微信的扫描登录的实现方式.当这个功能完成了后,我决定将整个实现思路整理出来,方便自己以后查看也方便其他有类似需求的程序猿些. 要实现扫码登录我们需要 ...
node.js 实现扫码二维码登录
最近在做一个扫码登录功能,为此我还在网上搜了一下关于微信的扫描登录的实现方式.当这个功能完成了后,我决定将整个实现思路整理出来,方便自己以后查看也方便其他有类似需求的程序猿些. 要实现扫码登录我们需要 ...

vue中实现二维码登录功能

vue中实现二维码登录功能相关推荐

最新文章

热门文章