https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
已知:小程序使用手机号快速验证组件登录,目前处于体验版阶段,线上版本未接入该能力
使用方式:未登录的时候渲染该组件,用户点击授权。本按钮放在单独的登录授权页中,用户点击后跳转该页面点击授权弹出手机号弹窗。
import React, { useState } from 'react'
import { Button } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useLogin } from '../../../hooks/useLogin'
import './index.less'
interface LoginBtnProps {
/** 自定义样式类名 */
className?: string
/** 自定义样式 */
style?: React.CSSProperties
/** 按钮内容 */
children?: React.ReactNode
/** 登录成功回调 */
onSuccess?: (userInfo: any) => void
/** 登录失败回调 */
onFail?: (error: any) => void
/** 加载中文案 */
loadingText?: string
}
/**
* 统一的手机号授权登录按钮组件
* 封装了 openType="getPhoneNumber" 及相关状态管理
* 触发回调后立即禁用按钮,防止重复点击
*/
const LoginBtn: React.FC = ({
className = '',
style,
children,
onSuccess,
onFail,
loadingText = '登录中...'
}) => {
const { loading: hookLoading, handleMobileLogin } = useLogin()
// 本地状态用于立即响应点击,防止重复触发
const [isAuthTriggered, setIsAuthTriggered] = useState(false)
const handleGetPhoneNumber = async (e: any) => {
track('handleGetPhoneNumber')
// 1. 防止重复点击:如果正在 loading 或已经触发了授权逻辑
if (hookLoading || isAuthTriggered) {
console.log('[LoginBtn] 忽略重复点击', { hookLoading, isAuthTriggered })
return
}
setIsAuthTriggered(true)
try {
// 3. 调用授权登录逻辑
const userInfo = await handleMobileLogin(e)
// 4. 成功回调
if (onSuccess) {
onSuccess(userInfo)
}
// 注意:成功后通常会跳转或刷新,不需要恢复 isAuthTriggered 状态
// 如果业务逻辑不跳转,外部组件可能需要控制状态,但 LoginBtn 主要用于登录,登录成功后状态通常会变
} catch (error) {
console.error('[LoginBtn] 登录失败:', error)
// 5. 失败回调
if (onFail) {
onFail(error)
}
// 6. 失败后恢复状态,允许重试
setIsAuthTriggered(false)
}
}
// 合并 loading 状态
const isLoading = hookLoading || isAuthTriggered
return (
{isLoading ? loadingText : children}
)
}
export default LoginBtn
问题:用量曲线和实际操作严重不符,凌晨无人使用的时候也在扣减次数(暂未开放到线上);3月1日,自采集打点0个用户执行到了getPhoneNumber回调,次数依然在扣减

你好,若对调用量有疑问,可参考《手机号计费误差问题排查指南》进行排查。提供对应小程序appid、昨日完整一天的手机号授权上报数据等
说不清的,微信也不提供对账单,扣多少钱完全是他们说了算。