Sam888
Sam888
  • 发布:2025-12-19 10:29
  • 更新:2025-12-19 10:29
  • 阅读:38

一键登录苹果自定义图标巨大

分类:uni-app

苹果集成的一键登录自定义图标 特别大

univerifyStyle: {  
                        'fullScreen': true, // 是否全屏显示,默认值: false  
                        'backgroundColor': '#ffffff', // 授权页面背景颜色,默认值:#ffffff  
                        'backgroundImage': '', // 全屏显示的背景图片,默认值:"" (仅支持本地图片,只有全屏显示时支持)  
                        'icon': {  
                            'path': 'static/app/login/logo.png', // 自定义显示在授权框中的logo,仅支持本地图片 默认显示App logo  
                            'width': '60px', // 图标宽度 默认值:60px  
                            'height': '60px' // 图标高度 默认值:60px  
                        },  
                        'closeIcon': {  
                            'path': 'static/app/login/xxxx.png', // 自定义显示在授权框中的logo,仅支持本地图片 默认显示App logo  
                            'width': '60px', // 图标宽度 默认值:60px (HBuilderX 4.0支持)  
                            'height': '60px', // 图标高度 默认值:60px (HBuilderX 4.0支持)  
                        },  
                        'phoneNum': {  
                            'color': '#283040', // 手机号文字颜色 默认值:#202020  
                            'fontSize': '20px'  
                        },  
                        'slogan': {  
                            'color': '#BBBBBB' //  slogan 字体颜色 默认值:#BBBBBB  
                        },  
                        'authButton': {  
                            'normalColor': '#1677FF', // 授权按钮正常状态背景颜色 默认值:#3479f5  
                            'highlightColor': '#2861c5', // 授权按钮按下状态背景颜色 默认值:#2861c5(仅ios支持)  
                            'disabledColor': '#73aaf5', // 授权按钮不可点击时背景颜色 默认值:#73aaf5(仅ios支持)  
                            'textColor': '#ffffff', // 授权按钮文字颜色 默认值:#ffffff  
                            'title': '本机号码一键登录', // 授权按钮文案 默认值:“本机号码一键登录”  
                            'fontSize': '20px',  
                            'borderRadius': '10px' // 授权按钮圆角 默认值:"24px" (按钮高度的一半)  
                        },  
                        'privacyTerms': {  
                            'defaultCheckBoxState': false, // 条款勾选框初始状态 默认值: true  
                            'isCenterHint': false, // 未勾选服务条款时点击登录按钮的提示是否居中显示 默认值: false (3.7.13+ 版本支持)  
                            'uncheckedImage': 'static/app/login/loginUnSelected.png', // 可选 条款勾选框未选中状态图片(仅支持本地图片 建议尺寸 24x24px)(3.2.0+ 版本支持)  
                            'checkedImage': 'static/app/login/loginSelected.png', // 可选 条款勾选框选中状态图片(仅支持本地图片 建议尺寸24x24px)(3.2.0+ 版本支持)  
                            'checkBoxSize': 18, // 可选 条款勾选框大小  
                            'textColor': '#999999', // 文字颜色 默认值:#BBBBBB  
                            'termsColor': '#418BD8', //  协议文字颜色 默认值: #5496E3  
                            'prefix': '我已阅读并同意', // 条款前的文案 默认值:“我已阅读并同意”  
                            'suffix': '并使用本机号码登录', // 条款后的文案 默认值:“并使用本机号码登录”  
                            'privacyItems': [ // 自定义协议条款,最大支持2个,需要同时设置url和title. 否则不生效  
                                {  
                                    'url': 'https://www.xxx.com/version?id=333', // 点击跳转的协议详情页面  
                                    'title': '《用户协议》' // 协议名称  
                                },  
                                {  
                                    'url': 'https://www.y.com/version?id=33',   
                                    'title': '《隐私政策》' // 协议名称  
                                }  
                            ]  
                        },  
                        'otherLoginButton': {  
                            'visible': true, // 是否显示其他登录按钮,默认值:true  
                            'normalColor': '', // 其他登录按钮正常状态背景颜色 默认值:透明  
                            'highlightColor': '', // 其他登录按钮按下状态背景颜色 默认值:透明  
                            'textColor': '#656565', // 其他登录按钮文字颜色 默认值:#656565  
                            'title': '其他方式登录', // 其他登录方式按钮文字 默认值:“其他登录方式”  
                            'borderColor': '', // 边框颜色 默认值:透明(仅iOS支持)  
                            'borderRadius': '0px' // 其他登录按钮圆角 默认值:"24px" (按钮高度的一半)  
                        }  

                    },  
2025-12-19 10:29 负责人:无 分享
已邀请:
Ask小助手

Ask小助手 - Ask社区AI助手

根据您描述的问题,苹果设备上univerify自定义图标显示过大,可能原因及解决方案如下:

  1. 图片本身分辨率过高:虽然设置了60px宽高,但如果原始图片尺寸过大(如1000x1000),系统会自动缩放导致显示异常。建议使用适配@2x/@3x分辨率的图片(如120x120或180x180像素)。

  2. 尺寸单位问题:iOS设备对px单位处理可能与预期不同。尝试将尺寸改为数值格式(不带px单位):

    'icon': {  
    'path': 'static/app/login/logo.png',  
    'width': 40,  // 直接使用数字  
    'height': 40  
    }
  3. HBuilderX版本兼容性:确认使用HBuilderX 4.0+版本(iOS的closeIcon特性需4.0+支持)。若版本较低,建议升级至最新正式版(4.85)。

  4. 全屏模式影响:当fullScreen: true时,界面布局会变化,可能导致图标比例异常。可尝试暂时关闭全屏模式测试。

参考官方文档配置说明:uniapp一键登录文档,特别注意iOS平台对图标的渲染逻辑与Android不同。

建议先检查图片原始尺寸,再调整width/height值,通常设置为40-50px左右可获得较好显示效果。

内容为 AI 生成,仅供参考

要回复问题请先登录注册