小程序授权登录功能出现故障时，用户无法正常使用核心服务，开发者后台数据也会中断。本文针对最常见的“授权弹窗不显示”和“授权后登录失败”两类问题，提供一套从基础排查到代码级修复的完整方案。 ## 前置准备 - **开发工具**：微信开发者工具（稳定版，建议1.06以上版本） - **真机设备**：至少1台Android手机和1台iPhone（部分问题仅在真机复现） - **账号权限**：小程序AppID对应的开发者权限，以及微信开放平台账号（若涉及unionid） - **调试工具**：Charles或Whistle抓包工具（可选，用于排查网络请求） - **代码仓库**：确保当前小程序代码可拉取到本地，且能正常编译运行 ## 分步操作步骤 ### 1. 检查基础配置与权限声明 **1.1 确认app.json中已配置所需权限** 打开项目根目录下的`app.json`文件，检查是否包含以下关键权限声明： ```json { "permission": { "scope.userInfo": { "desc": "用于完善用户资料" }, "scope.userLocation": { "desc": "用于获取位置信息" } }, "requiredPrivateInfos": ["getLocation"] } ``` 注意：`scope.userInfo`是授权登录的基础权限，缺少该配置会导致授权弹窗无法弹出。 **1.2 检查微信开放平台绑定状态** 登录微信公众平台（mp.weixin.qq.com），进入「开发」-「开发管理」-「接口设置」。确认「获取用户信息」接口状态为“已启用”。若显示“未开通”，点击“开通”按钮，按提示完成认证。 **1.3 验证AppID与项目匹配** 在微信开发者工具中，点击顶部菜单「详情」-「基本信息」，核对「AppID」是否与公众平台注册的小程序AppID一致。使用测试号或错误AppID会导致授权接口返回失败。 ### 2. 修复授权弹窗不显示问题 **2.1 替换过时的wx.getUserInfo调用** 自2021年4月起，微信不再支持直接通过`wx.getUserInfo`弹出授权弹窗。必须改用``组件配合`open-type="getUserInfo"`实现。 找到登录页面的WXML文件，将原本的自动弹窗逻辑替换为： ```html 微信授权登录 ``` 在对应的JS文件中，实现`onGetUserInfo`方法： ```javascript onGetUserInfo: function(e) { if (e.detail.errMsg === 'getUserInfo:ok') { // 用户同意授权，获取用户信息成功 const userInfo = e.detail.userInfo; // 调用后端登录接口 this.handleLogin(userInfo); } else { // 用户拒绝授权 wx.showToast({ title: '授权失败，请重新尝试', icon: 'none' }); } } ``` **2.2 清除缓存并重置授权状态** 部分手机因缓存问题导致授权弹窗无法再次弹出。在微信开发者工具中，点击「清除缓存」-「清除所有缓存」。然后在真机上操作：微信「我」-「设置」-「通用」-「存储空间」-「缓存」-「前往清理」。重新进入小程序，授权弹窗应恢复正常。 **2.3 检查是否在开发工具中勾选了“不校验合法域名”** 在开发者工具顶部菜单「详情」-「本地设置」中，确认「不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书」处于勾选状态。若未勾选，且后端接口未配置到合法域名列表中，会导致请求被拦截，弹窗无响应。 ### 3. 修复授权后登录失败问题 **3.1 检查code获取逻辑** 授权成功后，需要先通过`wx.login`获取临时code，再传给后端换取session_key和openid。确保登录流程顺序正确： ```javascript handleLogin: function(userInfo) { const that = this; wx.login({ success: function(res) { if (res.code) { // 调用后端登录接口，传递code和userInfo wx.request({ url: 'https://yourdomain.com/api/login', data: { code: res.code, nickName: userInfo.nickName, avatarUrl: userInfo.avatarUrl }, success: function(response) { if (response.data.code === 0) { // 登录成功，存储token wx.setStorageSync('token', response.data.data.token); wx.switchTab({ url: '/pages/index/index' }); } else { wx.showToast({ title: response.data.msg || '登录失败', icon: 'none' }); } } }); } else { console.error('获取code失败', res.errMsg); } } }); } ``` **3.2 验证后端接口响应格式** 使用抓包工具或开发者工具的Network面板，查看登录接口的返回数据。确保后端返回的JSON格式正确，且包含`token`或`session`字段。常见错误返回示例： ```json // 错误示例：缺少必要字段 {"code": -1, "msg": "参数错误"} // 正确示例 {"code": 0, "data": {"token": "abc123", "expire": 7200}} ``` **3.3 检查HTTPS证书与域名配置** 所有生产环境的小程序接口必须使用HTTPS。在微信公众平台「开发」-「开发管理」-「服务器域名」中，确认`request合法域名`已添加后端接口域名。注意：域名不能带端口号，且必须经过ICP备案。 ### 4. 处理特殊机型与系统兼容性 **4.1 iOS系统授权弹窗被拦截** 部分iOS版本（特别是iOS 14.5+）因隐私设置导致授权弹窗被自动拒绝。在代码中添加弹窗引导： ```javascript onGetUserInfo: function(e) { if (e.detail.errMsg === 'getUserInfo:fail auth deny') { wx.showModal({ title: '授权提示', content: '请在微信设置中允许小程序获取您的用户信息', confirmText: '去设置', success: function(res) { if (res.confirm) { wx.openSetting({ success: function(setting) { if (setting.authSetting['scope.userInfo']) { // 用户已开启授权 that.handleLogin(that.data.userInfo); } } }); } } }); } } ``` **4.2 Android手机弹窗一闪而过** 检查代码中是否在`onShow`或`onLoad`中直接调用了授权相关逻辑。正确做法是：只在用户点击按钮时才触发授权流程，不要在页面加载时自动调用。 **4.3 微信版本过低导致接口失效** 在`app.js`的`onLaunch`中添加版本检测： ```javascript const SDKVersion = wx.getSystemInfoSync().SDKVersion; if (compareVersion(SDKVersion, '2.10.0') < 0) { wx.showModal({ title: '提示', content: '当前微信版本过低，请升级至最新版本后重试' }); } function compareVersion(v1, v2) { const arr1 = v1.split('.'); const arr2 = v2.split('.'); for (let i = 0; i < 3; i++) { if (parseInt(arr1[i]) > parseInt(arr2[i])) return 1; if (parseInt(arr1[i]) < parseInt(arr2[i])) return -1; } return 0; } ``` ## 常见问题 **Q1：授权弹窗偶尔不显示，但刷新后正常** A：通常是缓存问题。在`wx.login`调用前添加`wx.clearStorageSync()`清理本地缓存，并确保`wx.login`在`onGetUserInfo`回调中调用，不要提前执行。 **Q2：用户拒绝授权后，如何再次触发弹窗？** A：用户拒绝后，无法通过代码再次弹出授权窗。必须引导用户手动开启：调用`wx.openSetting`打开设置页面，或者在小程序内提供“重新授权”按钮，点击后调用`wx.authorize`重新请求权限。 **Q3：授权成功后，后端返回“code无效”** A：`wx.login`获取的code有效期只有5分钟，且只能使用一次。检查代码是否在短时间内重复调用`wx.login`，或者后端是否重复消费同一个code。建议每次登录时重新获取code。 **Q4：部分用户授权后头像昵称为空** A：自2022年5月起，微信调整了用户信息获取规则。头像和昵称需要通过`wx.getUserProfile`接口获取（需用户主动点击触发），或使用头像昵称填写能力（需用户手动填写）。如果仍使用旧版`getUserInfo`，只能获取到默认头像和“微信用户”昵称。 **Q5：开发工具正常，真机无法弹出授权窗** A：检查真机微信版本是否过低（需≥7.0.0），以及是否在微信「发现」-「小程序」中删除了该小程序的历史缓存。另外，确认真机网络正常，且小程序已发布体验版或正式版（开发工具中的预览码有时会因权限问题导致授权异常）。 ## 收尾总结 小程序授权登录问题通常集中在三个层面：配置缺失（权限声明、域名绑定）、代码过时（使用旧API）、用户交互设计不当（自动弹窗）。修复的核心思路是：确保使用``触发授权，在回调中调用`wx.login`获取code，最后将code传给后端换取登录态。遇到弹窗不显示时，优先检查缓存和微信版本；遇到登录失败时，重点排查code的有效性和后端接口格式。按照本文步骤逐一排查，90%以上的授权登录问题都能在15分钟内解决。