微信小程序页面之间三种传值方式

7

微信小程序页面之间三种传值方式

微信小程序页面之间传值方式有三种:URL传值、缓存传值和全局数据传值。下面我们将详细描述每种方法。

第一种:URL传值

在微信小程序中,URL传值是通过在跳转到另一个页面时,在 URL 中附加参数的方式来实现的。例如,我们有两个页面 A 和 B,A 页面需要传递一些数据给 B 页面。

A 页面部分 JS代码:

```javascriptPage({

toDetailPage: function(e) {

var zhi = "biubiubiu~~";

wx.navigateTo({

url: '/pages/detail/detail?zhi=' + encodeURIComponent(zhi)

});

}

});

```

在上面的代码中,我们定义了一个函数 `toDetailPage`,当用户点击某个按钮时会触发这个函数。这个函数内部使用 `wx.navigateTo` 方法跳转到另一个页面 `/pages/detail/detail`,并且在 URL 中附加一个参数 `zhi`,其值是我们定义的变量 `zhi` 的值。

B 页面可以通过以下方式获取传递过来的数据:

```javascriptPage({

onLoad: function(options) {

var zhi = options.zhi;

console.log(zhi); // 输出 "biubiubiu~~"

}

});

```

在 B 页面的 `onLoad` 生命周期函数中,我们可以通过 `options` 对象获取传递过来的数据。

第二种:缓存传值

微信小程序提供了一个缓存 API,允许我们将数据存储在本地缓存中。我们可以使用这个 API 将数据传递给另一个页面。

A 页面部分 JS代码:

```javascriptPage({

toDetailPage: function(e) {

var zhi = "biubiubiu~~";

wx.setStorageSync('zhi', zhi);

wx.navigateTo('/pages/detail/detail');

}

});

```

在上面的代码中,我们使用 `wx.setStorageSync` 方法将数据存储在本地缓存中,键为 `zhi`,值为我们定义的变量 `zhi` 的值。

B 页面可以通过以下方式获取传递过来的数据:

```javascriptPage({

onLoad: function() {

var zhi = wx.getStorageSync('zhi');

console.log(zhi); // 输出 "biubiubiu~~"

}

});

```

在 B 页面的 `onLoad` 生命周期函数中,我们可以通过 `wx.getStorageSync` 方法获取从 A 页面传递过来的数据。

第三种:全局数据传值

微信小程序提供了一个全局数据 API,允许我们将数据存储在全局缓存中。我们可以使用这个 API 将数据传递给另一个页面。

A 页面部分 JS代码:

```javascriptPage({

toDetailPage: function(e) {

var zhi = "biubiubiu~~";

wx.setStorageSync('zhi', zhi);

wx.navigateTo('/pages/detail/detail');

}

});

```

在上面的代码中,我们使用 `wx.setStorageSync` 方法将数据存储在全局缓存中,键为 `zhi`,值为我们定义的变量 `zhi` 的值。

B 页面可以通过以下方式获取传递过来的数据:

```javascriptPage({

onLoad: function() {

var zhi = getApp().globalData.zhi;

console.log(zhi); // 输出 "biubiubiu~~"

}

});

```

在 B 页面的 `onLoad` 生命周期函数中,我们可以通过 `getApp()` 方法获取全局数据,然后从 `globalData` 对象中获取传递过来的数据。

以上就是微信小程序页面之间三种传值方式的详细描述。每种方法都有其特点和使用场景,选择合适的方法可以帮助我们更好地实现业务需求。

小程序小程序传值

版权声明:除非特别标注,否则均为网络文章,侵权请联系站长删除。

上一篇 微信小程序之自定义轮播图实例 —— 微信小程序实战系列(3)

下一篇 2022年微信小程序源码130个分享