跌宕起伏的小程序之登陆组件

缘起🧐

开始的开始，简单粗暴。在微信小程序里，一行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版本，会解决这个问题，甚是期待。

这可能不是最优方案，但确实方便了许多。

临末，送你们个福利😘