微信小程序怎么进行页面传参

微信小程序页面传参的方式有多种，每种方式都有其特定的使用场景和优势。以下是几种常见的页面传参方式，以及它们的具体使用方法和示例：

1. URL参数传值

   • 原理：通过在跳转链接中附加参数，在目标页面的onLoad函数中获取参数。

   • 示例：

     javascript复制代码

     |---|---------------------------------------------------------|
     | | // 源页面跳转 |
     | | wx.navigateTo({ |
     | | url: '/pages/targetPage/targetPage?name=John&age=30' |
     | | }) |
     | | |
     | | // 目标页面接收参数 |
     | | Page({ |
     | | onLoad: function(options) { |
     | | console.log(options.name); // 输出: John |
     | | console.log(options.age); // 输出: 30 |
     | | } |
     | | }) |

   • 特点：简单直接，适用于页面间简单的数据传递。

2. 全局变量

   • 原理：在app.js文件中定义全局变量，通过getApp().globalData在源页面设置和目标页面获取变量的值。

   • 示例：

     javascript复制代码

     |---|--------------------------------------------------------------------------|
     | | // app.js |
     | | App({ |
     | | globalData: { |
     | | userInfo: null |
     | | } |
     | | }) |
     | | |
     | | // 源页面设置全局变量 |
     | | const app = getApp(); |
     | | app.globalData.userInfo = { name: 'John', age: 30 }; |
     | | |
     | | // 目标页面获取全局变量 |
     | | const app = getApp(); |
     | | console.log(app.globalData.userInfo); // 输出: { name: 'John', age: 30 } |

   • 特点：适用于在整个应用中共享数据。

3. 缓存存储

   • 原理：使用wx.setStorageSync()在源页面设置存储的值，目标页面通过wx.getStorageSync()获取值。

   • 示例：

     javascript复制代码

     |---|--------------------------------------------------------------|
     | | // 源页面设置缓存 |
     | | wx.setStorageSync('userInfo', { name: 'John', age: 30 }); |
     | | |
     | | // 目标页面获取缓存 |
     | | let userInfo = wx.getStorageSync('userInfo'); |
     | | console.log(userInfo); // 输出: { name: 'John', age: 30 } |

   • 特点：数据持久化存储，适用于跨页面、跨会话的数据传递。

4. 路由传参
   • 原理：使用wx.navigateTo()传递参数，目标页面通过options参数获取传递的值。
   • 示例：与URL参数传值类似，但通常用于通过编程式导航传递参数。
5. 事件触发传参
   • 原理：通过事件绑定，在源页面触发事件传递需要的参数，目标页面通过事件对象获取传递的值。
   • 示例：通常在自定义组件间使用，通过触发自定义事件传递数据。
6. 组件传参
   • 原理：通过自定义组件的properties属性进行父子组件间的数据传递。
   • 示例：在自定义组件的properties中定义需要传递的属性，然后在父组件中设置该属性的值。
7. 使用通信通道（wx.navigateTo的特有功能）
   • 原理：通过wx.navigateTo打开的页面间可以通过wx.getCurrentPages()获取页面栈，并使用页面栈中的页面实例进行通信。
   • 示例：这通常用于实现页面间的复杂交互和数据传递。

总结 ：

微信小程序页面传参的方式多样，开发者可以根据实际需求选择合适的方式。简单直接的参数传递可以使用URL参数或路由传参；需要跨页面或持久化存储的数据可以使用全局变量或缓存存储；自定义组件间的数据传递可以使用组件传参；对于复杂的页面间交互，可以使用通信通道或其他高级功能。