pages.json

全局核心配置：页面路由、导航栏样式、tabBar、权限、下拉刷新、全局窗口配置

manifest.json

跨端编译配置：各端AppID、权限配置、打包配置、域名白名单、SDK配置

uni.scss

全局样式变量文件，内置统一配色、尺寸变量，全局生效

App.vue

全局根组件，配置全局样式、全局生命周期、全局状态

pages/

所有页面文件目录，每个页面独立文件夹，包含vue页面文件

components/

自定义组件目录，存放全局/局部复用组件

static/

静态资源目录，存放图片、字体、视频等静态文件，仅该目录资源可被编译识别

{{ 变量/表达式 }}

文本插值，响应式渲染数据

与Vue一致，支持单行表达式，不支持复杂语句

v-text

覆盖式文本渲染，无插值闪烁

全端兼容，小程序端性能优于插值

v-html

渲染富文本HTML内容

小程序端受限，仅支持部分标签，不支持完整HTML

v-bind / :

动态绑定属性、class、style

全端通用，class对象/数组写法完全兼容Vue

v-on / @

绑定页面点击、输入等事件

小程序端事件基于原生封装，事件名与Vue一致

v-if / v-else

条件销毁/创建节点，权限、动态渲染场景

全端兼容，频繁切换不推荐

v-show

控制显示隐藏，仅切换样式

小程序端性能优异，适合频繁显隐切换

v-for

列表循环渲染数组、对象

必须绑定key，推荐:key="index"或唯一值，不支持省略key

原生组件v-model

uni-app input/textarea/switch 等组件完全支持 v-model 双向绑定

自定义组件v-model

Vue2 沿用 .sync 语法，Vue3 支持多 v-model，与Vue语法对齐

小程序原生限制

不支持表单嵌套，所有表单组件必须脱离form独立使用或规范嵌套

#ifdef 平台

仅在指定平台编译生效

H5、APP-PLUS、MP-WEIXIN、MP-ALIPAY、MP-DOUYIN

#ifndef 平台

除指定平台外，其余所有平台生效

常用于排除小程序专属逻辑

#endif

结束条件编译块，必须成对出现

所有条件编译必须收尾，否则编译报错

#ifdef H5

仅H5端生效代码

处理H5专属DOM、路由、浏览器API

#ifdef MP-WEIXIN

仅微信小程序生效

微信专属登录、授权、小程序订阅消息

#ifdef APP-PLUS

仅App端生效

App原生插件、推送、本地权限、硬件调用

消息提示

uni.showToast、uni.showModal、uni.showLoading

全局弹窗、提示、加载框，全端统一样式

路由跳转

uni.navigateTo、uni.redirectTo、uni.switchTab、uni.reLaunch

页面跳转、tab切换、页面重置，替代Vue-router

网络请求

uni.request

统一网络请求，替代axios，全端适配

本地存储

uni.setStorageSync、uni.getStorageSync

同步本地存储，替代localStorage，跨端统一

图片媒体

uni.chooseImage、uni.previewImage

选图、预览图片，抹平各端媒体差异

统一尺寸单位

rpx（核心单位）

小程序专属自适应单位，750rpx = 屏幕全屏宽度，自动适配所有机型

样式作用域

scoped

style加scoped，样式仅当前页面/组件生效，防止全局污染

全局样式

uni.scss / App.vue样式

无需引入，全局自动生效，统一项目视觉规范

禁止使用单位

px固定尺寸

直接使用px会导致小屏溢出、大屏过小，移动端不推荐

H5端兼容

rpx自动转vw

编译H5时，rpx自动转为vw单位，无需手动适配

onLaunch

应用首次启动触发，全局仅执行一次

初始化登录、全局配置、权限校验、SDK初始化

onShow

应用从后台切换至前台、启动时触发

刷新全局状态、检测网络状态

onHide

应用切换至后台触发

保存临时数据、暂停播放、关闭弹窗

onError

应用全局报错触发

全局异常捕获、日志上报

onLoad(option)

页面加载完成，仅执行一次，可接收路由参数

页面初始化、接收参数、发起首次接口请求

onShow

页面显示/从下级页面返回/tab切换都会触发

每次进入页面刷新数据、刷新列表、校验登录态

onReady

页面DOM渲染完成，仅执行一次

获取DOM节点、初始化动画、渲染完成操作

onHide

页面隐藏、跳转下级页面触发

暂停定时器、关闭弹窗、保存页面状态

onUnload

页面销毁卸载，仅执行一次

清除定时器、取消请求、销毁监听事件

onPullDownRefresh

页面下拉刷新触发

列表下拉刷新数据，需手动 uni.stopPullDownRefresh()

onReachBottom

页面滚动到底部触发

列表上拉加载更多、分页请求

onShareAppMessage

页面转发分享触发

自定义分享标题、封面、链接

setup(Vue3)

组件初始化最早执行

定义响应式数据、方法、监听

onMounted

组件DOM挂载完成

组件内部接口请求、DOM操作

onUpdated

组件数据更新渲染完成

更新后DOM二次操作

onUnmounted

组件销毁

清除定时器、解绑事件

首次打开页面

App.onLaunch → App.onShow → Page.onLoad → Page.onShow → Page.onReady

页面跳转下级

当前页 onHide → 新页面 onLoad → 新页面 onShow → 新页面 onReady

返回上一级页面

当前页 onUnload → 上一页 onShow

Tab切换页面

隐藏页 onHide → 显示页 onShow（不会执行onLoad）

uni.navigateTo

保留当前页，跳转新页面

页面栈+1，支持返回上一页

uni.redirectTo

关闭当前页，跳转新页面

页面栈数量不变，无法返回当前页

uni.reLaunch

关闭所有页面，跳转指定页面

页面栈清空，仅保留目标页

uni.switchTab

切换tabBar页面

关闭所有非tab页面，仅保留tab页

uni.navigateBack

返回上一页/多级页面

页面栈-1，可通过delta指定返回层数

运行环境

浏览器/DOM环境

小程序虚拟机，无DOM

跨端编译，无DOM、适配多端

生命周期

仅Vue组件生命周期

页面+App专属生命周期

融合两者，区分全局/页面/组件生命周期

路由方案

vue-router

原生页面路由API

uni 封装路由API，统一多端

适配单位

px/rem/vw

rpx

主推rpx，自动多端适配

跨端能力

仅H5

仅对应小程序

一套代码多端发布

条件编译

无

无

专属语法，解决跨端差异