uni-app 一键登录(全屏)设置univerifyStyle中closeIcon的宽(width)高(height)没有效果

uni-app 一键登录(全屏)设置univerifyStyle中closeIcon的宽(width)高(height)没有效果

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：
uniapp/App

PC开发环境操作系统：
Windows

HBuilderX类型：
正式

HBuilderX版本号：
4.24

手机系统：
Android

手机系统版本号：
Android 14

手机厂商：
华为

手机机型：
华为honor v10

页面类型：
vue

vue版本：
vue2

打包方式：
云端

示例代码：

"path": "static/images/icon_close.png", // 自定义关闭按钮，仅支持本地图片。 HBuilderX3.3.7+版本支持  
"width":  "30px",  //图标宽度 默认值：60px (HBuilderX 4.0支持)  
"height": "30px"   //图标高度 默认值：60px (HBuilderX 4.0支持)

操作步骤：

"path": "static/images/icon_close.png", // 自定义关闭按钮，仅支持本地图片。 HBuilderX3.3.7+版本支持  
"width":  "30px",  //图标宽度 默认值：60px (HBuilderX 4.0支持)  
"height": "30px"   //图标高度 默认值：60px (HBuilderX 4.0支持)

预期结果：
控制一键登录弹窗关闭按钮大小

实际结果：
没有生效

bug描述：
一键登录(全屏)设置univerifyStyle中closeIcon的宽(width)高(height)没有效果


更多关于uni-app 一键登录(全屏)设置univerifyStyle中closeIcon的宽(width)高(height)没有效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 一键登录(全屏)设置univerifyStyle中closeIcon的宽(width)高(height)没有效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中实现一键登录功能时，如果你发现通过配置univerifyStyle中的closeIcon的width和height属性没有效果，可能是因为样式没有正确应用或者属性名有误。下面是一个示例代码，展示如何配置一键登录的样式，并确保closeIcon的宽高设置能够生效。

首先，确保你已经在项目中集成了相关的一键登录插件（如阿里云、腾讯云等提供的SDK）。以下是一个假设性的配置示例，基于uni-app的插件机制。

1. 插件配置

在manifest.json中配置插件：

{
  "mp-weixin": { // 示例平台，根据实际需要调整
    "usingComponents": true,
    "plugins": {
      "uni-verify": {
        "version": "1.0.0", // 插件版本号
        "provider": "wxaXXXXXXXXXXXXXXXXX" // 插件ID
      }
    }
  }
}

2. 页面代码

在需要使用一键登录功能的页面中，通过调用插件API并配置样式：

<template>
  <view>
    <!-- 一键登录按钮 -->
    <uni-verify @success="handleSuccess" :style="univerifyStyle"></uni-verify>
  </view>
</template>

<script>
export default {
  data() {
    return {
      univerifyStyle: {
        closeIcon: {
          width: '30px',
          height: '30px',
          // 其他可能的样式属性，如color, backgroundColor等
          color: '#FF0000' // 示例：红色关闭图标
        },
        // 其他univerify的样式配置
        buttonStyle: {
          width: '100%',
          height: '50px',
          backgroundColor: '#007AFF'
        }
      }
    };
  },
  methods: {
    handleSuccess(res) {
      console.log('登录成功', res);
    }
  }
};
</script>

<style>
/* 这里可以添加全局或页面级别的样式 */
</style>

注意事项

  1. 属性名准确性：确保univerifyStyle对象中的属性名与插件文档一致。某些插件可能使用不同的属性名来控制关闭图标的样式。
  2. 样式单位：在样式中使用合适的单位（如px, rem, vw等），并确保这些单位在目标平台上被正确解析。
  3. 插件版本：检查你使用的插件版本是否支持自定义closeIcon的样式。某些旧版本可能不支持这些功能。
  4. 平台差异：不同平台（如微信小程序、H5、App等）可能对样式的解析存在差异，确保在目标平台上测试样式效果。

如果上述方法仍然无效，建议查阅相关插件的官方文档或联系插件开发者获取支持。

回到顶部