UniApp跨页面通信最佳实践 - 快速跳转与数据传递

xiyueta

已于 2025-02-24 20:57:09 修改

阅读量892

点赞数 9

CC 4.0 BY-SA版权

文章标签：前端 vue.js javascript uni-app vue

于 2025-02-24 20:55:33 首次发布

本文链接：https://blog.youkuaiyun.com/mydd3/article/details/145838211

UniApp跨页面通信最佳实践 - 快速跳转与数据传递

前言

在UniApp开发中,页面间通信是一个常见需求。本文将介绍如何通过本地存储(Storage)和全局事件(Event)实现页面间的数据传递和状态同步。

一、实现原理

本方案主要通过两种机制实现跨页面通信:

本地存储: 使用 uni.setStorageSync 存储临时数据
全局事件: 使用 uni.$emit 和 uni.$on 实现事件通信

二、代码实现

2.1 发送页面

handleQuickJump 函数

功能：实现快速跳转并传递练习配置ID。
步骤：
1. 检查ID是否存在，防止无效操作。
2. 使用 uni.setStorageSync 存储ID，以便在目标页面获取。
3. 使用 uni.switchTab 跳转到目标页面。
4. 在跳转成功后，使用 uni.$emit 触发全局事件 refresh_practice，通知目标页面刷新。
5. 处理跳转失败的情况，输出错误信息。

<template>
  <view class="container">    
    <text class="title" @tap="handleQuickJump(1)">练习1</text>
    <text class="title" @tap="handleQuickJump(2)">练习2</text>
  </view>
</template>

<script setup>
const handleQuickJump = (id) => {
  try {
    // 1. 参数校验
    if (!id) {
      uni.showToast({
        title: '练习配置ID不存在',
        icon: 'none'
      })
      return
    }
    
    // 2. 存储数据
    uni.setStorageSync('quick_practice_id', id)
    
    // 3. 页面跳转
    uni.switchTab({
      url: `/pages/list/index`,
      success: () => {
        // 4. 触发刷新事件
        uni.$emit('refresh_practice', id)
      },
      fail: (error) => {
        console.error('跳转失败:', error)
        uni.showToast({
          title: '跳转失败',
          icon: 'none'
        })
      }
    })
  } catch (error) {
    console.error('操作失败:', error)
    uni.showToast({
      title: '操作失败',
      icon: 'none'
    })
  }
}
</script>

接收逻辑

页面加载与事件监听

功能: 接收并处理传递的ID
步骤:
1. 定义响应式ID变量
2. 在 onLoad 中获取存储的ID
3. 监听全局刷新事件
4. 页面卸载时清理事件监听

案例:

<template>
  <view class="container">
    <text>当前练习ID: {{ id }}</text>
  </view>
</template>

<script setup>
import { ref, onUnmounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const id = ref('')

// 处理刷新事件
const handleRefresh = (newId) => {
  id.value = newId
  loadPracticeData()
}

onLoad(() => {
  // 1. 获取存储的ID
  const storedId = uni.getStorageSync('quick_practice_id')
  if (storedId) {
    id.value = storedId
    uni.removeStorageSync('quick_practice_id')
    loadPracticeData()
  }
  
  // 2. 监听刷新事件
  uni.$on('refresh_practice', handleRefresh)
})

// 3. 清理事件监听
onUnmounted(() => {
  uni.$off('refresh_practice', handleRefresh)
})

// 4. 加载数据
const loadPracticeData = () => {
  console.log('加载ID为', id.value, '的练习数据')
  // TODO: 实现数据加载逻辑
}
</script>