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

緣起🧐

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

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

臨末，送你們個福利😘