更新记录

0.0.13（2025-07-24）

新增switch开关

0.0.12（2025-07-18）

新增单选框、复选框组件

0.0.11（2025-07-15）

新增input、textarea组件

平台兼容性

uni-app(4.71)

uni-app x(4.71)

其他

使用

1、安装组件

在应用市场详情界面安装。

2、引入全局样式变量

在 uni.scss 中配置：

@import '@/uni_modules/jiu-uni/themes/vars.scss';

样式变量清单（可在 uni.scss 中覆盖）：

// 颜色
$j-color: (
    'primary': rgba(32, 128, 240, 1),
    'success': rgba(24, 160, 88, 1),
    'warning': rgba(240, 160, 32, 1),
    'danger': rgba(208, 48, 80, 1),
    'info': rgba(144, 147, 153, 1)
);
$j-color-hover: (
    'primary': rgba(64, 152, 252, 1),
    'success': rgba(54, 173, 106, 1),
    'warning': rgba(252, 176, 64, 1),
    'danger': rgba(222, 87, 109, 1),
    'info': rgba(169, 169, 169, 1)
);
$j-color-light: rgba(255, 255, 255, 1);
$j-color-dark: rgba(8, 14, 26, 1);
$j-color-bg-light: rgba(247, 247, 250, 1);
$j-color-bg-dark: rgba(38, 38, 42, 1);
$j-color-border-light: rgba(224, 224, 230, 1);
$j-color-border-dark: rgba(62, 62, 69, 1);

// 尺寸
$j-size-base: 16;
$j-size-font: (
    'xs': $j-size-base * 0.75, // 12px
    'sm': $j-size-base * 0.875, // 14px
    'md': $j-size-base * 1, // 16px
    'lg': $j-size-base * 1.125, // 18px
    'xl': $j-size-base * 1.25 // 20px
);
$j-size-space: (
    'xs': $j-size-base * 0.25, // 4px
    'sm': $j-size-base * 0.5, // 8px
    'md': $j-size-base * 1, // 16px
    'lg': $j-size-base * 1.5, // 24px
    'xl': $j-size-base * 3 // 48px
);
$j-size-rounded: (
    'xs': $j-size-base * 0.125, // 2px
    'sm': $j-size-base * 0.25, // 4px
    'md': $j-size-base *  0.375, // 6px
    'lg': $j-size-base * 0.5, // 8px
    'xl': $j-size-base * 0.75 // 12px
);
$j-size-height: (
    'xs': $j-size-base * 1.375, // 22px
    'sm': $j-size-base * 1.75, // 28px
    'md': $j-size-base *  2.125, // 34px
    'lg': $j-size-base * 2.625, // 42px
    'xl': $j-size-base * 3 // 48px
);
$j-size-button-padding: (
    'xs': 8, // 8px
    'sm': 10, // 10px
    'md': 12, // 12px
    'lg': 16, // 16px
    'xl': 18 // 18px
);
$j-size-input-padding: (
    'xs': 8, // 8px
    'sm': 10, // 10px
    'md': 12, // 12px
    'lg': 14, // 14px
    'xl': 16 // 16px
);

// 阴影
@function j-shadow($color) {
    @return (
        'xs': 0 1px 2px 0 $color,
        'sm': (0 1px 3px 0 $color, 0 1px 2px -1px $color),
        'md': (0 4px 6px -1px $color, 0 2px 4px -2px $color),
        'lg': (0 10px 15px -3px $color, 0 4px 6px -4px $color),
        'xl': (0 20px 25px -5px $color, 0 8px 10px -6px $color)
    );
}

// 字体
$j-font-size: $j-size-base + px;
$j-font-line: 1.5;
$j-font-family: sans-serif;
$j-font-color-light: rgba(44, 62, 80, 1);
$j-font-color-dark: rgba(231, 231, 233, 1);

3、引入全局样式

在 App.vue 中配置：

@import '@/uni_modules/jiu-uni/themes/index.scss';

4、组件安装

4.1、全局安装

import jiuUni from '@/uni_modules/jiu-uni/index.uts';

xxx.use(jiuUni);

4.2、easycom 安装

在 pages.json 中配置：

{
    "easycom": {
        "autoscan": true,
        "custom": {
            "^j-(.*)": "@/uni_modules/jiu-uni/components/$1/$1.vue"
        }
    }
}

5、暗色主题

暗色主题跟随系统主题，默认不开启暗色主题适配。
web、小程序需要在 manifest.json 对应平台配置 "darkmode": true

开启暗色适配，在 main(.uts/.ts/.js) 中增加：

5.1、全局配置：

import JiuUni from '@/uni_modules/jiu-uni/index.uts';

xxx.use(JiuUni, { JDark: true }); // 开启暗色适配

5.2、easycom 独立配置：

import { setOption } from '@/uni_modules/jiu-uni/index.uts';

setOption({ JDark: true }); // 开启暗色适配

5.3、获取当前主题值：

import { useConfig } from '@/uni_modules/jiu-uni/index.uts';

const config = useConfig();
console.log(config.dark.value); // vue2：this.$dark.value

6、多语言环境

初始化未设定语言时，当前语言默认为系统语言。

设置默认初始化设定语言，在 main(.uts/.ts/.js) 中增加：

6.1、全局初始化语言：

vue2：

import JiuUni from '@/uni_modules/jiu-uni/index.uts';

xxx.use(JiuUni, { JLocal: 'en' }); // 初始化语言

5.2、easycom 独立初始化语言：

import { setOption } from '@/uni_modules/jiu-uni/index.uts';

setOption({ JLocal: 'en' }); // 初始化语言

6.3、获取当前语言值：

import { useConfig } from '@/uni_modules/jiu-uni/index.uts';

const config = useConfig();

console.log(config.local.value); // vue2：this.$local.value

6.4、设置当前语言值：

import { useConfig } from '@/uni_modules/jiu-uni/index.uts';

const config = useConfig();

// en、zh-Hans、zh-Hant、fr、es
config.setLocal('en'); // vue2：this.$setLocal('en')

6.5、全局设置语言内容：

vue2：

import JiuUni from '@/uni_modules/jiu-uni/index.uts';

xxx.use(JiuUni, { JLang: { en: {}, es: {}, fr: {}, zhHans: {}, zhHant: {} } }); // 语言内容

5.6、easycom 独立设置语言内容：

import { setOption } from '@/uni_modules/jiu-uni/index.uts';

setOption({ JLang: { en: {}, es: {}, fr: {}, zhHans: {}, zhHant: {} } }); // 语言内容

5.7、获取语言内容：

import { useConfig } from '@/uni_modules/jiu-uni/index.uts';
const config = useConfig();

<template>
    <!-- vue3 -->
    {{ config.t('xxx.xxx') }}
    <!-- vue2 -->
    {{ $t('xxx.xxx') }}
</template>

样式

flex 样式

font 样式

size 样式

place 样式

space 样式

border 样式

color 样式

内置函数

组件

组件 jclass、jstyle 便宜于微信小程序class、style赋值。

JView View组件

属性

插槽

事件

JText Text组件

属性

插槽

事件

JIcon 图标组件

自定义图标

在全局样式中定义字体库，组件传入 family 字体库名称即可。

属性

插槽

事件

JScroll 滚动组件

属性

插槽

事件

JCell 单元格组件

属性

插槽

事件

JCellItem 单元格组件

属性

插槽

事件

JImage 图片组件

属性

插槽

事件

JButton 按钮组件

属性

插槽

事件

JInput 输入框组件

属性

插槽

事件

JTextarea 文本域组件

属性

插槽

事件

JRadio 单选框组件

属性

插槽

事件

JRadioGroup 单选框组组件

属性

插槽

事件

JCheckbox 复选框组件

属性

插槽

事件

JRadioGroup 单选框组组件

属性

插槽

事件

JSwitch 开关选择器组件

属性

插槽

事件

JRate 评分组件

属性

插槽

事件