微信小程序 - 页面跳转并传递参数（使用路由参数、使用全局变量、使用本地存储、使用路由参数结合本地存储）

一、使用路由参数

PageA

js 复制代码

Page({
  jumpToPageB() {
    const data = {
      id: 10,
      name: "jack",
      content: "一些内容",
    };

    wx.navigateTo({
      url: `/pages/pageB/index?id=${data.id}&name=${data.name}&content=${encodeURIComponent(data.content)}`,
    });
  },
});

PageB

js 复制代码

Page({
  onLoad(options) {
    console.log("接收到的参数:", options);

    console.log("id:", options.id);
    console.log("name:", options.name);
    console.log("content:", decodeURIComponent(options.content));
  },
});

输出结果

接收到的参数: {id: "10", name: "jack", content: "%E4%B8%80%E4%BA%9B%E5%86%85%E5%AE%B9"}
id: 10
name: jack
content: 一些内容

二、使用全局变量

app.js

js 复制代码

App({
  globalData: {
    transferData: null,
  },
});

pageA

js 复制代码

const app = getApp();

Page({
  jumpToPageB() {
    const data = {
      id: 10,
      name: "jack",
      content: "一些内容",
    };

    app.globalData.transferData = data;

    wx.navigateTo({
      url: `/pages/pageB/index`,
    });
  },
});

PageB

js 复制代码

const app = getApp();

Page({
  onLoad() {
    console.log("接收到的参数:", app.globalData.transferData);
  },
});

输出结果

接收到的参数: {id: 10, name: "jack", content: "一些内容"}

三、使用本地存储

pageA

js 复制代码

Page({
  jumpToPageB() {
    const complexData = {
      id: 123,
      content: "这是一个复杂对象",
      list: [1, 2, 3, 4, 5],
    };

    wx.setStorageSync("transferData", complexData);

    wx.navigateTo({
      url: `/pages/pageB/index`,
    });
  },
});

PageB

js 复制代码

Page({
  onLoad() {
    console.log("接收到的参数:", wx.getStorageSync("transferData"));
  },
});

输出结果

接收到的参数: {id: 123, content: "这是一个复杂对象", list: Array(5)}

四、使用路由参数结合本地存储

pageA

js 复制代码

Page({
  jumpToPageB() {
    const complexData = {
      id: 123,
      userInfo: {
        name: "李四",
        age: 30,
      },
      extraInfo: "额外信息",
    };

    // 生成唯一标识符
    const transferId = "transfer_" + Date.now();

    wx.setStorageSync(transferId, complexData);

    // 只传递标识符
    wx.navigateTo({
      url: `/pages/pageB/index?transferId=${transferId}`,
    });
  },
});

pageB

js 复制代码

Page({
  onLoad(options) {
    const transferId = options.transferId;

    if (transferId) {
      // 通过标识符获取完整数据
      const data = wx.getStorageSync(transferId);
      console.log("获取的数据:", data);

      wx.removeStorageSync(transferId);
    }
  },
});

输出结果

获取的数据: {id: 123, userInfo: {...}, extraInfo: "额外信息"}