微信小程序中不同页面传递参数的操作方法

更新时间：2023年12月07日 12:05:32 作者：开心点啦.

这篇文章主要介绍了微信小程序中不同页面传递参数的操作方法,在开发项目中,避免不了不同页面之间传递数据等,那么就需要进行不同页面之间的一个数据传递的,需要的朋友可以参考下

直接传递一个对象时：

页面A

gotoDetail(e){
    const music = e.currentTarget.dataset.music;
    // 在小程序中，不同页面之间如何进行参数传递?
    // 既然不能传递对象，所以需要将对象进行类型转换
    // encodeURIComponent : 将内容转换为编码
    wx.navigateTo({
        url:
            "/pages/songDetail/songDetail?music=" + 
            encodeURIComponent(JSON.stringify(music)),
    });
},

页面B

Page({
    data:{},
    onLoad(options) {
        console.log( JSON.parse( decodeURIComponent( options.music ) ) );
    },
});

传递ID

但是通常情况下，我们并不会将对象进行一个传递，而是直接传递一个ID，并在页面B中重新请求

wxml

进行传递参数 id=“传递的值”来进行传递

data-* 自定义属性的设置但是在后端使用的时候*的内容会全部变成小写

<text
    wx:for={{recommendList}}
    wx:key="id"
    class="iconfont icon-gengduo"
    data-music="{{item}}"
    data-musicId="{{item.id}}"
    bindtap="gotoDetail"
></text>

页面A

gotoDetail(e){
    const musicId = e.currentTarget.dataset.musicid;
    wx.navigateTo({
        url:"/pages/songDetail/songDetail?musicId='' + musicId,
    });
},

页面B

Page({
    data: {},
    onLoad(options){
        console.log(options.musicId);
    },
});

到此这篇关于微信小程序中不同页面如何传递参数的文章就介绍到这了,更多相关微信小程序页面传递参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

jquery 实现输入邮箱时自动补全下拉提示功能
大家在做Web项目，都会有注册登录模块，如果是邮箱注册，想要在输入@后触发下拉框显示各个邮箱的功能。下面介绍一款jQuery实现输入邮箱的时候，可自动补全邮箱地址，也可称为是“输入提示”的功能，比如输入aaa时，自动变成aaa@163.com，有效提升网页的人性化体验
2015-10-10
JavaScript中Form表单技术汇总(推荐)
这篇文章主要介绍了JavaScript中Form表单技术的相关资料,包括简单的表单验证和正则表达式验证，非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
localStorage实现便签小程序
这篇文章主要为大家详细介绍了localStorage实现便签小程序的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
JavaScript实现阿拉伯数字和中文数字互相转换
JavaScript实现阿拉伯数字和中文数字互相转换可以用数组的循环检测后的替换来实现,下面主要讲解其中的一些核心算法:
2016-06-06
如何在CocosCreator中做一个List
这篇文章主要介绍了如何在CocosCreator中做一个List，对List列表感兴趣的同学，不妨来试验一下
2021-04-04
JavaScript深入浅出__proto__和prototype
这篇文章主要介绍了JavaScript深入浅出__proto__和prototype，文章基于JavaScript的相关资料展开详细的内容介绍。具有一定的参考价值，需要的小伙伴可以参考一下
2022-05-05
sessionStorage存储时多窗口之前能否进行状态共享解析
这篇文章主要为大家介绍了sessionStorage存储时多窗口之前能否进行状态共享解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
js 使用ajax设置和获取自定义header信息的方法小结
这篇文章主要介绍了js 使用ajax设置和获取自定义header信息的方法,结合实例形式总结分析了js 使用ajax自定义设置和获取header响应信息相关操作技巧与使用注意事项,需要的朋友可以参考下
2020-03-03
JavaScript必知必会(六) delete in instanceof
这篇文章主要介绍了JavaScript必知必会(六) delete in instanceof的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
JS获取鼠标坐标的实例方法
这篇文章介绍了JS获取鼠标坐标的实例方法，有需要的朋友可以参考一下
2013-07-07