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

uni-app 基础知识详解

一、pages.json 配置文件

1.1 作用

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

1.2 基本结构

json 复制代码

{
  "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

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

json 复制代码

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

2.2 pages 中的 style

覆盖 globalStyle 的特定页面样式。

json 复制代码

{
  "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 配置示例

json 复制代码

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

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

五、资源引用

5.1 静态资源

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

5.2 动态资源（需 require）

html 复制代码

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

js 复制代码

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

六、页面样式 & 尺寸单位

6.1 尺寸单位

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

6.2 样式写法

vue 复制代码

<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（容器）

vue 复制代码

<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（文本）

vue 复制代码

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

7.3 navigator（页面跳转）

vue 复制代码

<!-- 跳转到 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（图片）

vue 复制代码

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

八、属性绑定和事件绑定

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

vue 复制代码

<template>
  <view :class="isActive ? 'active' : 'inactive'">
    {{ message }}
  </view>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      message: "动态文本"
    }
  }
}
</script>

8.2 事件绑定（@）

vue 复制代码

<button @click="handleClick">点击</button>
<view @tap="handleTap">轻触</view>

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

九、v-for 渲染数据

9.1 基本用法

vue 复制代码

<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 案例：水平三等分布局

vue 复制代码

<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 代码实现

vue 复制代码

<!-- 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
  /index
    index.vue
  /user
    user.vue
/static
  /tabbar
    home.png
    home-active.png
    user.png
    user-active.png
pages.json

12.2 pages.json（完整）

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）

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>

总结

本章涵盖了 uni-app 开发的核心基础知识：

全局配置（pages.json）
页面与 tabBar 管理
资源引用与样式单位
常用组件与数据绑定
Flex 布局实战
综合九宫格与多页面项目

掌握这些内容，即可构建完整的 uni-app 应用界面。后续可结合 API（如网络请求、存储）实现完整功能。