小程序 JS wx.navigateTo动态跳转带数据

Question

需求：将此url通过utl?url=xx传递到对应界面（不用写对应界面的代码，只需要传递部分的代码）
JS
这个是在Data：｛｝里的

这个是在跳转函数内的

ML

Answer 1

引自免费微信小程序：皆我百晓生

在微信小程序中，如果你想使用 wx.navigateTo 动态跳转至另一个页面并传递参数，你可以这样做：

// 首先，在当前页面的data中定义要传递的数据
Page({
  data: {
    urlData: {
      img1: 'your_img1_url',
      img2: 'your_img2_url',
      img3: 'your_img3_url',
    },
  },

  // 然后在某个事件触发时（例如tap事件）调用跳转函数，并将数据编码到目标页面路径的query参数里
  navigateToTargetPage: function() {
    const { img1, img2, img3 } = this.data.urlData;
    wx.navigateTo({
      url: `/pages/targetPage/index?url=${encodeURIComponent(JSON.stringify(this.data.urlData))}`,
    });
  },
});

在上述代码中：

1. 我们首先在 data 对象中定义了要传递的数据。
2. 然后我们创建了一个名为 navigateToTargetPage 的函数，当该函数被调用时会执行跳转操作。
3. 在 wx.navigateTo 方法中，我们将 urlData 对象转换为JSON字符串并通过 encodeURIComponent 进行URL编码，以确保它可以安全地作为查询参数传递。

然后，在目标页面（这里假设是 /pages/targetPage/index）中，你可以通过 options 参数获取传递过来的数据：

// 目标页面的js文件
Page({
  onLoad: function(options) {
    if (options.url) {
      try {
        const urlData = JSON.parse(decodeURIComponent(options.url));
        console.log('接收到的图片数据：', urlData);
        // 根据需要在这里对urlData进行处理，如赋值给页面的data或其他操作
      } catch (error) {
        console.error('解析传递数据时出错：', error);
      }
    }
  },
});

这段代码将在目标页面加载时运行，解码并解析从上一个页面传来的数据。