更新记录

0.0.23（2025-09-05）

新增图表组件

0.0.22（2025-09-05）

新增栅格组件

0.0.21（2025-09-04）

新增徽章组件、加载组件

平台兼容性

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-focus: rgba(32, 128, 240, 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-radius: 3;
$j-size-font: (
    'xs': 12, // 12px
    'sm': 14, // 14px
    'md': 16, // 16px
    'lg': 18, // 18px
    'xl': 20 // 20px
);
$j-size-space: (
    'xs': 2, // 2px
    'sm': 6, // 6px
    'md': 10, // 10px
    'lg': 14, // 14px
    'xl': 18 // 18px
);
$j-size-height: (
    'xs': 26, // 26px
    'sm': 30, // 30px
    'md': 34, // 34px
    'lg': 38, // 38px
    'xl': 42 // 42px
);
$j-size-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: 16;
$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 的 style 标签中配置：

@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/j-$1/j-$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、获取当前主题值：

5.3.1、vue3获取值：

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

const config = useConfig();
console.log(config.dark.value);

5.3.2、vue2获取值：

export default {
    mounted() {
        console.log(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 样式

内置函数

全局交互

showToast 消息提示

showToast(title: string, icon: string | null = 'none', mask: boolean = false, position: JShowToastPosition | null = null, duration: number = 1500)

hideToast 关闭消息提示

hideToast()

showLoading 加载中

showLoading(title: string = '', duration: number | null = null, mask: boolean = true)

hideLoading 关闭加载中

hideLoading()

showModal 模态弹窗

showModal({
    title: String,          // 提示的标题    
    content: String,        // 提示的内容    
    showCancel: Boolean,    // 是否显示取消按钮，默认为 true    
    cancelText: String,     // 取消按钮的文字，默认为"取消"  
    cancelColor: String,    // 取消按钮的文字颜色
    confirmText: String,    // 确定按钮的文字，默认为"确定"  
    confirmColor: String,   // 确定按钮的文字颜色
    editable: Boolean,      // 是否显示输入框
    placeholderText: String // 显示输入框时的提示文本
})

网络请求

全局配置

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

xxx.use(JiuUni, { JRequest: {} }); // 网络请求配置

或

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

setOption({ JRequest: {} }); // 网络请求配置

或

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

request.setOptions({}); // 网络请求配置

JRequest 配置详情：

请求函数

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

request.get(url: string, data: any | null = null, options: JRequestOptions = {})
request.post(url: string, data: any | null = null, options: JRequestOptions = {})
request.put(url: string, data: any | null = null, options: JRequestOptions = {})
request.patch(url: string, data: any | null = null, options: JRequestOptions = {})
request.delete(url: string, data: any | null = null, options: JRequestOptions = {})
request.head(url: string, data: any | null = null, options: JRequestOptions = {})
request.options(url: string, data: any | null = null, options: JRequestOptions = {})
request.upload(url: string, files: Array | null = null, options: JUploadOptions = {}) // 直接返回图片地址

JRequestOptions 配置：

{
    header?: Object,
    timeout?: number,
    dataType?: string,
    responseType?: string,
    sslVerify?: boolean,
    withCredentials?: boolean,
    firstIpv4?: boolean,
    enableChunked?: boolean,
    toast?: boolean,
    retryCount?: number
}

JUploadOptions 配置：

{
    filePath?: string,
    name?: string,
    header?: Object,
    formData?: Object,
    timeout?: number,
    toast?: boolean,
    retryCount?: number,
    ?: (result: UpdateResult) => void
}

网络通讯

通讯函数

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

socket.connect(options: JConnectSocketOptions = {}, name: string = 'default') // 初始化连接（name：通讯名称）
socket.send(data: any, name: string = 'default') // 发送消息（name：通讯名称）
socket.close(name: string | null = 'default') // 关闭连接（name：通讯名称）
socket.addLister(name: string, callback: JSocketCallback) // 添加监听（name：回调函数唯一标识）
socket.removeLister(name: string) // 移除监听（name：回调函数唯一标识）

组件

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

JView View组件

属性

插槽

事件

JText Text组件

属性

插槽

事件

JIcon 图标组件

自定义图标

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

加载字体库函数：

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

registerFontFamily('字体库文件地址', '字体名称');

属性

插槽

事件

JScroll 滚动组件

属性

插槽

事件

JCell 单元格组件

属性

插槽

事件

JCellItem 单元格组件

属性

插槽

事件

JImage 图片组件

属性

插槽

事件

JButton 按钮组件

属性

插槽

事件

JInput 输入框组件

属性

插槽

事件

JTextarea 文本域组件

属性

插槽

事件

JRadio 单选框组件

属性

插槽

事件

JRadioGroup 单选框组组件

属性

插槽

事件

JCheckbox 复选框组件

属性

插槽

事件

JRadioGroup 单选框组组件

属性

插槽

事件

JSwitch 开关选择器组件

属性

插槽

事件

JRate 评分组件

属性

插槽

事件

JSelect 选择器组件

属性

插槽

事件

JDatetime 日期选择器组件

属性

插槽

事件

JTime 时间选择器组件

属性

插槽

事件

JForm 表单组件

属性

插槽

校验规则

事件

函数

JFormItem 表单项组件

属性

插槽

事件

JTransition 动画组件

属性

插槽

事件

JPopup 弹出层组件

属性

插槽

事件

JPicker 选择组件

属性

插槽

事件

JTag 标签组件

属性

插槽

事件

JCalendar 日历组件

属性

插槽

事件

JBadge 徽章组件

属性