一、页面开发基础

1. 页面结构（.vue 文件）

每个页面是一个 .vue 单文件组件，包含三部分：

<template>
  <!-- 页面结构 -->
  <view class="container">
    <text>Hello UniApp</text>
  </view>
</template>

<script>
// 逻辑部分
export default {
  data() {
    return {
      message: '欢迎学习 UniApp'
    }
  }
}
</script>

<style>
/* 样式部分 */
.container {
  padding: 20rpx;
}
</style>

---

二、页面路由配置与跳转

1. 配置页面路径（pages.json）

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/list/list",
      "style": {
        "navigationBarTitleText": "列表页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "backgroundColor": "#F8F8F8"
  }
}

2. 页面跳转方式

✅ 方法一：使用 <navigator> 组件

<!-- 跳转到列表页 -->
<navigator url="/pages/list/list">
  <button>进入列表页</button>
</navigator>

<!-- 打开新页面（不返回） -->
<navigator url="/pages/detail/detail" open-type="redirect">
  <text>查看详情</text>
</navigator>

✅ 方法二：编程式导航（JS API）

// 跳转并保留返回栈
uni.navigateTo({
  url: '/pages/list/list?category=tech'
})

// 关闭当前页返回上一页
uni.navigateBack()

// 重定向（替换当前页面）
uni.redirectTo({
  url: '/pages/user/profile'
})

// 跳转到 tabBar 页面
uni.switchTab({
  url: '/pages/index/index'
})

💡 支持传递参数：url: '/path?name=jack&age=20'

---

三、数据绑定与渲染

1. 插值表达式 {{ }}

<template>
  <view>
    <text>{{ message }}</text>
    <text>计算结果：{{ 2 + 3 }}</text>
    <text>对象属性：{{ user.name }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World',
      user: { name: '张三' }
    }
  }
}
</script>

2. 属性绑定 v-bind 或 :

<image :src="logoUrl" mode="widthFix"></image>
<view :class="{ active: isActive }">动态类名</view>
<text :style="{ color: textColor }">动态样式</text>

3. 列表渲染 v-for

<view v-for="(item, index) in list" :key="index">
  {{ index }} - {{ item.title }}
</view>

data() {
  return {
    list: [
      { title: '新闻1' },
      { title: '新闻2' }
    ]
  }
}

4. 条件渲染 v-if / v-else / v-show

<!-- v-if：条件成立才渲染（更彻底） -->
<view v-if="isLoggedIn">欢迎回来！</view>
<view v-else>请登录</view>

<!-- v-show：通过 display 控制显示隐藏 -->
<view v-show="loading">加载中...</view>

---

四、事件处理

1. 事件绑定 @事件名="方法"

<button @click="handleClick">点击我</button>
<view @tap="onTap">触摸</view>
<input @input="onInput" placeholder="输入内容" />

2. 方法定义

export default {
  methods: {
    handleClick(event) {
      console.log('按钮被点击', event)
    },
    onTap() {
      uni.showToast({ title: '点击了区域' })
    },
    onInput(e) {
      console.log('输入内容：', e.detail.value)
    }
  }
}

3. 事件传参

<button @click="sayHello('Jack')">打招呼</button>
<view @click="deleteItem(index)" v-for="(item, index) in list" :key="index">
  {{ item.name }}
</view>

methods: {
  sayHello(name) {
    uni.showToast({ title: `你好，${name}` })
  },
  deleteItem(index) {
    this.list.splice(index, 1)
  }
}

---

五、内置组件使用

1. 基础组件

组件	说明
<view>	块级容器，类似 div
<text>	文本容器，支持长按选中
<image>	图片组件，必须设置 mode
<button>	按钮，支持 open-type（如获取用户信息）
<input>	输入框，监听 @input 事件

<view class="card">
  <image src="/static/logo.png" mode="aspectFit"></image>
  <text>应用名称</text>
  <input type="text" placeholder="请输入" @input="onInput" />
  <button @click="submit">提交</button>
</view>

---

2. 表单组件

组件	说明
<form>	表单容器，可监听 @submit
<picker>	选择器（时间、日期、多列等）
<switch>	开关选择器
<slider>	滑动选择器

<form @submit="onSubmit">
  <picker mode="date" @change="onDateChange">
    <view>选择日期：{{ date }}</view>
  </picker>

  <switch @change="onSwitchChange" /> 是否启用

  <slider @changing="onSlide" show-value /> 音量调节

  <button form-type="submit">提交表单</button>
</form>

data() {
  return { date: '' }
},
methods: {
  onDateChange(e) {
    this.date = e.detail.value
  },
  onSwitchChange(e) {
    console.log('开关状态：', e.detail.value)
  },
  onSlide(e) {
    console.log('滑动值：', e.detail.value)
  },
  onSubmit(e) {
    console.log('表单数据：', e.detail.value)
  }
}

---

3. 导航组件

✅ 配置 tabBar（底部导航）

在 pages.json 中配置：

{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tab/home.png",
        "selectedIconPath": "static/tab/home-active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "static/tab/user.png",
        "selectedIconPath": "static/tab/user-active.png"
      }
    ],
    "color": "#7A7E83",
    "selectedColor": "#007AFF",
    "backgroundColor": "#ffffff"
  }
}

✅ 自定义导航栏（navigationBar）

{
  "pages": [
    {
      "path": "pages/detail/detail",
      "style": {
        "navigationBarTitleText": "详情页",
        "navigationStyle": "custom"  // 隐藏原生导航栏
      }
    }
  ]
}

自定义后需自己实现返回按钮、标题栏等 UI。

---

六、样式与布局

1. rpx 单位与自适应布局

• rpx（responsive pixel）：小程序/UniApp 特有单位
• 规则：屏幕宽度 = 750rpx
• 换算：
  • iPhone6：1rpx ≈ 0.5px
  • 可自动适配不同屏幕

.container {
  width: 750rpx;     /* 全屏宽度 */
  padding: 20rpx;    /* 自适应间距 */
  font-size: 32rpx;  /* 文字大小 */
}

2. 全局样式 vs 局部样式

• 全局样式：uni.scss 或 app.vue 中的 <style>，影响所有页面
• 局部样式：每个 .vue 文件内的 <style>，仅作用于当前组件

/* uni.scss - 全局变量 */
$primary-color: #007AFF;
$text-color: #333;

<!-- pages/index/index.vue -->
<style>
/* 局部样式 */
.title {
  color: $primary-color; /* 可使用全局变量 */
  font-size: 36rpx;
}
</style>

---

3. 引入外部样式库（以 Tailwind CSS 为例）

✅ 步骤一：安装 Tailwind

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

✅ 步骤二：配置 tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{vue,js}",
    "./components/**/*.{vue,js}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

✅ 步骤三：创建样式文件 tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

✅ 步骤四：在 main.js 中引入

import './tailwind.css'

✅ 使用示例

<view class="flex items-center justify-between p-4 bg-white border-b">
  <text class="text-lg font-bold text-gray-800">标题栏</text>
  <button class="px-3 py-1 text-sm text-blue-600 bg-blue-50 rounded-full">
    按钮
  </button>
</view>

⚠️ 注意：部分 CSS 特性（如伪类）在小程序中受限，建议结合 @apply 使用。

---

总结

经过 2-3 周的学习，你应该已经掌握了：

✅ 页面结构与路由跳转
✅ 数据绑定与条件/列表渲染
✅ 事件处理与传参
✅ 常用内置组件使用
✅ tabBar 与导航栏配置
✅ rpx 布局与样式管理
✅ 引入外部 UI 库（如 Tailwind）