3
收藏
评论

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

小程序登陆组件的前世今生

缘起🧐

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

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

临末,送大家个福利😘

最后一次编辑于  03-29  (未经腾讯允许,不得转载)
复制链接赞 3收藏投诉评论

17 个评论

  • 征途
    征途
    03-08

    表情亮了

    03-08
    赞同 1
    回复
  •  人生如戏全靠演技
     人生如戏全靠演技
    03-09

    原本是奔着标题来的,福利有点牛

    03-09
    赞同
    回复
  • 不要说话
    不要说话
    03-11

    嗯嗯 能不能放点女生看的福利


    03-11
    赞同
    回复 1
    • 李云召
      李云召
      03-12

      女生太复杂,不确定你们想要的😅

      03-12
      回复
  • 不要说话
    不要说话
    03-11

    大佬有没有源码

    03-11
    赞同
    回复
  • 流沙
    流沙
    03-12

    大牛,我用vue写小程序,bindgetuserinfo无法识别methods中的方法,该怎么解决

    03-12
    赞同
    回复 7
    • 李云召
      李云召
      03-12

      vue还能写小程序😐?button需要open-type="getUserInfo"

      03-12
      回复
    • 流沙
      流沙
      03-12回复李云召

      嗯  加了




      报错提示:Do not have doLogin handler in current page: pages/me/main. Please make sure that doLogin handler has been defined in pages/me/main, or pages/me/main has been added into app.json


      vue功能蛮很强大的

      03-12
      回复
    • 李云召
      李云召
      03-12

      vue写不了小程序😂,两者的宿主环境不一样,虽然能渲染出来,但是js,事件绑定,开放能力这些vue那一套在小程序里是跑不通的


      03-12
      回复
    • 流沙
      流沙
      03-12回复李云召

      之前都走通了,但是登陆这儿改了之后就出问题

      03-12
      回复
    • 刘建oooo
      刘建oooo
      03-14回复流沙

      这个用的是什么框架? 有可能不是写bind 改成@getuserinfo试试

      03-14
      回复
    查看更多(2)
  • xudong.ma
    xudong.ma
    03-15

    我从来不弹~ 为什么要授权  ?这个资料一点用都没有 还占空间

    03-15
    赞同
    回复 2
    • 李云召
      李云召
      03-15

      你这种体验应该很好吧,无弹窗,无授权,无占用,无用户😂

      03-15
      回复
    • xudong.ma
      xudong.ma
      03-15

      现在市面上 90% 都要弹出来  其实挺讨厌的 哈

      03-15
      回复