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組件是一款非常方便的微信登錄組件，可以大大降低開發難度。通過上述步驟，我們可以簡單的實現一個微信登錄功能，但是需要注意的是，在進行微信公眾平台的配置時，一定要注意配置參數的正確性，否則會導致登錄失敗。