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

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

直接传递一个对象时:

页面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);
    },
});
相关推荐
丁总学Java2 小时前
微信小程序-npm支持-如何使用npm包
前端·微信小程序·npm·node.js
工业互联网专业4 小时前
毕业设计选题:基于ssm+vue+uniapp的校园水电费管理小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
说私域7 小时前
社群团购中的用户黏性价值:以开源小程序多商户AI智能名片商城源码为例
人工智能·小程序
迷雾yx11 小时前
开发微信小程序 基础02
微信小程序·小程序
迷雾yx11 小时前
开发微信小程序 基础03
微信小程序·小程序
说私域12 小时前
地理定位营销与开源AI智能名片O2O商城小程序的融合与发展
人工智能·小程序
小雨cc5566ru1 天前
uniapp+Android面向网络学习的时间管理工具软件 微信小程序
android·微信小程序·uni-app
小雨cc5566ru1 天前
hbuilderx+uniapp+Android健身房管理系统 微信小程序z488g
android·微信小程序·uni-app
技术闲聊DD1 天前
小程序原生-利用setData()对不同类型的数据进行增删改
小程序
康康爹1 天前
uniapp 小程序,登录上传头像昵称页面处理步骤
小程序·uni-app