Skip to content

ruoyi-plus-uniapp

Main Navigation 后端前端移动端最佳实践特性视频演示

主题

Sidebar Navigation

🚀 快速开始

项目简介

快速启动

项目结构

配置文件

开发规范

🏗️ UniApp基础

UniApp概览

项目配置 (manifest.json)

页面配置 (pages.json)

应用配置 (uni.scss)

生命周期

路由导航

条件编译

调试工具

HBuilderX使用

🧩 WD UI 组件库 (98组件)

组件库概览

主题定制

快速开始

基础组件 (6个)

Button 按钮

Icon 图标

Text 文本

Transition 动画

Resize 监听元素尺寸

ConfigProvider 配置

布局组件 (5个)

Row-Col 行列布局

Grid 宫格

Gap 间隙槽

Divider 分割线

Sticky 吸顶布局

导航组件 (9个)

Navbar 导航栏

Tabbar 标签栏

Tabs 标签页

Segmented 分段器

Sidebar 侧边栏

IndexBar 索引栏

Pagination 分页

Paging 分页加载

Backtop 回到顶部

表单组件 (22个)

Input 输入框

Textarea 文本域

InputNumber 计数器

PasswordInput 密码

Search 搜索

Checkbox 复选框

Radio 单选框

Switch 开关

Rate 评分

Slider 滑块

Picker 选择器

PickerView 选择器视图

ColPicker 多列选择器

SelectPicker 单复选

DatetimePicker 时间

DatetimePickerView

Calendar 日历

CalendarView 日历板

Upload 上传

Form 表单

Signature 签名

Recorder 录音

展示组件 (11个)

Cell 单元格

Badge 徽标

Tag 标签

Card 卡片

Collapse 折叠面板

Steps 步骤条

Table 表格

Img 图片

ImgCropper 图片裁剪

Swiper 轮播图

Skeleton 骨架屏

Curtain 幕帘

Watermark 水印

反馈组件 (23个)

ActionSheet 上拉菜单

Popup 弹出层

Overlay 遮罩层

MessageBox 弹框

Toast 轻提示

Notify 消息通知

Loading 加载指示器

Progress 进度条

Circle 环形进度条

Loadmore 加载更多

StatusTip 缺省提示

Tooltip 文字提示

Popover 气泡

DropMenu 下拉菜单

FloatingPanel 浮动面板

SwipeAction 滑动操作

SortButton 排序按钮

NoticeBar 通知栏

CountDown 倒计时

CountTo 数字滚动

Keyboard 虚拟键盘

NumberKeyboard 数字

Fab 悬浮按钮

📡 API接口 (api)

API概览

接口配置

HTTP请求封装

系统接口

认证接口 (auth)

用户接口 (user)

角色接口 (role)

字典接口 (dict)

岗位接口 (post)

业务接口

首页接口 (home)

电话接口 (phone)

广告接口 (ad)

商城接口 (mall)

订单接口 (order)

商品接口 (goods)

接口类型定义

错误处理

请求拦截器

🎣 组合式函数 (composables)

组合式函数概览

自动导入配置

核心组合函数

useAuth 认证管理

useDict 字典管理

useHttp 请求管理

useToken 令牌管理

useAppInit 应用初始化

业务组合函数

usePayment 支付处理

useShare 分享功能

useScroll 滚动处理

useEventBus 事件总线

useWebSocket 实时通信

界面组合函数

useTheme 主题管理

useI18n 国际化

自定义Hook开发

🛠️ 工具库 (utils)

工具函数概览

基础工具

string 字符串工具

boolean 布尔值工具

function 函数工具

date 日期工具

validators 验证工具

业务工具

cache 缓存工具

route 路由工具

platform 平台工具

tenant 租户工具

安全工具

crypto 加密工具

rsa RSA加密

辅助工具

to 异步处理

📄 页面开发 (pages)

页面开发指南

页面生命周期

页面路由传参

主包页面

首页 (index)

个人中心 (my)

设置页面 (settings)

认证页面

统一认证 (auth)

账号登录 (login)

手机登录 (phoneLogin)

用户注册 (register)

短信验证 (smsVerify)

分包页面

分包管理

管理员页面 (admin)

业务页面扩展

🎨 布局系统 (layouts)

布局概述

默认布局 (default)

导航栏配置

标签栏配置

胶囊组件

自定义布局

🏪 状态管理 (stores)

状态管理概览

Pinia配置

用户状态 (user)

字典状态 (dict)

标签栏状态 (tabbar)

持久化存储

🎨 样式系统 (styles)

样式概览

样式架构设计

UnoCSS配置

全局样式 (uni.scss)

rpx单位使用

主题定制

响应式设计

组件样式

样式最佳实践

📝 类型定义 (types)

类型系统概览

全局类型 (global.d.ts)

HTTP类型 (http.d.ts)

环境类型 (env.d.ts)

组件类型 (components.d.ts)

页面类型 (uni-pages.d.ts)

静态资源类型

自动导入类型

异步组件类型

🌍 国际化 (locales)

国际化配置

语言包管理

中文语言包 (zh-CN)

英文语言包 (en-US)

动态语言切换

国际化最佳实践

📦 组件开发

自定义组件开发

组件封装规范

组件通信模式

组件生命周期

组件测试

📱 平台适配

平台差异说明

条件编译使用

H5端适配

微信小程序适配

支付宝小程序适配

百度小程序适配

QQ小程序适配

抖音小程序适配

Android App适配

iOS App适配

鸿蒙适配

⚡ 性能优化

性能优化概览

启动性能优化

渲染性能优化

包体积优化

图片优化

分包加载优化

内存优化

网络优化

🐛 调试与测试

调试工具使用

真机调试

小程序开发者工具

日志管理

错误监控

单元测试

集成测试

兼容性测试

📦 打包发布

打包配置概览

环境配置

H5打包发布

微信小程序发布

支付宝小程序发布

App云打包

App离线打包

应用商店发布

版本管理策略

页面导航

Are you an LLM? You can read better optimized documentation at /mobile/layouts/navbar.md for this page in Markdown format

导航栏配置

在 Gitee 上编辑此页面

Last updated:

Pager

上一页默认布局 (default)

下一页标签栏配置

© 2025 若依工作室

粤ICP备2021091549号-5