微信小程序携带参数的页面跳转

最新推荐文章于 2024-09-04 11:45:58 发布

原创

最新推荐文章于 2024-09-04 11:45:58 发布 · 3.6k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #微信小程序 #前端

本文介绍了在微信小程序中如何在页面跳转时携带参数，并在目标页面接收和处理这些参数。通过使用wx:for和bindtap绑定数据，结合wx.navigateTo进行跳转并拼接URL传递JSON.stringify处理后的参数。在目标页面，利用onLoad生命周期函数和JSON.parse将接收到的字符串参数转换回对象，然后用setData保存到data中进行后续操作。

日常我们在手机app购物的时候，点击app主页琳琅满目的商品，就会跳转到商品的具体页面。

无论我们点击哪个商品，跳转到商品具体页面的布局都是一样的，但页面内的数据不一样，比如说商品名称，图片等等不一样。这就是在点击商品的时候，在跳转到具体页面时候传递了参数，根据参数的不同，页面的数据也不一样。

所以我们现在简单讲一下在微信小程序里面，如何在跳转时候，携带参数。

wmxl部分

首先我们使用wx:for将js文件里面data里面的数据拿出来，循环遍历来渲染页面。

使用bindtap="gmJump"来给view添加点击事件，名称叫gmJump，这个函数就是写跳转功能的。

比如说手机淘宝app主页，瀑布流布局配合懒加载，在下滑的时候，渲染的商品数据量也在增加，渲染的数据是比较多的，怎么才能在点击一个商品的时候，在跳转时候只带这一个商品的数据进行跳转，而不是把所有商品数据都带着跳转呢。

我们使用data-num="{ {item}}"，将数据绑定在某个地方，至于是什么地方，我们接着看。

<view wx:for="{
  
  {dataArr}}" wx:key="index" data-num="{
  
  {item}}" bindtap="gmJump">
     //省略的dom结构，都是在根据数据渲染界面，所以省去。
</view>

跳转函数

绑定的数据

我们跳转函数gmJump中，我们写一个形参，叫e。我们打印一下e，看看里面有什么。

gmJump(e){//携带参数跳转
    console.log(e);
}

打印结果如下图，这个e是一个对象，就是元素的所有信息。我们将数据就是绑给了这个元素的信息上。

最低0.47元/天解锁文章