緣起??

開始的開始，簡單粗暴。在微信小程序裏，一行wx.getUserInfo即可彈窗用戶授權登陸。大部分小程序圖省事，直接在打開小程序的時候就調這個方法。所以那時候一個印象就是隨便打開一個小程序，進去就是彈窗讓我登陸，想拿我的微信信息，給人一種不安全的感覺。

當時的代碼長這樣：

<script>
wx.getUserInfo({
  success(res) {
    // res.userInfo 用戶信息
  }
})
</script>

如果要與業務結合起來，通常會是這樣（以下代碼示例均使用wepy框架）：

<template>
  <!-- 下面這個操作需要用戶登陸 -->
  <view @tap="clickA">需要登陸操作A</view>
  <view @tap="clickB">需要登陸操作B</view>
</template>
<script>
{
  methods = {
    clickA () {
      await getUserInfo() // wx.getUserInfo 封裝在這裏面
      // 接著寫A的業務邏輯
    }
    clickB () {
      await getUserInfo()
      // 接著寫B的業務邏輯
    }
  }
}
  
</script>
 

變數??

為了防止濫用，微信後來決定調整這個交互，改變了授權登陸流程。於是就發布了一個公告，很突然的，就是直接調wx.getUserInfo不再彈窗詢問用戶是否授權。而是需要使用原生button組件，用戶實際操作點擊了屏幕才能觸發。

此時的代碼變成了這個熊樣：

<template>
  <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
    點擊授權登陸
  </button>
</template>
<script>
  {
    methods = {
      bindGetUserInfo (e) {
        // e.detail.userInfo 用戶信息
      }
    }
  }
</script>
 

看上去問題不大，其實已經原地爆炸。現在如果和業務結合起來就會有很多贅余代碼：

<template>
  <view>
    <button class="auth-btn" open-type="getUserInfo" bindgetuserinfo="clickA"></button>
    需要登陸操作A
  </view>
  <view>
    <button class="auth-btn" open-type="getUserInfo" bindgetuserinfo="clickB"></button>
    需要登陸操作B
  </view>
</template>
<script>
  {
    methods = {
      clickA (e) {
        if (e.detail.errMsg === 'getUserInfo:ok') {
          // 接著寫A的業務邏輯
        }
      }
      clickB (e) {
        if (e.detail.errMsg === 'getUserInfo:ok') {
          // 接著寫B的業務邏輯
        }
      }
    }
  }
</script>
<style lang="less">
  .auth-btn {
    // 使其cover在父容器上並透明
  }
</style>
 

之前接手過一個遺留項目，裏面密密麻麻充斥著這種代碼，我看5分鐘吐了3次??。DRY！DRY！DRY！有代碼潔癖加重度強迫癥的我完全不能忍。

歸途??

作為一個有追求的追風少年，思慮良久，得想個轍??，不然之後的開發生涯就充斥著難受。wepy是一個組件化的小程序框架，可以像寫vue組件一樣去寫小程序的自定義組件。於是就有了一個很自然的想法。把登陸按鈕封裝起來，使其足夠方便。

最後的最後，組件化後的代碼長這樣??：

<template>
  <view>
    <LoginButton1 @tap.user="clickA"></LoginButton1>
    需要登陸操作A
  </view>
  <view>
    <LoginButton2 @tap.user="clickB"></LoginButton2>
    需要登陸操作B
  </view>
</template>
<script>
  import LoginButton from '@/components/LoginButton'
  {
    components = {
      LoginButton1: LoginButton,
      LoginButton2: LoginButton,
    }
    methods = {
      clickA () {
        // 直接寫A的業務邏輯
      }
      clickB () {
        // 直接寫B的業務邏輯
      }
  }
</script>

{ LoginButton1: LoginButton, LoginButton2: LoginButton }這個詭異的寫法主要是因為wepy的組件是靜態組件（其實就是編譯時代碼復制），導致每實例化一個都要分配一個id??。據說wepy即將發布2.0版本，會解決這個問題，甚是期待。

這可能不是最優方案，但確實方便了許多。

臨末，體驗一下，掃我，別說話??

跌宕起伏的小程序之登錄組件