微信小程序button按钮指定open-type事件点击提交之前做数据检查

原创于 2025-11-27 18:05:18 发布 · 264 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

web 专栏收录该内容

52 篇文章

订阅专栏

今天这个需求，需要一键登录，但是点击按钮调起一键登录之前，我们需要检查用户是否勾选注意事项。

一键登录选择手机号这个功能，微信小程序帮我们做好了，我们只需要在button元素设置open-type=getPhoneNumber，然后绑定获取手机号响应事件即可。也就是bindgetphonenumber=onGetPhoneNumber。

问题就是，这个getPhoneNumber事件是微信小程序里面内置的，我们无法修改这个getPhoneNumber函数，在调用这个函数之前做个数据检查。

我想了一个办法，就是在button按钮里面包一个text，组成这样的结构<button><text></text></button>，然后让text充满button，在text元素上绑定tap事件，设置检查功能，如果检查失败，阻止冒泡，点击事件就不会传递到button，这样getPhoneNumber事件就不会被调起，可是自己做了测试，我们通过bindtap传入的函数，虽然参数有event，但是它没有stopPropagation()方法，也就是它和我们web浏览器的html元素事件不同。我还想了里面的text通过catchtap捕获不冒泡来绑定事件，检查通过，继续触发tap事件-this.triggerEvent("tap",{},{bubbles:true})，可是这个方式似乎也不行，可能一旦捕获了，就捕获了，后续再手动触发也不会把事件冒泡到父级button上。

我还想了一个办法，就是这里设置两个button（button1显示button2隐藏），一个按钮button1绑定(bindtap)数据检查事件，一个按钮button2做(open-type)一键登录选择手机号功能,button1检查通过，通过查找元素的方式找到button2，然后调起它的点击事件。可是，查找元素这里就遇到了麻烦，根本找不到，通过wx.createSelectorQuery("")查找不到，不知道什么原因，网上好多资料给的都是官方api示例，没有实际例子，另外通过this.selectComponent()的方式在组件范围内查找也找不到，这条路很艰难。还有一个即使找到了，触发点击事件感觉也不靠谱，微信小程序里面似乎没有提到通过查找元素然后触发事件。

就在快要放弃的时候，我根据第二个办法的思路，马上调整了策略，同样是两个button，他们做个互斥显示，而这个互斥的条件就是检查是否通过。

于是，就有了今天的一个故事。

wxml

<scroll-view class="scrollarea">
  <view class="container">
    <view class="login-item logo">
      <image src="../../../icons/icon_logo.png"></image>
      <text>飞手壹号</text>
    </view>
    <view class="login-item login-btn-box">
      <block wx:if="{{userSelected}}">
        <button id="login-btn" open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber" >用户一键登录</button>
      </block>
      <block wx:else>
        <button bindtap="checkSelect" >用户一键登录</button>
      </block>
    </view>
    <view class="login-item agreement">
      <radio checked="{{userSelected}}" bind:tap="onRadioChange"></radio>
      <text>已阅读并同意《服务协议》和《隐私协议》</text>
    </view>
  </view>
</scroll-view>

const app = getApp()
Page({
  data: {
    userSelected: false
  },
  onLoad() {

  },
  onRadioChange() {
    var userSelected = this.data.userSelected;
    this.setData({
      userSelected: !userSelected
    })
  },
  checkSelect() {
    if(!this.data.userSelected) {
      wx.showModal({
        title: '温馨提示',
        content: '请勾选已阅读并同意《服务协议》和《隐私协议》',
        complete: (res) => {
          if (res.cancel) {}
          if (res.confirm) {}
        }
      })
    }
  },
  onGetPhoneNumber(e) {
    if(e.detail.code!='') {
      wx.request({
        url: 'https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=' + app.globalData.access_token,
        method: 'POST',
        data : {code: e.detail.code},
        success(res) {
          if(res.data.errcode==0) {
            let phoneNumber = res.data.phone_info.phoneNumber
            // 登录准备
              
          }
        }
      })
    }
  },
  quickLogin() {
    wx.navigateTo({
      url: '../role/index',
    })
  }
})

代码其实很简单，没什么技巧，就是使用了wx:if wx:else做了一个条件判断。

实际效果演示：