从零开发校园墙微信小程序（3）——让页面活起来的魔法

前言：页面交互的"校园导航系统"

想象一下校园里的指示牌：箭头指引你去教学楼，公告栏展示重要通知。本章我们要搭建小程序的两大核心交互系统：

1. 🧭 路由系统——校园导航地图
2. 📢 通知系统——电子公告栏

一、路由系统搭建（校园导航指南）

1. 创建路由配置文件

// router/index.js
import Taro from '@tarojs/taro'

/**
 * 带返回按钮的跳转（像问路后去教学楼）
 * @param url 目标页面路径（无需写/pages/前缀）
 * @param options 额外参数（如携带校园卡信息）
 */
export const navigateTo = (url, options = {}) => {
  Taro.navigateTo({
    url: `/pages/${url}/index`,
    ...options
  })
}

/**
 * 关闭当前页跳转（像从食堂直接去图书馆不返回）
 * @param url 目标页面路径
 */
export const redirectTo = (url) => {
  Taro.redirectTo({
    url: `/pages/${url}/index`
  })
}

/**
 * 切换底部Tab（像校门/教学楼/宿舍区的快速通道）
 * @param url Tab页面路径
 */
export const switchTab = (url) => {
  Taro.switchTab({
    url: `/pages/${url}/index`
  })
}

2. 使用示例：菜单跳转

<!-- 在页面组件中 -->
<nut-grid-item 
  text="跳蚤市场"
  @click="navigateTo('shop')">
  <Shop3 />
</nut-grid-item>

导航类型对比表：

二、通知系统开发（校园广播站）

1. 创建可复用的通知组件

<!-- components/notify.vue -->
<template>
  <nut-notify
    :type="state.type"
    v-model:visible="state.show"
    :msg="state.desc"
    @closed="handleClose"
  />
</template>

<script setup>
import { reactive } from 'vue'

const state = reactive({
  show: false,
  type: 'primary',
  desc: ''
})

// 像广播站的操作面板
const methods = {
  showMessage(type, message) {
    state.show = true
    state.type = type
    state.desc = message
  },
  handleClose() {
    console.log('通知栏已关闭')
  }
}

// 暴露方法给其他组件使用
defineExpose({ notify: methods })
</script>

2. 在页面中使用通知

<script setup>
import { ref } from 'vue'
import notify from '@/components/notify.vue'

const notifyRef = ref(null)

// 登录成功时触发通知
const handleLogin = () => {
  notifyRef.value.notify.showMessage('success', '登录成功！')
}

// 错误处理示例
const fetchData = async () => {
  try {
    // ...请求逻辑
  } catch (error) {
    notifyRef.value.notify.showMessage('danger', '网络开小差啦～')
  }
}
</script>

<template>
  <notify ref="notifyRef" />
  <!-- 其他页面内容 -->
</template>

通知类型对照表：

三、系统联动实战（校园一日游）

场景：用户登录流程

1. 点击"个人中心"触发登录检查
2. 未登录则跳转到登录页（使用redirectTo）
3. 登录成功返回首页并显示通知

// 在个人中心页面
const checkLogin = () => {
  if (!isLoggedIn.value) {
    redirectTo('login') // 跳转登录页
  }
}

// 在登录页面 
const handleSubmit = async () => {
  try {
    await loginApi()
    notifyRef.value.notify.showMessage('success', '欢迎回来！')
    switchTab('home') // 切换回首页
  } catch (error) {
    notifyRef.value.notify.showMessage('danger', '账号密码错误')
  }
}

四、常见问题排雷

❓ 问题1：页面跳转报错页面不存在

✅ 检查清单：

1. 确认pages目录下存在对应页面文件夹
2. 检查路径是否包含/index后缀
3. 运行npm run dev:weapp重新编译

❓ 问题2：通知组件不显示

✅ 调试步骤：

1. 确认组件已注册并引入
2. 检查ref是否正确绑定
3. 使用Chrome调试工具查看组件状态

❓ 问题3：如何修改通知停留时间？

✅ 定制方案：

<nut-notify 
  :duration="2000" <!-- 2秒后自动消失 -->
  ...
/>

下一章预告：《数据流动的奥秘——状态管理》

你将学到：

1. 使用Pinia管理全局状态（如用户信息）
2. 实现课程数据的自动更新
3. 本地缓存策略设计
4. 页面间数据传递技巧

开发心法：
好的交互设计就像校园里的指示系统——用户无需思考就能到达目的地。在实现功能时，多问自己："这个提示够清晰吗？这个跳转符合直觉吗？"