uni-app IOS一键登录UI异常

uni-app IOS一键登录UI异常

开发环境 版本号 项目创建方式
Mac 11.4 HBuilderX

产品分类:uniapp/App

PC开发环境操作系统:Mac

PC开发环境操作系统版本号:11.4

HBuilderX类型:正式

HBuilderX版本号:3.1.19

手机系统:iOS

手机系统版本号:IOS 14

手机厂商:苹果

手机机型:iphonex

页面类型:vue

打包方式:云端

示例代码:

uni.login({    
    provider: 'univerify',    
    univerifyStyle: {    
        // 自定义登录框样式,参考`univerifyStyle 数据结构`    
        fullScreen: 'false', // 是否全屏显示,默认值: "false"    
        backgroundColor: "#d8d8d8",  // 授权页面背景颜色,默认值:#ffffff      
        backgroundImage: '/static/home_ditu.jpg', // 全屏显示的背景图片,默认值:"" (仅支持本地图片,只有全屏显示时支持)    
        icon: {    
            path: '/static/logo.png',// 自定义显示在授权框中的logo,仅支持本地图片 默认显示App logo    
            width: 64,    
            height: 64    
        },    
        authButton: {    
            title: '本机号码一键登录', // 授权按钮文案 默认值:“本机号码一键登录”    
        },    
        otherLoginButton: {    
            visible: 'true', // 是否显示其他登录按钮,默认值:true    
            title: '其他号码登录' // 其他登录方式按钮文字 默认值:“其他登录方式”    
        },    
        privacyTerms: {    
            defaultCheckBoxState: 'true', // 条款勾选框初始状态 默认值: true    
            textColor: "#FF0000", // 文字颜色 默认值:#BBBBBB    
            termsColor: "#FF0000", //  协议文字颜色 默认值: #5496E3    
            prefix: ' 登录即同意', // 条款前的文案 默认值:“我已阅读并同意”    
            suffix: '  ', // 条款后的文案 默认值:“并使用本机号码登录”    
            offsetY: "100",    
            privacyItems: [    
                // 自定义协议条款,最大支持2个,需要同时设置url和title. 否则不生效    
                {    
                    url: 'https://', // 点击跳转的协议详情页面    
                    title: '用户服务协议' // 协议名称    
                },    
                {    
                    url: 'https://', // 点击跳转的协议详情页面    
                    title: '隐私政策' // 协议名称    
                }    
            ]    
        }    
    },    
    success: res => {    
        console.log(res.authResult); //res.authResult: {openid:'登录授权唯一标识',access_token:'接口返回的 token'}    

        //请求登录认证操作完成后,不管成功或失败都不会关闭一键登录界面,需要主动调用closeAuthView方法关闭    
        uni.closeAuthView();    
    },    
    fail: err => {    
        //当用户点击自定义按钮或其他登录方式时,会触发uni.login的fail回调    
        console.log(err);    

        //请求登录认证操作完成后,不管成功或失败都不会关闭一键登录界面,需要主动调用closeAuthView方法关闭    
        uni.closeAuthView();    
    }    
});

操作步骤:

横屏app一键登录

预期结果:

正常显示登录窗口

实际结果:

未正常显示

bug描述:

一键登录横屏样式有bug

  1. 横屏app打开一键登录页自动变竖屏了,并且页面全乱了

更多关于uni-app IOS一键登录UI异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

bug已修复

更多关于uni-app IOS一键登录UI异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在横屏模式下使用uni-app的一键登录功能时,确实会遇到UI适配问题。根据您提供的代码和描述,问题主要源于横屏应用与uni.login的univerifyStyle默认竖屏布局不兼容。

关键问题分析:

  1. univerifyStyle的fullScreen设置为’false’(字符串),应该使用布尔值false
  2. 横屏应用需要额外处理授权页面的方向适配
  3. 背景图片路径可能需要调整

建议修改:

uni.login({    
    provider: 'univerify',    
    univerifyStyle: {    
        fullScreen: false, // 改为布尔值
        backgroundColor: "#d8d8d8",
        // 移除backgroundImage或确保图片路径正确
        icon: {    
            path: '/static/logo.png',
            width: 64,    
            height: 64    
        },    
        authButton: {    
            title: '本机号码一键登录',
        },    
        otherLoginButton: {    
            visible: true, // 改为布尔值
            title: '其他号码登录'
        },    
        privacyTerms: {    
            defaultCheckBoxState: true, // 改为布尔值
            textColor: "#FF0000",
            termsColor: "#FF0000",
            prefix: ' 登录即同意',
            suffix: '  ',
            privacyItems: [    
                {    
                    url: 'https://',
                    title: '用户服务协议'
                },    
                {    
                    url: 'https://',
                    title: '隐私政策'
                }    
            ]    
        }    
    },    
    success: res => {    
        console.log(res.authResult);
        uni.closeAuthView();    
    },    
    fail: err => {    
        console.log(err);
        uni.closeAuthView();    
    }    
});
回到顶部