小程序页面跳转与参数传递

题目

小程序页面跳转与参数传递

信息

• 类型：问答
• 难度：⭐

考点

页面路由, 参数传递, 事件绑定

快速回答

在小程序中实现页面跳转并传递参数的主要步骤：

1. 使用 wx.navigateTo 或 wx.redirectTo API 进行页面跳转
2. 在 url 后拼接查询参数（格式：?key1=value1&key2=value2）
3. 在目标页面的 onLoad 生命周期函数中通过 options 参数获取数据

原理说明

小程序通过路由API管理页面栈，参数通过URL查询字符串传递，目标页面在加载时解析URL获取参数。这是小程序基础导航的核心机制。

代码示例

1. 页面跳转并传参（源页面）

// 在wxml中绑定事件
<button bindtap="navigateToDetail">查看详情</button>

// 在js文件中
Page({
  navigateToDetail() {
    const productId = 123
    wx.navigateTo({
      url: '/pages/detail/detail?id=' + productId + '&from=home'
    })
  }
})

2. 接收参数（目标页面）

// pages/detail/detail.js
Page({
  onLoad(options) {
    console.log('产品ID:', options.id)       // 输出：123
    console.log('来源页面:', options.from)   // 输出：home
    this.setData({ productId: options.id })
  }
})

最佳实践

• 优先使用 wx.navigateTo 保留当前页面（可返回）
• 参数值使用 encodeURIComponent 处理特殊字符：
  url: '/page?name=' + encodeURIComponent('A&B')
• 敏感数据避免通过URL传递，应使用全局变量或缓存

常见错误

• 路径错误：未在 app.json 的 pages 字段注册目标页面
• 参数类型错误：URL参数始终是字符串，数字需转换：
  const id = parseInt(options.id)
• 跳转API误用：
  - wx.navigateTo：保留页面栈（可返回）
  - wx.redirectTo：关闭当前页（不可返回）

扩展知识

• EventChannel：页面间通信（适合复杂数据）

  // 发起页面
  const eventChannel = this.getOpenerEventChannel()
  eventChannel.emit('acceptData', { data: 'test' })
  
  // 目标页面
  Page({
    onLoad() {
      const eventChannel = this.getOpenerEventChannel()
      eventChannel.on('acceptData', (data) => {
        console.log(data) // 输出：{ data: 'test' }
      })
    }
  })

• 路由限制：小程序最多维持10层页面栈