微信小程序（路由传参）

微信小程序的路由系统和其他Web应用类似，主要通过页面路径和URL参数进行页面导航和数据传递。下面详细介绍微信小程序路由的基本使用方法和相关技巧。

1. 基本页面导航

1.1 配置页面路径

在微信小程序的 app.json 文件中，需要配置小程序的页面路径。这里定义了小程序中包含的所有页面路径。

{
  "pages": [
    "pages/index/index",
    "pages/detail/detail"
  ]
}

1.2 使用导航 API 跳转页面

微信小程序提供了多种导航 API，可以在页面之间进行跳转。

wx.navigateTo	保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回到原页面
wx.redirectTo	关闭当前页面，跳转到应用内的某个页面
wx.switchTab	跳转到指定的 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.reLaunch	关闭所有页面，打开到应用内的某个页面

 

 

例子：使用 wx.navigateTo 跳转页面

wx.navigateTo({
  url: '/pages/detail/detail?id=123&name=John'
});

2. URL 参数传递

2.1 传递参数

在跳转页面时，可以在 URL 中附加参数，例如上面的例子中，我们在 URL 中附加了 id 和 name 参数。

2.2 获取参数

在目标页面的 onLoad 方法中，可以通过 options 参数获取传递过来的参数：

Page({
  onLoad: function (options) {
    console.log(options.id);   // 输出 123
    console.log(options.name); // 输出 John
  }
});

3. 动态构建 URL 参数

有时需要传递动态生成的参数，可以通过字符串拼接或模板字符串来实现：

const id = 123;
const name = 'John';
wx.navigateTo({
  url: `/pages/detail/detail?id=${id}&name=${name}`
});

4. 复杂数据传递

如果需要传递复杂的数据（例如对象或数组），可以将数据转换为 JSON 字符串传递，并在目标页面进行解析。

4.1 传递 JSON 字符串

const data = {
  id: 123,
  name: 'John',
  items: [1, 2, 3]
};
wx.navigateTo({
  url: `/pages/detail/detail?data=${encodeURIComponent(JSON.stringify(data))}`
});

4.2 解析 JSON 字符串

在目标页面中，通过 decodeURIComponent 和 JSON.parse 解析数据：

Page({
  onLoad: function (options) {
    const data = JSON.parse(decodeURIComponent(options.data));
    console.log(data.id);   // 输出 123
    console.log(data.name); // 输出 John
    console.log(data.items);// 输出 [1, 2, 3]
  }
});

5. 使用全局数据或本地存储

当传递的数据过大或复杂时，URL 参数可能不是最佳选择。可以使用全局数据或本地存储。

5.1 使用全局数据

在 app.js 中定义全局数据：

App({
  globalData: {
    userInfo: null
  }
});

在页面中设置和获取全局数据：

// 设置全局数据
const app = getApp();
app.globalData.userInfo = {
  id: 123,
  name: 'John'
};

// 获取全局数据
Page({
  onLoad: function () {
    const app = getApp();
    const userInfo = app.globalData.userInfo;
    console.log(userInfo.id);   // 输出 123
    console.log(userInfo.name); // 输出 John
  }
});

5.2 使用本地存储

通过 wx.setStorageSync 和 wx.getStorageSync 来存储和获取数据：

// 设置本地存储
wx.setStorageSync('userInfo', {
  id: 123,
  name: 'John'
});

// 获取本地存储
Page({
  onLoad: function () {
    const userInfo = wx.getStorageSync('userInfo');
    console.log(userInfo.id);   // 输出 123
    console.log(userInfo.name); // 输出 John
  }
});