当前位置：首页 > news >正文

uni-app 入门学习教程，从入门到精通，uni-app 基础知识详解 (2）

news 2025/10/18 11:45:22

uni-app 基础知识详解

一、pages.json 配置文件

1.1 作用

pages.json 是 uni-app 项目的全局配置文件，用于配置页面路径、窗口样式、tabBar、分包等。

1.2 基本结构

{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首页"}},{"path": "pages/user/user","style": {"navigationBarTitleText": "我的"}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"tabBar": {"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "static/tabbar/home.png","selectedIconPath": "static/tabbar/home-active.png"},{"pagePath": "pages/user/user","text": "我的","iconPath": "static/tabbar/user.png","selectedIconPath": "static/tabbar/user-active.png"}]}
}

说明：

pages：注册所有页面路径，第一个为启动页。
globalStyle：全局页面样式。
tabBar：底部标签栏配置（仅支持 2~5 个）。

二、globalStyle 和 pages

2.1 globalStyle

设置所有页面的默认样式。

"globalStyle": {"navigationBarBackgroundColor": "#007AFF","navigationBarTextStyle": "white","navigationBarTitleText": "默认标题","backgroundColor": "#ffffff","backgroundTextStyle": "dark","enablePullDownRefresh": false
}

2.2 pages 中的 style

覆盖 globalStyle 的特定页面样式。

{"path": "pages/detail/detail","style": {"navigationBarTitleText": "详情页","enablePullDownRefresh": true}
}

三、tabBar 配置

3.1 必须项

list：至少 2 项，最多 5 项。
pagePath：必须在 pages 中注册。
iconPath / selectedIconPath：图标路径（建议尺寸 81x81，实际显示 25x25）。

3.2 示例（见上文 pages.json）

四、subPackages（分包加载）

4.1 作用

减少主包体积，提升启动速度。

4.2 配置示例

{"subPackages": [{"root": "pagesA","pages": [{"path": "list/list","style": { "navigationBarTitleText": "列表页" }},{"path": "detail/detail","style": { "navigationBarTitleText": "详情页" }}]}]
}

对应文件路径：/pagesA/list/list.vue

五、资源引用

5.1 静态资源

存放于 static 目录。
引用方式（绝对路径）：
```
<image src="/static/logo.png"></image>
```

5.2 动态资源（需 require）

<image :src="imgSrc"></image>

export default {data() {return {imgSrc: require('@/static/dynamic.png')}}
}

六、页面样式 & 尺寸单位

6.1 尺寸单位

rpx：响应式单位，屏幕宽度 = 750rpx。
- iPhone6：1rpx = 0.5px
- 其他设备自动换算。

6.2 样式写法

<template><view class="container"><text class="title">Hello uni-app</text></view>
</template><style>
.container {padding: 20rpx;
}
.title {font-size: 36rpx;color: #333;
}
</style>

七、基础组件

7.1 view（容器）

<view class="box" hover-class="hover-style">这是一个可点击区域
</view><style>
.box {width: 200rpx;height: 100rpx;background-color: #eee;text-align: center;line-height: 100rpx;
}
.hover-style {background-color: #ccc;
}
</style>

7.2 text（文本）

<text selectable decode>支持\n换行和&amp;转义</text>

7.3 navigator（页面跳转）

<!-- 跳转到 tabBar 页面（必须用 switchTab） -->
<navigator url="/pages/user/user" open-type="switchTab">我的</navigator><!-- 普通页面跳转 -->
<navigator url="/pages/detail/detail?id=123" open-type="navigate">详情</navigator>

7.4 image（图片）

<image src="/static/logo.png" mode="aspectFit" lazy-load @error="onImgError"@load="onImgLoad"
></image>

八、属性绑定和事件绑定

8.1 属性绑定（v-bind 或 :）

<template><view :class="isActive ? 'active' : 'inactive'">{{ message }}</view>
</template><script>
export default {data() {return {isActive: true,message: "动态文本"}}
}
</script>

8.2 事件绑定（@）

<button @click="handleClick">点击</button>
<view @tap="handleTap">轻触</view><script>
export default {methods: {handleClick() {console.log('按钮被点击');},handleTap() {uni.showToast({ title: '轻触事件' });}}
}
</script>

九、v-for 渲染数据

9.1 基本用法

<template><view v-for="(item, index) in list" :key="item.id"><text>{{ index + 1 }}. {{ item.name }}</text></view>
</template><script>
export default {data() {return {list: [{ id: 1, name: '苹果' },{ id: 2, name: '香蕉' },{ id: 3, name: '橙子' }]}}
}
</script>

注意：必须加 :key，建议用唯一 ID。

十、Flex 布局

10.1 基本概念

容器（flex container）：设置 display: flex
项目（flex items）：容器内的子元素

10.2 容器属性

属性	说明
`flex-direction`	主轴方向（row / column）
`justify-content`	主轴对齐（flex-start / center / space-between）
`align-items`	交叉轴对齐（flex-start / center / stretch）

10.3 项目属性

属性	说明
`flex`	缩放比例（如 `flex: 1`）
`align-self`	单个项目对齐方式

10.4 案例：水平三等分布局

<template><view class="flex-container"><view class="item">1</view><view class="item">2</view><view class="item">3</view></view>
</template><style>
.flex-container {display: flex;justify-content: space-between; /* 或 space-around */padding: 20rpx;
}
.item {width: 200rpx;height: 100rpx;background-color: #007AFF;color: white;text-align: center;line-height: 100rpx;
}
</style>

十一、综合案例：九宫格导航页面

11.1 需求

3x3 图标网格
点击跳转对应页面
图标+文字

11.2 代码实现

<!-- pages/index/index.vue -->
<template><view class="grid-container"><view v-for="(item, index) in navList" :key="index" class="grid-item"@click="navigateTo(item.url)"><image :src="item.icon" class="icon"></image><text class="label">{{ item.text }}</text></view></view>
</template><script>
export default {data() {return {navList: [{ text: '首页', icon: '/static/icons/home.png', url: '/pages/index/index' },{ text: '分类', icon: '/static/icons/category.png', url: '/pages/category/category' },{ text: '购物车', icon: '/static/icons/cart.png', url: '/pages/cart/cart' },{ text: '订单', icon: '/static/icons/order.png', url: '/pages/order/order' },{ text: '收藏', icon: '/static/icons/favorite.png', url: '/pages/favorite/favorite' },{ text: '客服', icon: '/static/icons/service.png', url: '/pages/service/service' },{ text: '设置', icon: '/static/icons/setting.png', url: '/pages/setting/setting' },{ text: '帮助', icon: '/static/icons/help.png', url: '/pages/help/help' },{ text: '关于', icon: '/static/icons/about.png', url: '/pages/about/about' }]}},methods: {navigateTo(url) {if (url) {uni.navigateTo({ url });}}}
}
</script><style>
.grid-container {display: flex;flex-wrap: wrap;padding: 20rpx;justify-content: space-between;
}
.grid-item {width: 210rpx;height: 210rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;margin-bottom: 30rpx;background-color: #f5f5f5;border-radius: 16rpx;
}
.icon {width: 80rpx;height: 80rpx;margin-bottom: 20rpx;
}
.label {font-size: 28rpx;color: #333;
}
</style>

说明：

使用 flex-wrap: wrap 实现换行。
每行 3 个，通过 justify-content: space-between 自动分配间距。
图标需提前准备在 static/icons/ 目录下。

十二、项目实战：带 tabBar 的多页面应用

12.1 目录结构

/pages/indexindex.vue/useruser.vue
/static/tabbarhome.pnghome-active.pnguser.pnguser-active.png
pages.json

12.2 pages.json（完整）

{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首页"}},{"path": "pages/user/user","style": {"navigationBarTitleText": "我的"}}],"globalStyle": {"navigationBarBackgroundColor": "#007AFF","navigationBarTextStyle": "white","backgroundColor": "#F5F5F5"},"tabBar": {"color": "#999","selectedColor": "#007AFF","backgroundColor": "#fff","borderStyle": "black","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "static/tabbar/home.png","selectedIconPath": "static/tabbar/home-active.png"},{"pagePath": "pages/user/user","text": "我的","iconPath": "static/tabbar/user.png","selectedIconPath": "static/tabbar/user-active.png"}]}
}

12.3 首页（index.vue）

<template><view class="page"><text class="title">欢迎来到首页！</text><button @click="goUser">跳转到“我的”页面（错误示范）</button></view>
</template><script>
export default {methods: {goUser() {// 错误：tabBar 页面不能用 navigateTo// 正确应使用底部 tab 切换// 若需编程跳转 tabBar 页面，用：uni.switchTab({ url: '/pages/user/user' });}}
}
</script><style>
.page {padding: 40rpx;
}
.title {font-size: 36rpx;color: #007AFF;
}
</style>