微信小程序- wx.navigateTo页面跳转 传递参数

简介：

wx.navigateTo：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。关于wx.navigateTo的详细介绍，我们可以查看官方文档。今天我们这边主要讲一下关于使用wx.navigateTo跳转并传递参数的几种方法。

说明：此处，我们举例说明，假设我们需要从A页面携带参数跳转到B页面。携带的参数我们这里以数组类型为例

方式一

A页面：

WXML

<text>我是A页面</text>
<button bindtap="jumpToB">按钮</button>

JS

Page({
  data: {
    myName: "小莫",
    myAge: 3,
  },

  jumpToB() {
    const {
      myName,
      myAge
    } = this.data;
    const params = [
      myName,
      myAge
    ];
    const str = JSON.stringify(params);
    wx.navigateTo({
      url: '../B/B?jsonStr=' + str,
    })
  },
})

B页面：

WXML

<view>我是{{name}}</view>
<view>今年{{age}}岁啦</view>

JS

Page({
  data: {
    name: null,
    age: 0,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    let item = JSON.parse(options.jsonStr);
    console.log("传参", item);
    this.setData({
      ward: item
    });
    this.setData({
      name: item[0],
      age: item[1],
    });
  },
})

此时可以看到从A页面带的参数已经传到了B页面，此时，我们只需要把参数this.setData 就行了

---

方法二

A页面：

WXML

<text>我是A页面</text>
<button bindtap="jumpToB">按钮</button>

JS

Page({
  data: {
    myName: "小莫",
    myAge: 3,
  },

  jumpToB() {
    const {
      myName,
      myAge
    } = this.data;
    const params = `name=${myName}&age=${myAge}`;
    wx.navigateTo({
      url: `../B/B?${params}`,
    })
  },
})

B页面：

WXML

<view>我是{{name}}</view>
<view>今年{{age}}岁啦</view>

JS

Page({
  data: {
    name: null,
    age: 0,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    console.log("传参", options);
    this.setData({
      name: options.name,
      age: options.age,
    });
  },
})

此时可以看到从A页面带的参数已经传到了B页面，此时，我们只需要把参数this.setData 就行了

---

###