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

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

直接传递一个对象时:

页面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);
    },
});
相关推荐
Geek_Vison9 小时前
2026 跨端框架横评:FinClip、Taro、uni-app、Remax、mPaaS 五款工具技术+业务双维度测评
小程序·uni-app·taro·mpaas·小程序容器
kidding72311 小时前
高效备忘清单工具类小程序
前端·计算机网络·微信小程序·小程序
黄华SJ520it12 小时前
二二复制公排模式小程序开发全解析
小程序
维双云13 小时前
商城小程序在线收款怎么做:收款链路、订单流转和后台处理怎么接
小程序
Geek_Vison13 小时前
APP集成了50多个小程序后,如何搭建一个小程序管理平台来管理这些小程序~
小程序·uni-app·apache·mpaas·小程序容器
万岳科技系统开发14 小时前
教育培训小程序搭建中的AI题库功能解析
人工智能·小程序
前端 贾公子14 小时前
小程序蓝牙打印探索与实践 (最终章)
前端·微信小程序·小程序
小羊Yveesss16 小时前
2026年个人能做微信小程序吗?
微信小程序·小程序
kidding72316 小时前
BMI 健康测量仪工具类小程序
前端·微信小程序·小程序
云迈科技-软件定制开发16 小时前
智慧物业小程序完整技术功能清单(业主端+管理后台+硬件联动|可直接落地)
小程序