uni-app iOS 一键登录 页面样式 Bug

在使用 uni-app 开发 iOS 应用时，如果遇到一键登录页面样式问题，可能是由于以下原因导致的。以下是一些常见的排查和解决方法：

1. iOS 一键登录页面样式问题

• 问题描述：iOS 一键登录页面（通常是 ASAuthorizationController 提供的原生页面）样式不符合预期，比如按钮位置、颜色、字体等。
• 可能原因：
  • iOS 系统对一键登录页面的样式有默认限制，开发者无法直接修改原生页面的样式。
  • uni-app 的样式未正确适配 iOS 系统。

2. 解决方案

• 检查 uni-app 样式：
  • 确保你的 uni-app 页面样式在 iOS 上正常显示，尤其是布局和字体大小。
  • 使用 rpx 或 px 单位时，确保在不同设备上适配良好。
• 使用原生配置：
  • iOS 一键登录页面的样式是由系统控制的，开发者无法直接修改。但可以通过以下方式间接调整：
    • 在 ASAuthorizationController 的配置中，设置 preferredAuthorizationProvider 或 preferredAuthorizationButtonType 来调整按钮类型。
    • 通过 ASAuthorizationAppleIDButton 自定义按钮样式（仅限于按钮类型，如 .signIn、.continue 等）。
• 隐藏原生页面：
  • 如果原生页面样式无法满足需求，可以考虑隐藏原生页面，使用自定义的 UI 界面，然后通过 uni.login 或其他方式实现一键登录功能。
• 适配 iOS 系统版本：
  • 不同 iOS 版本对一键登录页面的样式可能有差异，确保在目标 iOS 版本上测试。

3. 代码示例

• 如果你使用的是 uni-app 的 uni.login 方法，可以参考以下代码：

  uni.login({
    provider: 'apple',
    success: function (res) {
      console.log('登录成功', res);
    },
    fail: function (err) {
      console.log('登录失败', err);
    }
  });
  

• 如果你需要自定义 UI，可以隐藏原生页面，使用自定义按钮触发登录：

  <template>
    <view>
      <button @click="handleAppleLogin">Apple 登录</button>
    </view>
  </template>
  
  <script>
  export default {
    methods: {
      handleAppleLogin() {
        uni.login({
          provider: 'apple',
          success: function (res) {
            console.log('登录成功', res);
          },
          fail: function (err) {
            console.log('登录失败', err);
          }
        });
      }
    }
  }
  </script>