uni-app 一键登录自定义勾选框未生效

uni-app 一键登录自定义勾选框未生效

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

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.08

手机系统：Android

手机系统版本号：Android 14

手机厂商：魅族

手机机型：21

页面类型：vue

vue版本：vue3

打包方式：云端

示例代码：

const univerifyStyle = reactive({  
    //一键登录弹出窗的样式配置参数  
    fullScreen: true, // 是否全屏显示，true表示全屏模式，false表示非全屏模式，默认值为false。  
    backgroundColor: '#ffffff', // 授权页面背景颜色，默认值：#ffffff  
    authButton: {  
        normalColor: '#FFC644', // 授权按钮正常状态背景颜色 默认值：#3479f5  
        highlightColor: "#FFC644",  // 授权按钮按下状态背景颜色  
        textColor: '#ffffff', // 授权按钮文字颜色 默认值：#ffffff  
        title: '本机号码一键登录' // 授权按钮文案 默认值：“本机号码一键登录”  
    },  
    privacyTerms: {  
        defaultCheckBoxState: false, // 条款勾选框初始状态 默认值： true  
        uncheckedImage:"/static/images/login/check.png", // 可选 条款勾选框未选中状态图片（仅支持本地图片 建议尺寸 24x24px）(3.2.0+ 版本支持)     
        checkedImage:"/static/images/login/checked.png", // 可选 条款勾选框选中状态图片（仅支持本地图片 建议尺寸 24x24px）(3.2.0+ 版本支持)  
        checkBoxSize: "20",  
        fontSize: "14",  
        textColor: '#999999', // 文字颜色 默认值：#BBBBBB  
        termsColor: '#FFC644', //  协议文字颜色 默认值： #5496E3  
        prefix: '我已阅读并同意', // 条款前的文案 默认值：“我已阅读并同意”  
        suffix: '并使用本机号码登录', // 条款后的文案 默认值：“并使用本机号码登录”  
        privacyItems: []  
    }  
})

操作步骤：

配置一键登录自定义勾选框图片

privacyTerms: {  
        defaultCheckBoxState: false,   
        uncheckedImage:"/static/images/login/check.png",   
        checkedImage:"/static/images/login/checked.png",   
        checkBoxSize: "20",  
        fontSize: "14",  
        textColor: '#999999',   
        termsColor: '#FFC644',   
        prefix: '我已阅读并同意',   
        suffix: '并使用本机号码登录',   
        privacyItems: []  
    }
`

更多关于uni-app 一键登录自定义勾选框未生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

没有人遇到相同的问题吗

更多关于uni-app 一键登录自定义勾选框未生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根本没有人理会。。。

在 uni-app 中使用一键登录功能时，如果你自定义了勾选框但未生效，可能有以下几个原因导致问题出现。以下是一些排查和解决方案：

1. 检查自定义勾选框的绑定

确保你正确绑定了勾选框的 checked 状态和事件处理函数。例如：

<template>
  <view>
    <checkbox :checked="isChecked" @change="onCheckboxChange" />
    <text>同意协议</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false, // 默认未选中
    };
  },
  methods: {
    onCheckboxChange(e) {
      this.isChecked = e.detail.value; // 更新选中状态
    },
  },
};
</script>

确保 isChecked 状态能够正确更新。

2. 检查一键登录的逻辑

在一键登录的代码中，确保你检查了勾选框的状态。例如：

uni.login({
  provider: 'univerify',
  success: (res) => {
    if (this.isChecked) {
      // 用户已勾选，继续登录逻辑
      console.log('登录成功', res);
    } else {
      // 用户未勾选，提示用户
      uni.showToast({
        title: '请先同意协议',
        icon: 'none',
      });
    }
  },
  fail: (err) => {
    console.log('登录失败', err);
  },
});

确保在登录逻辑中正确判断了 isChecked 的值。

3. 确保自定义勾选框渲染正确

如果自定义勾选框未正确渲染，可能是样式或组件问题。可以尝试以下方法：

  • 使用 uni-app 提供的原生组件 <checkbox> 或 <radio>。
  • 如果使用自定义组件，确保组件的样式和事件绑定正确。

4. 检查页面生命周期

如果勾选框的状态在页面加载时未正确初始化，可能是生命周期问题。确保在 onLoad 或 onShow 中初始化状态：

onLoad() {
  this.isChecked = false; // 初始化勾选框状态
}

5. 调试和日志

通过 console.log 调试勾选框的状态和事件，确保逻辑正确执行。例如：

onCheckboxChange(e) {
  console.log('勾选框状态变化', e.detail.value);
  this.isChecked = e.detail.value;
}

6. 检查 uni-app 版本

确保你使用的 uni-app 版本是最新的，某些问题可能是由于旧版本的 bug 导致的。可以通过以下命令更新：

npm install -g [@vue](/user/vue)/cli [@dcloudio](/user/dcloudio)/uni-cli
回到顶部