微信小程序开发,实现跳转传值

1. 前言导读

我们在小程序开发过程中,列表跳跳转传值无处不在,今天教大家跳转传值的两种形式:

1. 传递单一参数

2. 传递对象在实际开发中建议使用这种方式

2. 传递单一参数实现步骤

  1. 官方自定义格式:data-xx

在这里插入图片描述

  1. button点击获取参数
 var id  =event.currentTarget.dataset.postid;

在现代 JavaScript 开发中,推荐使用 let 和 const 来代替 var,以避免由于 var 的函数作用域和提升机制所带来的潜在问题

  1. button点击传跳转传递数据

在这里插入图片描述

  1. 在pages-detail 生命周期onLoad()中下获取传递数据
  onLoad(event) {
    let id= event.currentTarget.dataset.id
    console.log(id)
  },

温馨提示

  1. 在使用data-xx的时候,一律小写命名如:data-currentindex ,不要写成data-currentIndex ,因为无论你大写还是小写,调用event.currentTarget.dataset.xxx取值的时候系统一律转成小写,本人在这里被坑过很久,可以用 console.log(event) 打印看看数据

3. 传递对象

传递对象在实际开发过程中很常见,如一个商品列表,跳转到商品详情,此时就建议传递对象,而不是传递一个个参数,因为详情页显示的字段比较多,一个个参数传递,代码显的很臃肿,如果有一天产品要求加字段,两头改,不便维护

在这里插入图片描述

  1. 先通过JSON.stringify(xxxx)将item转json
//将item转json
let str =JSON.stringify(event.currentTarget.dataset.item);
  1. button点击跳转传递参数

在这里插入图片描述

  1. 然后在详情页通过JSON.parse(xxxxx)将json转对象
//再将json转对象
let item =JSON.parse(options.JsonStr);
  1. 在生命周期onLoad()函数中,获取传递数据

在这里插入图片描述

4. 总结

在实际开发过程中,没有特殊的情况,建议传递对象,页面之间跳转传递参数无处不在,大多数情况下传递的数据字段都不会少,所以建议传递对象

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
微信小程序中,可以通过以下方式实现不同变量之间的传值: 1. 使用全局变量 在app.js中定义一个全局变量,然后在不同的页面中使用getApp()方法获取该变量并进行修改。 示例代码: app.js ```javascript App({ globalData: { name: '小明' } }) ``` page1.js ```javascript const app = getApp() Page({ data: { age: 18 }, onLoad: function () { app.globalData.name = '小红' } }) ``` page2.js ```javascript const app = getApp() Page({ onLoad: function () { console.log(app.globalData.name) // 输出小红 } }) ``` 2. 使用页面间传参 通过wx.navigateTo或wx.redirectTo方法跳转页面时,可以在url后面添加参数进行传递。在跳转的页面中可以通过options获取传递过来的参数。 示例代码: page1.js ```javascript wx.navigateTo({ url: '/pages/page2/page2?name=小明&age=18' }) ``` page2.js ```javascript Page({ onLoad: function (options) { console.log(options.name) // 输出小明 console.log(options.age) // 输出18 } }) ``` 3. 使用事件传参 在微信小程序中,可以使用事件传参的方式将数据从子组件传递到父组件。 示例代码: child.js ```javascript Component({ methods: { handleTap: function () { this.triggerEvent('myevent', { name: '小明', age: 18 }) } } }) ``` parent.js ```javascript Page({ handleEvent: function (e) { console.log(e.detail.name) // 输出小明 console.log(e.detail.age) // 输出18 } }) ``` parent.wxml ```html <child bind:myevent="handleEvent"></child> ``` 以上三种方式都可以实现不同变量之间的传值,具体选择哪种方式取决于实际需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

浩宇软件开发

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值