微信小程序中 不同页面如何传递参数

在开发项目中,避免不了不同页面之间传递数据等,那么就需要进行不同页面之间的一个数据传递

直接传递一个对象时:

页面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);
    },
});
相关推荐
咖啡の猫10 小时前
微信小程序WXSS 模板样式
微信小程序·小程序
AALoveTouch16 小时前
分享演唱会攻略-抢票利器
小程序·自动化
万岳科技系统开发17 小时前
开源上门预约系统源码,如何实现智能排班与时间冲突校验?
小程序·开源
说私域17 小时前
基于定制开发AI智能名片商城小程序的运营创新与资金效率提升研究
大数据·人工智能·小程序
qq_124987075319 小时前
基于微信小程序的宠物寄领养系统(源码+论文+部署+安装)
java·spring boot·后端·微信小程序·小程序·宠物·计算机毕业设计
咖啡の猫20 小时前
微信小程序页面配置
微信小程序·小程序·notepad++
2501_9160088920 小时前
iOS开发APP上架全流程解析:从开发到App Store的完整指南
android·ios·小程序·https·uni-app·iphone·webview
计算机毕设指导621 小时前
基于微信小程序技术校园拼车系统【源码文末联系】
java·spring boot·mysql·微信小程序·小程序·tomcat·maven
计算机毕设指导621 小时前
基于微信小程序求职招聘-兼职管理系统【源码文末联系】
java·spring boot·微信小程序·小程序·tomcat·maven·求职招聘
咖啡の猫21 小时前
微信小程序全局配置
微信小程序·小程序