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

更新时间：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);
    },
});

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

您可能感兴趣的文章:

一文详解TypeScript中的内置数据类型
作为一门类型安全的编程语言，TypeScript 提供了多种内置数据类型，帮助我们更好地定义和操作数据，下面小编就来和大家详细聊聊这些数据类型的相关知识吧
2023-06-06
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
这篇文章主要介绍了JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法,结合实例形式分析了JavaScript观察者模式概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
2018-07-07
JSON.parse 解析字符串出错的解决方法
程序中很多数据是动态拼接而成的json数据，最近在用json的时候老是现JSON.parse错误
2010-07-07
Javascript中字符串replace方法的第二个参数探究
当我们要把一段字符串中的某些指定字符替换掉，第一时间想到的就是replace方法，他的用法很简单，W3school上讲的清晰易懂。网上有关replace的文章也有很多了，那么这篇这里主要聊聊它的第二个参数，下面来一起看看，注意阅读本文需要对replace方法有一定了解。
2016-12-12
开源的javascript项目Kissy介绍
本文向大家介绍了开源的javascript项目Kissy，是taobao UED小组推的一款js框架，我们来简单研究下，为什么taobao这么推崇他呢。
2014-11-11
JS实现上传图片实时预览功能
这篇文章主要介绍了JS实现上传图片实时预览功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-05-05
Webpack优化配置缩小文件搜索范围
这篇文章主要介绍了Webpack优化-缩小文件搜索范围的相关知识，文中较详细的给大家介绍了可以优化的途径,需要的朋友可以参考下
2017-12-12
js学习总结之DOM2兼容处理重复问题的解决方法
这篇文章主要为大家详细介绍了js学习总结之DOM2兼容处理重复问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
JavaScript的一些小技巧分享
这篇文章主要介绍了JavaScript的一些小技巧分享，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
2021-01-01
实例解析package.json和最常见的scripts字段
日常开发中，现在的前端开发已经被三大框架取代，其中最主流的不过vue和react，而开发这些项目的时候不得不接触package.json这个文件，可你真的了解这个文件吗？今天给大家聊聊package.json和最常见的scripts字段，感兴趣的朋友一起看看吧
2023-04-04