Vue-wxlogin详解

一、什么是vue-wxlogin？

Vue-wxlogin是一款基于vue的微信登录组件，可以实现在Vue.js应用中快速集成微信登录功能。该组件使用jQuery来和微信API进行交互，并生成登录二维码供用户扫描。Vue-wxlogin支持微信开放平台第三方应用授权登录和公众平台网页授权登录两种方式。

二、vue-wxlogin的使用方法

在Vue.js应用中使用Vue-wxlogin，首先需要在项目中安装该组件，并且引入wxlogin.css文件和wxlogin.js文件。具体引入方式如下：

  npm install vue-wxlogin --save

  <link rel="stylesheet" href="/static/wxlogin.css">

  <script src="/static/wxlogin.js"></script>

为了更好的演示如何使用Vue-wxlogin，在这里我们演示一下如何在Vue.js应用中实现微信登录功能。具体步骤如下：

三、步骤一：引入Vue-wxlogin组件

安装和引入好Vue-wxlogin后，我们需要在需要使用微信登录组件的Vue组件中引入，例如在Login.vue中引入：

  <template>
    <div>
      <wxlogin
        :appid="wxLoginConfig.appid"
        :scope="wxLoginConfig.scope"
        :redirect_uri="wxLoginConfig.redirect_uri"
        :state="wxLoginConfig.state"
        :style="wxLoginConfig.style"
        :href="wxLoginConfig.href"
        :className="'login-btn'"
      />
    </div>
  </template>

  <script>
    import wxlogin from 'vue-wxlogin';
    export default {
      components: {
        wxlogin
      },
    data() {
        return {
          wxLoginConfig: {    // 微信登录配置
            appid: 'xxxxx',
            scope: 'snsapi_login',
            redirect_uri: 'http%3a%2f%2fwww.xxx.com%2flogin',
            state: '',
            style: '',
            href: ''
          },
        }
    },
  }
  </script>

四、步骤二：配置微信公众平台

在使用Vue-wxlogin之前，我们需要先在微信公众平台中进行配置。具体步骤如下：

1. 在微信公众平台中，进入开发者中心，点击“网页授权获取用户基本信息”和“网页授权获取用户信息”两个选项，将“授权回调页面域名”设置为当前域名。

2. 进入公众号设置-功能设置-JS接口安全域名，将当前域名添加到列表中。

3. 获取微信开发者APPID，并将其添加到Vue组件中。

五、步骤三：定义登录成功后的操作

当用户扫描二维码并成功登录后，我们需要将获取到的用户信息发送到后台进行处理。在这里我们可以使用vue-resource来发送异步请求。

六、小结

在Vue.js应用中，Vue-wxlogin组件是一款非常方便的微信登录组件，可以大大降低开发难度。通过上述步骤，我们可以简单的实现一个微信登录功能，但是需要注意的是，在进行微信公众平台的配置时，一定要注意配置参数的正确性，否则会导致登录失败。