更新记录

1.0.0（2024-12-12） 下载此版本

sc-view 基础元素、布局组件，减少命名！

平台兼容性

scView

配置步骤

1. 引入 scView 主 JS 库

import App from './App';
import {createSSRApp} from 'vue';
import scView from '@/uni_modules/scview-ui';

export function createApp() {
  const app = createSSRApp(App);
  app.use(scView, {});
  return {
    app,
  };
}

2. 在引入uView的全局SCSS主题文件

在项目根目录的uni.scss中引入此文件。

/* uni.scss */
@import '@/uni_modules/scview-ui/theme.scss';

3. 引入uView基础样式

注意！

在App.vue中首行的位置引入，注意给 style 标签加入 lang="scss" 属性

<style lang="scss">
  /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
  @import "@/uni_modules/scview-ui/index.scss";
</style>

4. 配置easycom组件模式

此配置需要在项目根目录的pages.json中进行。

// pages.json
{
  // 如果您是通过uni_modules形式引入uView，可以忽略此配置
  "easycom": {
    "^sc-(.*)": "@/uni_modules/scview-ui/components/sc-$1/sc-$1.vue"
  },
  // 此为本身已有的内容
  "pages": [
    // ......
  ]
}

全局样式的配置

app.use(scView, {
    color: {
      col: '#007AFF',
      jbs: 'linear-gradient(blue, pink)'
    },
    text: {
      sizes: {
        mini: 20,
        small: 24,
        normal: 30,
        large: 40,
        huge: 20
      }
    },
    button: {
      sizes: {
        mini: {
          width: 100,
          height: 50,
          round: 10,
          fontSize: 20
        },
        small: {
          width: 200,
          height: 80,
          round: 20,
          fontSize: 35
        }
      }
    }

});

颜色值的使用

<sc-text color="primary"></sc-text>
<sc-button bg-color="success"></sc-button>

Api

请求

创建一个请求文件, 引入 request.js, 拦截器可以直接在源文件 http.interceptor.js 中进行设置, 也可自定义, 自定义时会同样执行 http.interceptor.js 文件中的代码, 需自行清除.

import request from "@/uni_modules/scview-ui/request.js";

// 设置全局配置
request.setConfig({
  // 在这里设置全局默认参数
  baseUrl: 'http://localhost:8080/api/'
});
// 请求拦截器
request.interceptor.request((config) => {
  // 在这里设置请求头等参数
  return config;
});

// 响应拦截器
request.interceptor.response((response) => {
  // 在这里处理返回数据
  return response;
});

export default {
  index() {
    let url = `/index/index`;
    return request.post(url);
  }
}

工具库

uni.$sc.validate 验证

• isPureNumber: 判断一个字符串是否是纯数字
• isPhone: 判断一个字符串是否是手机号
• isEmail: 判断一个字符串是否是邮箱
• isIdCard: 判断一个字符串是否是身份证号
• isEmpty: 判断一个值是否为空
• isObject: 判断一个值是否为对象

uni.$sc.utils 工具

• systemInfo: 获取设备信息
• addUnit: 添加单位，如果是字符串直接返回，否则加上rpx单位结尾
• deepMerge: 深度合并多个对象。如果对象中有嵌套对象，会递归地进行合并。
• deepClone: 深度克隆对象或数组
• throttle: 节流函数，限制函数调用频率
• debounce: 函数防抖

基础组件

text 文本

props

slot

event

image 文本

props

event

button 按钮

props

event

flex 布局

props