微信小程序页面传参技巧：使用路由带参方式，通过在URL中添加参数传递数据，实现页面间通信；同时可利用全局变量或本地存储进行跨页面数据共享。

微信小程序页面传递参数的技巧指南

简介

微信小程序中，页面间的参数传递是常见的需求，无论是用户信息、数据状态还是简单的标识，正确地传递参数可以使得小程序运行更加流畅和智能，本指南将介绍几种简单易懂的传参技巧，帮助你高效地在小程序中传递参数。

准备工作

在开始之前，确保已经具备以下条件：

1、拥有微信开发者工具。

2、熟悉小程序的基本组件和生命周期函数。

3、了解小程序的页面结构。

传参方式详解

1. 使用导航条传递参数

小程序的导航条（navigationBar）可以用来传递简单的参数，通过在 app.json 或页面配置文件中设置导航条的按钮，可以实现页面跳转并携带参数。

示例代码

在 app.json 中配置导航条：

"navigationBar": {
  "custom": false,
  "backgroundColor": "#ffffff",
  "selectedColor": "#000000",
  "list": [{
    "pagePath": "pages/index/index",
    "text": "首页",
    "iconPath": "resources/home.png",
    "selectedIconPath": "resources/homeactive.png",
    "params": {
      "param1": "value1",
      "param2": "value2"
    }
  }]
}

在目标页面的 onLoad 方法中获取参数：

Page({
  onLoad: function (options) {
    console.log(options.param1); // value1
    console.log(options.param2); // value2
  }
});

2. 使用路由传递参数

通过在页面链接中添加查询参数（query parameters），可以将参数传递给目标页面。

示例代码

在源页面中设置链接：

<navigator url="/pages/target/target?param1=value1&param2=value2">跳转到目标页面</navigator>

在目标页面的 onLoad 方法中获取参数：

Page({
  onLoad: function (options) {
    console.log(options.param1); // value1
    console.log(options.param2); // value2
  }
});

3. 使用全局变量传递参数

通过在小程序的全局对象中存储参数，可以在不同页面间共享参数。

示例代码

在源页面中设置全局变量：

getApp().globalData.param1 = 'value1';
getApp().globalData.param2 = 'value2';

在目标页面中获取全局变量：

Page({
  onLoad: function () {
    console.log(getApp().globalData.param1); // value1
    console.log(getApp().globalData.param2); // value2
  }
});

4. 使用事件传递参数

通过触发自定义事件，并在事件的回调函数中传递参数，可以实现页面间的参数传递。

示例代码

在源页面中触发事件：

this.triggerEvent('myEvent', {param1: 'value1', param2: 'value2'});

在目标页面中监听事件：

Page({
  onLoad: function () {
    this.on('myEvent', (data) => {
      console.log(data.param1); // value1
      console.log(data.param2); // value2
    });
  }
});

归纳