跌宕起伏的小程式之登入元件

緣起?

開始的開始，簡單粗暴。在微信小程式裡，一行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版本，會解決這個問題，甚是期待。

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

臨末，送大家個福利?