f***@tom.com
f***@tom.com
  • 发布:2022-11-07 10:02
  • 更新:2022-11-07 12:06
  • 阅读:169

【报Bug】微信小程序端呈现方式安卓和ios的显示BUG

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: windows11 22H2

HBuilderX类型: Alpha

HBuilderX版本号: 3.6.7

第三方开发者工具版本号: 1.06.2211032

基础库版本号: 2.27.1

项目创建方式: HBuilderX

示例代码:

//主题-主题色 $theme-main-color: var(--theme-main-color, #f59b22);

//实心按钮


{  
    background-color: var(--custom-button-background-color, $theme-main-color);  
} ```  

``` :style="{  
                       '--custom-button-font-color': customButtonFontColor,  
                       '--custom-button-height': customSize ? `${customSize}rpx` : '',  
                       '--button-radius': radius ? `${radius}rpx` : '',  
                       '--custom-button-background-color': customButtonBackgroundColor,  
                       '--custom-button-font-size': customButtonFontSize ? `${customButtonFontSize}rpx` : '',  
                       '--custom-button-radius': customRadius ? `${customRadius}rpx` : '',  
                       '--left-image-size': leftImageSize ? `${leftImageSize}rpx` : '',  
                       '--left-image-radius': leftImageRadius ? `${leftImageRadius}rpx` : '',  
                       '--right-image-size': rightImageSize ? `${rightImageSize}rpx` : '',  
                       '--right-image-radius': rightImageRadius ? `${rightImageRadius}rpx` : ''  
                  }" ```

操作步骤:

1.定义一个全局变量样式,用于接受用户自定义颜色:--theme-main-color
2.定义一个全局主题色,用于接受用改变的主题颜色:$theme-main-color: var(--theme-main-color, #d8001b);
3.定义一个自定义按钮:u-button,接受一个对按钮改变背景颜色的变量:--custom-button-background-color
4.设置自定义按钮的背景色样式:background-color:var(--custom-button-background-color, $theme-main-color);

预期结果:

安卓端小程序以及ios端小程序显示结果一致

实际结果:

安卓端小程序显示正常
ios端小程序显示无效果,甚至默认效果也没有

bug描述:

如图所示:
我在全局样式中定义了一个主题,$theme-main-color,这个主题允许用户自定义颜色,用到了css变量--theme-main-color,如果没有自定义设置则获取默认颜色#d8001b。

我自定义了一个按钮,按钮样式类mode-full,有个背景颜色属性,使用到了变量--custom-button-background-color,用于接受外部传递给按钮使用的背景颜色,如果没有则获取系统主题颜色

最后编译结果为:.u-button.mode-full {background-color:var(--custom-button-background-color, var(--theme-main-color, #d8001b))},这样的结果在安卓端的小程序没问题,但是在ios端显示却是没有任何效果。

2022-11-07 10:02 负责人:无 分享
已邀请:
DCloud_UNI_WZF

DCloud_UNI_WZF

测试小程序原生开发是否存在该问题?
如确认uniapp框架问题,请提供测试工程,谢谢

  • f***@tom.com (作者)

    高版本的ios系统,解析style中定义的css变量,如:--custom-size:;这样的内容会解析为有值,有值就不会走后面默认的值,如:font-size: var(--custom-size, 14px);此时此景的情况下,--custom-size变量为空,但是又不会解析后面默认值14px。就会导致整个页面出问题

    2022-11-07 17:54

  • f***@tom.com (作者)


    为了兼容css变量的使用,只有在style中判断当前变量是否存在,存在则设置当前css变量,不存在则给空值,兼容写法
    style="[borderColor ? --border-color: ${borderColor} : '']",常规我们写都是:style="{--border-color: borderColor}"这样就好了,但是这种写法在ios高版本系统下是不起效的

    2022-11-07 17:57

要回复问题请先登录注册