緣起?
開始的開始，簡單粗暴。在微信小程式裡，一行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版本，會解決這個問題，甚是期待。
這可能不是最優方案，但確實方便了許多。
臨末，送大家個福利?
