更新记录

0.0.2（2025-06-18）

新增css样式

0.0.1（2025-06-18）

1、新增组件JView 2、新增组件JText 3、新增组件JIcon

平台兼容性

云端兼容性

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-light: rgba(255, 255, 255, 1);
$j-color-dark: rgba(8, 14, 26, 1);
$j-color: (
    'primary': rgba(26, 92, 255, 1),
    'success': rgba(70, 201, 58, 1),
    'warning': rgba(255, 186, 0, 1),
    'danger': rgba(255, 71, 87, 1),
    'info': rgba(178, 178, 178, 1)
);

// 尺寸
$j-size-base: 16;
$j-size-font: (
    'xs': $j-size-base * 0.625,
    'sm': $j-size-base * 0.75,
    'md': $j-size-base * 1,
    'lg': $j-size-base * 1.125,
    'xl': $j-size-base * 1.5
);
$j-size-space: (
    'xs': $j-size-base * 0.25,
    'sm': $j-size-base * 0.5,
    'md': $j-size-base * 1,
    'lg': $j-size-base * 1.5,
    'xl': $j-size-base * 3
);

// 阴影
$j-shadow: (
    'xs': (
        'light': 0 1px 2px 0 rgba($j-color-dark, 0.1),
        'dark': 0 1px 2px 0 rgba($j-color-light, 0.1)
    ),
    'sm': (
        'light': '0 1px 3px 0 rgba($j-color-dark, 0.1), 0 1px 2px -1px rgba($j-color-dark, 0.1)',
        'dark': '0 1px 3px 0 rgba($j-color-light, 0.1), 0 1px 2px -1px rgba($j-color-light, 0.1)'
    ),
    'md': (
        'light': '0 4px 6px -1px rgba($j-color-dark, 0.1), 0 2px 4px -2px rgba($j-color-dark, 0.1)',
        'dark': '0 4px 6px -1px rgba($j-color-light, 0.1), 0 2px 4px -2px rgba($j-color-light, 0.1)'
    ),
    'lg': (
        'light': '0 10px 15px -3px rgba($j-color-dark, 0.1), 0 4px 6px -4px rgba($j-color-dark, 0.1)',
        'dark': '0 10px 15px -3px rgba($j-color-light, 0.1), 0 4px 6px -4px rgba($j-color-light, 0.1)'
    ),
    'xl': (
        'light': '0 20px 25px -5px rgba($j-color-dark, 0.1), 0 8px 10px -6px rgba($j-color-dark, 0.1)',
        'dark': '0 20px 25px -5px rgba($j-color-light, 0.1), 0 8px 10px -6px rgba($j-color-light, 0.1)'
    )
);

// 字体
$j-font-size: $j-size-base + px;
$j-font-line: 1.4;
$j-font-color-light: rgba(44, 62, 80, 1);
$j-font-color-dark: rgba(228, 243, 234, 1);
$j-font-family: monospace, sans-serif, serif, fantasy;

3、引入全局样式

在 App.vue 中配置：

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

4、组件安装

4.1、全局安装

vue2 安装： 在 uni-app 环境下 vue2 不支持 Vue.use() 只能通过 easycom 方式安装

vue3 安装：

import { createSSRApp } from 'vue';
import jiuUni from '@/uni_modules/jiu-uni/index.uts';
import App from './App';

export function createApp() {
    const app = createSSRApp(App);
    app.use(jiuUni);

    return { app };
};

4.2、easycom 安装

在 pages.json 中配置：

vue2 安装：

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

vue3 安装：

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

5、暗色主题

暗色主题跟随系统主题，默认不开启暗色主题适配。

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

5.1、全局配置：

vue2：

import Vue from 'vue';
import { JiuUni } from '@/uni_modules/jiu-uni/index.uts';
import App from './App';

Vue.use(JiuUni, { JDark: true }); // 开启暗色适配（此处只能开启暗色适配，不能注册组件）

const app = new Vue({ ...App });
app.$mount();

vue3：

import { createSSRApp } from 'vue';
import { JiuUni } from '@/uni_modules/jiu-uni/index.uts';
import App from './App';

export function createApp() {
    const app = createSSRApp(App);
    app.use(JiuUni, { JDark: true }); // 开启暗色适配

    return { app };
};

5.2、easycom 独立配置：

vue2：

import Vue from 'vue';
import App from './App';

Vue.prototype.$JDark = true; // 开启暗色适配

const app = new Vue({ ...App });
app.$mount();

vue3：

import { createSSRApp } from 'vue';
import App from './App';

export function createApp() {
    const app = createSSRApp(App);
    app.provide('JDark', true); // 开启暗色适配

    return { app };
};

5.3、获取当前主题值：

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

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

6、多语言环境

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

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

6.1、全局初始化语言：

vue2：

import Vue from 'vue';
import { JiuUni } from '@/uni_modules/jiu-uni/index.uts';
import App from './App';

Vue.use(JiuUni, { JLocal: 'en' }); // 初始化语言（此处只能初始化语言，不能注册组件）

const app = new Vue({ ...App });
app.$mount();

vue3：

import { createSSRApp } from 'vue';
import { JiuUni } from '@/uni_modules/jiu-uni/index.uts';
import App from './App';

export function createApp() {
    const app = createSSRApp(App);
    app.use(JiuUni, { JLocal: 'en' }); // 初始化语言

    return { app };
};

6.2、获取当前语言值：

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

const config = useConfig();

console.log(config.local.value);

6.3、设置当前语言值：

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

const config = useConfig();

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

样式

flex 样式

font 样式

size 样式

place 样式

space 样式

border 样式

color 样式

组件

JView View组件

属性

插槽

事件

JText Text组件

属性

插槽

事件

JIcon 图标组件

属性

插槽

事件