uniapp微信小程序实现勾选相关协议后手机号快速验证登录

uniapp微信小程序实现勾选相关协议后手机号快速验证登录

目的

uniapp微信小程序的一键登录只能使用给定的button并设置open-type

<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">

其中getPhoneNumber绑定的是相关事件
可查看: 官方文档

希望实现功能：当用户点击按钮时，先判断是否已勾选自定义的相关协议，（隐私条款之类的），再调用相关手机号快速验证接口

遇到的问题

本来的想法很简单：使用ref绑定这个button，当用户点击界面上的一键登录图片按钮时（自定义的），调用按钮的点击事件，从而实现调用手机号快速验证的功能

但是遇到问题：由于uniapp无法使用ref绑定原生dom组件，仅支持绑定自定义组件，因此无法使用该方法实现，如果使用uniap自带的 uni.createSelectorQuery()，仅能获取dom元素的位置等节点信息，无法实现点击。

解决方法

最终想到了一种解决方法，为button设置disabled属性

<view class="login" @tap="onTapLogin">
    <button
      open-type="getPhoneNumber"
      @getphonenumber="getPhoneNumber"
      :disabled="!isAgree"
    >
      <img src="/static/login/微信.svg" alt="" class="img" />
      <view class="text">微信一键授权登录</view>
    </button>

当用户没有同意相关协议（即isAgree为false）时，按钮无法点击，同时给button设置css样式用于情况样式及实现点击穿透和取消功能

button {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0px;
  padding-right: 0px;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  color: #000;
  font-size: 32rpx;
  pointer-events: auto; /* 允许点击效果 */
  background: transparent;
  width: 100%;
  height: 100%;
}

// 禁用时样式
button[disabled] {
  background: transparent !important;
  pointer-events: none; /* 禁用点击效果 */
}

当按钮被禁用时，设置的pointer-events为none，此时按钮即可触发父亲组件的onTapLogin函数，实现弹窗提醒；当用户已经勾选同意协议后，此时按钮取消禁用，即可实现快速验证的功能。