更新记录

1.0.10（2025-09-24） 下载此版本

优化

1.0.9（2025-09-24） 下载此版本

优化

1.0.8（2025-09-24） 下载此版本

优化

平台兼容性

uni-app(4.13)

uni-app x(4.13)

SC-UI

轻量级 uni-app UI 组件库，提供简洁、易用、高性能的组件，帮助开发者快速构建跨平台应用。

特点

• 轻量级：组件体积小，性能优良
• 跨平台：支持 Vue 2/Vue 3，兼容多个终端平台
• 易用性：组件 API 设计简洁，文档完善
• 可定制：支持主题定制和组件扩展
• 高性能：优化渲染性能，减少不必要的重绘

安装

在 uni-app 项目中，通过 HBuilderX 导入组件库即可使用。

使用

全局引入

在 main.js 中引入并注册组件库：

import Vue from "vue";
import scUI from "@/uni_modules/sc-ui";

// vue2
Vue.use(scUI, {
  // 配置选项
});

// vue3
app.use(scUI, {
  color: {
    // 配置全局颜色值
    c1: "#F11F00",
    c2: "#007DFE",
    c2: "#32F08C",
  },
  button: {
    // 配置全局按钮样式
    types: {
      bt1: {
        // 按钮的固定样式可以全局定义
        color: "#fff",
        width: "100px",
        height: "50px",
        borderRadius: "25px",
        fontSize: "16px",
        fontWeight: "bold",
        backgroundColor: "#3C9CFF",
      },
      bt2: {
        color: "#007DFE",
        width: "300rpx",
        height: "80rpx",
        borderRadius: "80rpx",
        fontSize: "16px",
        fontWeight: "bold",
        border: "1px solid #007DFE",
      },
    },
  },
});

组件使用

<template>
  <view>
    <sc-button type="bt1" @click="handleClick">按钮</sc-button>
    <sc-flex justify="center" align="center">
      <sc-text size="16">文本内容</sc-text>
    </sc-flex>
    <sc-grid col="1fr 200rpx 1fr">
      <sc-text size="16">文本内容</sc-text>
      <sc-text size="16">文本内容</sc-text>
      <sc-text size="16">文本内容</sc-text>
    </sc-grid>
  </view>
</template>

组件列表

基础组件

• <sc-view>：基础视图容器
• <sc-text>：文本组件
• <sc-button>：按钮组件
• <sc-image>：图片组件
• <sc-gap>：间距组件

布局组件

• <sc-flex>：弹性布局
• <sc-grid>：网格布局

业务组件

• <sc-price>：价格组件
• <sc-footer>：底部导航

工具函数

SC-UI 提供了丰富的工具函数，挂载在 $sc 全局对象上，详情查看代码文件

其他方法

• px2rpx: px 转换为 rpx
• rpx2px: rpx 转换为 px
• addUnit: 为数值添加单位
• convertColor: 颜色转换
• deepMerge: 深合并
• deepClone: 深拷贝
• debounce: 函数防抖
• throttle: 函数节流
• getColor: 获取颜色值
• storage: 本地存储
• sysInfo: 获取系统信息
• router: 路由跳转

/**
 * 路由守卫
 * to: 目标路由对象
 * next: 路由继续执行的函数
 * redirect: 路由重定向的函数
 */
uni.$sc.router.beforeEach((to, next, redirect) => {
  next();
});

验证

• isEmail: 校验邮箱
• isEmpty: 校验空值
• isPhone: 校验手机号
• isIdCard: 校验身份证号
• isObject: 校验对象
• isIdCard: 校验身份证号
• isPureNumber: 校验纯数字

联系方式

***: zuodaowx