微信小程序手机号一键登录一直显示转圈uniapp如何解决？

在uniapp开发的微信小程序中，使用手机号一键登录功能时，界面一直显示转圈无法成功登录，该如何解决？

2 回复

检查网络连接是否正常，确保手机有信号。在uniapp中，确认已正确配置微信登录插件，检查AppID和权限设置。尝试清除小程序缓存或重启微信。若仍无效，查看官方文档或社区寻求帮助。


在微信小程序中使用uniapp实现手机号一键登录时，若持续显示转圈（加载中）无法完成登录，通常由以下几个原因导致。以下是排查步骤和解决方案：

1. 检查基础库版本

确保微信开发者工具和用户手机上的微信基础库版本支持相关API（如getPhoneNumber）。建议基础库版本≥2.21.2，可在manifest.json中配置最低版本：

{
  "mp-weixin": {
    "setting": {
      "urlCheck": false
    },
    "requiredBackgroundModes": ["getPhoneNumber"],
    "libVersion": "2.21.2"
  }
}

2. 登录流程代码问题

确保正确调用wx.login()获取code，并在getPhoneNumber事件中处理回调：

// 获取临时code
wx.login({
  success: (res) => {
    if (res.code) {
      this.loginCode = res.code; // 存储用于后续解密
    }
  }
});

// 手机号授权事件
onGetPhoneNumber(e) {
  if (e.detail.code) {
    // 将code发送至后端，联合wx.login的code解密手机号
    uni.request({
      url: 'YOUR_SERVER_URL',
      method: 'POST',
      data: {
        loginCode: this.loginCode,
        phoneCode: e.detail.code
      },
      success: (res) => {
        // 处理登录成功逻辑
      },
      fail: (err) => {
        uni.showToast({ title: '登录失败', icon: 'none' });
      }
    });
  } else {
    uni.showToast({ title: '获取手机号失败', icon: 'none' });
  }
}

3. 按钮绑定与权限

  • 使用<button>组件，设置open-type="getPhoneNumber"并绑定事件：
<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">一键登录</button>
  • 确保小程序已通过微信认证，并在微信公众平台→开发→开发管理→接口设置中开启“手机号”权限。

4. 网络与服务器问题

  • 检查网络连接是否稳定。
  • 验证后端接口能否正常接收code并调用微信phonenumber.getPhoneNumber接口解密。示例解密代码（后端需处理）：
# Python示例：使用requests解密
import requests
decrypt_url = "https://api.weixin.qq.com/wxa/business/getuserphonenumber"
params = {
    "access_token": "YOUR_ACCESS_TOKEN"
}
data = {
    "code": e.detail.code # 前端传来的手机号code
}
response = requests.post(decrypt_url, params=params, json=data)
phone_info = response.json()

5. 测试环境限制

  • 体验版或开发版可能受权限限制，请提交审核并发布正式版后测试。
  • 在微信开发者工具中，点击「工具」→「调试」→「打开调试」可开启vConsole查看具体错误日志。

6. 更新uni-app及依赖

升级HBuilderX到最新版本，并更新uni-app项目依赖：

# 在项目根目录执行
npm update

按照以上步骤逐一排查，通常可解决问题。若仍无法解决，请提供具体错误日志或回调参数，以便进一步分析。

回到顶部