微信小程序中进行参数传递的方法-CSDN博客

本文链接：https://blog.csdn.net/learning_tom/article/details/149814987

在微信小程序中，参数传递常用于页面间通信以及组件间交互，使得不同页面或组件能共享和使用相关数据。主要的参数传递场景包括页面跳转时传递参数以及组件间传递数据等。

一、页面跳转时传递参数

1. 声明式导航（通过navigator组件）传递参数

使用 <navigator> 组件进行页面跳转时，可以在 url 属性中通过查询字符串的形式添加参数，目标页面则可以在对应的生命周期函数中获取传递过来的参数。

示例：

// 当前页面的WXML中，跳转到目标页面并传递参数
<navigator url="/pages/detail/detail?id=1001&name=张三">跳转到详情页</navigator>

// 目标页面（detail.js）的onLoad生命周期函数中获取参数
Page({
  onLoad(options) {
    console.log(options.id); // 输出 1001
    console.log(options.name); // 输出 "张三"
  }
})

注意：参数名和参数值都需进行 URL 编码（小程序内部会自动处理一些常见的字符编码），如果参数值包含特殊字符（如空格、中文等），建议先手动进行编码处理（可使用JavaScript的 encodeURIComponent 函数），在目标页面获取后再进行解码（使用 decodeURIComponent 函数）。

2. 编程式导航（通过API调用）传递参数

使用如 wx.navigateTo、wx.redirectTo 等导航 API 进行页面跳转时，同样在 url 参数中添加查询字符串来传递参数。

示例：

// 当前页面的.js文件中，通过wx.navigateTo跳转到目标页面并传递参数
Page({
  goToDetail() {
    wx.navigateTo({
      url: '/pages/detail/detail?id=1002&age=20'
    });
  }
})

// 目标页面（detail.js）的onLoad生命周期函数中获取参数
Page({
  onLoad(options) {
    console.log(options.id); // 输出 1002
    console.log(options.age); // 输出 20
  }
})

二、组件间传递参数

1. 父组件向子组件传递参数（通过属性）

在自定义组件中，父组件可以通过属性的方式向子组件传递数据，子组件通过 properties 定义来接收这些属性。

示例：

// 父组件的WXML中使用子组件并传递参数
<my-component title="这是标题" count="5"></my-component>

// 子组件（my-component.js）中接收参数
Component({
  properties: {
    title: String, // 定义title属性接收父组件传递的字符串类型数据
    count: Number // 定义count属性接收父组件传递的数字类型数据
  }
})

子组件还可以对接收的属性进行类型验证、设置默认值以及添加属性值变化的观察者函数等，例如：

Component({
  properties: {
    title: {
      type: String,
      value: '默认标题',
      observer(newVal, oldVal) {
        console.log('title属性值发生了变化，旧值：', oldVal, '新值：', newVal);
      }
    }
  }
})

2. 子组件向父组件传递参数（通过事件触发）

子组件通过触发自定义事件，并携带数据，可以向父组件传递参数，父组件通过监听该自定义事件来接收数据。

示例：

// 子组件（my-component.js）中触发自定义事件并传递参数
Component({
  methods: {
    handleClick() {
      const data = { message: '这是子组件传递的数据' };
      this.triggerEvent('customEvent', data);
    }
  }
})

// 父组件的WXML中监听子组件的自定义事件
<my-component bind:customEvent="handleChildData"></my-component>

// 父组件（父组件.js）中处理接收到的数据
Page({
  handleChildData(e) {
    console.log(e.detail.message); // 输出 "这是子组件传递的数据"
  }
})

三、通过全局变量传递参数（简单但不推荐复杂场景）

可以在 app.js 中定义全局变量，然后在不同页面或组件中通过 getApp() 函数获取这个全局对象来访问和修改全局变量，以此实现数据共享（间接的参数传递）。

示例：

// app.js中定义全局变量
App({
  globalData: {
    userInfo: null
  }
})

// 在页面或组件中获取和修改全局变量
Page({
  onLoad() {
    const app = getApp();
    app.globalData.userInfo = { name: '李四' };
  }
})

不过这种方式在复杂应用中容易导致数据流向混乱、难以维护等问题，建议仅用于简单的全局数据共享场景，复杂场景优先考虑使用状态管理库（如mobx-miniprogram等）。

四、通过缓存传递参数（适合临时存储少量数据）

利用小程序提供的缓存 API（如 wx.setStorageSync 和 wx.getStorageSync），可以将数据临时存储在本地缓存中，然后在需要的页面或组件中获取使用，实现类似参数传递的效果。

示例：

// 在一个页面中存储数据到缓存
Page({
  saveData() {
    const data = { key: 'value' };
    wx.setStorageSync('tempData', data);
  }
})

// 在另一个页面中获取缓存中的数据
Page({
  onLoad() {
    const data = wx.getStorageSync('tempData');
    console.log(data.key); // 输出 "value"
  }
})

但要注意缓存有容量限制（目前一般为10MB左右），且需合理管理缓存数据的有效期和清理机制，避免数据冗余或过期数据占用空间等问题。