更新记录

1.0.43（2025-12-10） 下载此版本

优化

1.0.42（2025-12-05） 下载此版本

优化

1.0.41（2025-12-05） 下载此版本

优化

查看更多

平台兼容性

uni-app(4.13)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
√ √ √ √ √ - √ √ -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
√ - - - - - - - - - -

uni-app x(4.13)

Chrome Safari Android iOS 鸿蒙 微信小程序
- - - - - -

SC-UI 组件库

轻量级 uni-app UI 组件库，专为移动端应用设计，提供丰富的基础组件和工具函数。

✨ 特性

  • 🚀 轻量高效：组件库体积小，性能优化
  • 🎨 高度定制：支持主题配置和样式自定义
  • 📱 多端支持：支持 Vue2/Vue3，兼容 H5、小程序、APP 等多个平台
  • 🔧 开箱即用：简单的 API 设计，易于上手
  • 🛠️ 工具丰富：内置实用的工具函数和混入
  • 📖 完整文档：详细的组件文档和使用示例

📦 安装

通过 HBuilderX 导入

  1. 在 HBuilderX 中打开你的 uni-app 项目
  2. 右键点击 uni_modules 目录，选择 从 uni_modules 插件市场导入插件
  3. 搜索 sc-ui 并导入

手动安装

下载插件源码，将 sc-ui 目录复制到项目的 uni_modules 目录下。

🚀 快速开始

1. 引入组件库

在 main.js 中引入并配置：

// Vue2
import Vue from 'vue'
import scui from "./uni_modules/sc-ui";

Vue.use(scui, {
  // 配置主题色
  color: {
    c1: "#F11F00", // 主色
    c2: "#007DFE", // 辅色
    c3: "#32F08C", // 成功色
  },
  // 配置按钮预设样式
  button: {
    types: {
      bt1: {
        color: "#fff",
        backgroundColor: "#F11F00",
        borderRadius: "10rpx",
      },
      bt2: {
        color: "#fff",
        backgroundColor: "#007DFE",
        borderRadius: "20rpx",
      },
    },
  },
});

// Vue3
import { createSSRApp } from 'vue'
import scui from "./uni_modules/sc-ui";

export function createApp() {
  const app = createSSRApp()
  app.use(scui, {
    // 配置项同 Vue2
  })
  return app
}

2. 使用组件

在页面中直接使用组件：

<template>
  <view class="container">
    <!-- 按钮组件 -->
    <sc-button type="bt1" @click="handleClick">点击我</sc-button>

    <!-- 文本组件 -->
    <sc-text text="Hello SC-UI" size="32" color="#333" bold></sc-text>

    <!-- 图标组件 -->
    <sc-icon name="arrow-left" size="30" color="#666"></sc-icon>

    <!-- 弹性布局
      price="99.99"
      symbol="¥"
      :bold="true"
      color="#FF0000"></sc-price> </view
  flex direction="t" gap="20">
      <sc-text text="项目1"></sc-text>
      <sc-text text="项目2"></sc-text>
    </sc-flex>

    <!-- 网格布局 -->
    <sc-grid :col="3" gap="20">
      <view v-for="i in 6" :key="i" class="grid-item">
        <sc-text :text="`项目${i}`"></sc-text>
      </view>
    </sc-grid>

    <!-- 价格显示 -->
    <sc-price price="99.99" symbol="¥" :bold="true" color="#FF0000"></sc-price>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      uni.showToast({
        title: "点击成功",
        icon: "success",
      });
    },
  },
};
</script>

📦 工具函数

sc-ui 内置了丰富的工具函数，通过 uni.$sc 全局对象访问：

系统信息

// 获取系统信息
const sysInfo = uni.$sc.sys;
console.log(sysInfo.platform); // 平台信息
console.log(sysInfo.windowWidth); // 屏幕宽度
console.log(sysInfo.windowHeight); // 屏幕高度
console.log(sysInfo.statusBarHeight); // 状态栏高度

存储操作

// 存储数据
uni.$sc.storage.set("key", "value");

// 获取数据
const value = uni.$sc.storage.get("key");

// 删除数据
uni.$sc.storage.remove("key");

// 清空存储
uni.$sc.storage.clear();

路由操作

// 页面跳转
uni.$sc.push("/pages/detail/detail");

// 页面返回
uni.$sc.back();

// 替换页面
uni.$sc.router.replace("/pages/home/home");

样式工具

// 深度合并对象
const merged = uni.$sc.deepMerge(obj1, obj2);

// 添加单位
const size1 = uni.$sc.addUnit(100); // '100rpx'
const size2 = uni.$sc.addUnit('100px'); // '100px'

// 获取颜色
const color1 = uni.$sc.getColor("#f00"); // '#ff0000'
const color2 = uni.$sc.getColor("red"); // '#ff0000'

// 添加样式
const style = uni.$sc.addStyle("color: red; font-size: 16px;");

函数节流与防抖

// 防抖函数
const debouncedFn = uni.$sc.debounce(fn, 300);

// 节流函数
const throttledFn = uni.$sc.throttle(fn, 300);

表单验证

// 验证手机号
const isPhone = uni.$sc.isMobile("***");

// 验证邮箱
const isEmail = uni.$sc.isEmail("test@example.com");

// 验证身份证
const isIdCard = uni.$sc.isIdCard("110101199001011234");

🎨 主题配置

支持全局主题配置，统一管理组件样式：

// main.js
Vue.use(scui, {
  // 颜色配置
  color: {
    c1: "#F11F00", // 主色调
    c2: "#007DFE", // 辅助色
    c3: "#32F08C", // 成功色
    c4: "#FF6B6B", // 警告色
    c5: "#4ECDC4", // 信息色
  },
  // 按钮样式配置
  button: {
    types: {
      primary: {
        backgroundColor: "#F11F00",
        color: "#fff",
        borderRadius: "10rpx",
        padding: "0 30rpx",
        height: "80rpx",
        fontSize: "28rpx"
      },
      secondary: {
        backgroundColor: "#007DFE",
        color: "#fff",
        borderRadius: "20rpx",
        padding: "0 30rpx",
        height: "80rpx",
        fontSize: "28rpx"
      },
      danger: {
        backgroundColor: "#FF6B6B",
        color: "#fff",
        borderRadius: "10rpx"
      },
      success: {
        backgroundColor: "#32F08C",
        color: "#fff",
        borderRadius: "10rpx"
      },
      outline: {
        backgroundColor: "transparent",
        color: "#F11F00",
        border: "2rpx solid #F11F00",
        borderRadius: "10rpx"
      }
    }
  }
});

主题使用

在组件中可以直接使用配置的主题色：

<sc-button type="primary" text="主按钮"></sc-button>
<sc-button type="secondary" text="辅按钮"></sc-button>
<sc-button type="danger" text="危险按钮"></sc-button>

📱 平台兼容性

平台 支持情况
H5 ✅
微信小程序 ✅
支付宝小程序 ✅
百度小程序 ✅
字节跳动小程序 ✅
QQ 小程序 ✅
App (Android) ✅
App (iOS) ✅
快应用 ❌

🔧 开发指南

项目结构

uni_modules/sc-ui/
├── components/          # 组件目录
│   ├── sc-button/      # 按钮组件
│   ├── sc-text/        # 文本组件
│   ├── sc-icon/        # 图标组件
│   ├── sc-flex/        # 布局组件
│   └── ...
├── libs/               # 工具库
│   ├── utils/          # 工具函数
│   ├── props/          # 属性定义
│   └── mixin/          # 混入
├── index.js           # 入口文件
├── package.json       # 插件配置
└── README.md          # 说明文档

组件开发规范

  1. 命名规范：组件使用 sc- 前缀，文件名与组件名保持一致
  2. 属性定义：使用 TypeScript 风格的属性注释
  3. 样式规范：使用 SCSS，类名使用 sc- 前缀
  4. 事件规范：使用标准的事件名称，如 click、change 等

🤝 联系方式

  • 邮箱：c.sunshine@aliyun.com
  • 微信：zuodaowx

注意：本组件库为纯个人项目，仅供学习和参考使用。在生产环境使用前请充分测试。

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...