2020年vue- 微信的扫码登录

微信提供了两种方式跳转登录，让我们来看一下吧！

内嵌方式

步骤实现：

1能用插件用就插件吧。毕竟好用。哈哈~~

 先引入npm 包 https://www.npmjs.com/package/vue-wxlogin

接下来在组件中引入：

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

2.组件中使用，生成二维码的信息，可以让后端通过接口查看属性，也可以直接在微信开发开放平台中查看，把属性值传给 wxlogin

 

 <wxlogin  :appid="'XXX'" :scope="'XXX'"  :redirect_uri="'XXX'"  ></wxlogin> 

 

完成

 

-------------------------------------------------------------------------------------------------

 

非常简单。就是一个请求一个返回

1页面

 <div class="weixin" @click="weChatLogin()"><i class="iconfont iconweixin"></i>微信登录</div>

 

 

methods: {

weChatLogin(){   

   weChatLogin().then(res => {        if(res.result === 1){          window.location.href=res.url        }    })    } 

 },}

 

 

完成

 

 

 

46人点赞

 

二维码出不来的,或者报错的,仔细看报什么错,是回调URL不对的,用内网穿透,