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


前言


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


一、实现原理


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


1. 本地存储: 使用 uni.setStorageSync 存储临时数据

2. 全局事件: 使用 uni.$emit 和 uni.$on 实现事件通信


二、代码实现


2.1 发送页面


handleQuickJump 函数


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>


接收逻辑


页面加载与事件监听


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>

三、技术要点


3.1 数据存储


1. 使用 uni.setStorageSync 存储临时数据

2. 获取后立即使用 uni.removeStorageSync 清理

3. 避免存储敏感信息


3.2 事件通信


1. 使用具体的事件名称(如 refresh_practice)

2. 在 onUnmounted 中清理事件监听

3. 处理事件监听可能的异常情况


3.3 错误处理


1. 使用 try-catch 捕获异常

2. 提供友好的错误提示

3. 记录错误日志便于调试


四、最佳实践


4.1 命名规范


1. 事件名称使用动词_名词格式

2. Storage key 使用下划线连接

3. 变量名使用驼峰命名


4.2 生命周期管理


1. 在 onLoad 中初始化数据

2. 在 onUnmounted 中清理资源

3. 避免在 onLoad 之外获取路由参数


4.3 性能优化


1. 及时清理临时存储

2. 避免重复的事件监听

3. 合理处理大量数据的场景


五、注意事项


1. 微信小程序页面栈最多10层

2. 跨页面通信可能存在时序问题

3. uni.switchTab 只能跳转到 tabBar 页面

4. 注意内存泄漏的防范


六、应用场景


1. 列表页到详情页的数据传递

2. 支付完成后的页面刷新

3. 用户操作后的状态同步

4. 全局消息通知


参考资料


1. UniApp 官方文档

2. Vue3 组合式 API

3. 微信小程序开发指南



关于作者

如果本文章对您有所帮助，欢迎交流和探讨技术问题。

QQ： 313801120

更多文章： www.xiyueta.com/

希望能一起成长，共同探索更多开发技巧！