​微信小程序 页面间传递数据

news2024/12/22 13:41:46

在小程序中,给页面传递参数通常有以下几种方法:

  1. 通过URL传递参数
    在小程序中,可以在页面的路径后面添加参数,然后在页面的 onLoad 函数中获取这些参数。

    // 在app.json中配置页面路径
    "pages": [
      {
        "path": "pages/index/index",
        "style": {
          "navigationBarTitleText": "首页"
        }
      },
      {
        "path": "pages/detail/detail?id=123" // 这里的id就是传递的参数
      }
    ]
    
    // 在detail页面的js文件中获取参数
    Page({
      onLoad: function(options) {
        console.log(options.id); // 输出123
      }
    });
    
  2. 通过全局变量传递
    在小程序的 app 对象中设置全局变量,然后在需要的页面中获取。

    // 在app.js中设置全局变量
    App({
      onLaunch: function() {
        // 可以在这里设置全局变量
        this.globalData = {
          userInfo: null
        };
      },
     });
    
    // 在需要的页面中获取全局变量
    Page({
      onLoad: function() {
        const app = getApp();
        console.log(app.globalData.userInfo);
      }
    });
    
  3. 通过事件传递
    使用小程序的事件系统,可以在页面间传递数据。

    // 在发送事件的页面
    this.triggerEvent('customEvent', { data: '这里是传递的数据' });
    
    // 在接收事件的页面
    Page({
      onLoad: function() {
        this.on('customEvent', function(e) {
          console.log(e.detail.data); // 输出传递的数据
        });
      }
    });
    
  4. 通过wx.navigateTowx.redirectTo传递
    在跳转时,可以通过这些函数的第二个参数传递一个对象,对象中包含需要传递的数据。

    // 在当前页面中跳转到另一个页面,并传递参数
    wx.navigateTo({
      url: '/pages/detail/detail',
      events: {
        acceptData: function() {
          // 这里是发送数据的回调
        }
      },
      success: function(res) {
        res.eventChannel.emit('acceptData', { data: '这里是传递的数据' });
      }
    });
    
    // 在目标页面中接收数据
    Page({
      onLoad: function(options) {
        const eventChannel = this.getOpenerEventChannel();
        eventChannel.on('acceptData', function(data) {
          // data就是传递的数据
          console.log(data);
        });
      }
    });
    
  5. 使用wx.setStorageSyncwx.getStorageSync
    如果需要在页面间传递复杂的数据,可以使用小程序的本地存储。

    // 设置数据
    wx.setStorageSync('someKey', 'someValue');
    
    // 获取数据
    const value = wx.getStorageSync('someKey');
    

选择哪种方法取决于你的具体需求和场景。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2198143.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

火山引擎边缘智能亮相“地瓜机器人开发者大会”,推动端侧大模型应用与落地

9 月 20 日,2024 地瓜机器人开发者日暨新品发布在深圳科创学院南山总部成功举办,火山引擎边缘智能受邀出席此次会议。会议以“加速智能生长”为主题,发布了地瓜机器人新一代机器人开发者套件 RDK X5 ,同时,会议汇聚了中…

Puppeteer自动化:使用JavaScript定制PDF下载

引言 在现代的Web开发中,自动化已经成为提高效率和减少重复劳动的重要手段。Puppeteer 是一个强大的Node.js库,提供了对无头Chrome或Chromium的控制,可以用于生成网页快照、抓取数据、自动化测试等任务。其中,生成PDF文件是一个常…

【TOP K】leetcode 215.数组中第K个最大的元素

1 题目描述 题目链接:数组中第K个最大的元素 2 题目解析 首先区分 第K个最大的元素和 第K个不同的元素 考虑使用什么数据结构? 使用堆的数据结构,可以使用priority_queue,然后 建大堆,这样大的元素就在前面。接着…

爬虫案例——爬取腾讯社招

案例需求: 1.爬取腾讯社招的数据(搜索 | 腾讯招聘)包括岗位名称链接时间公司名称 2.爬取所有页(翻页) 3.利用jsonpath进行数据解析 4.保存数据:txt文本形式和excel文件两种形式 解析: 1.分…

9.16贪心算法

定义:贪心算法是一种逐步构建解决方案的算法,每次选择当前最优的局部解,期望通过局部最优解的累积,最终获得全局最优解​​​​​​典型例题: 1.找零问题--蓝桥云课 解决方案:先找大额,再找小额…

FreeRTOS学习笔记内置部分公司面试题目(更新中)

1. 简介 1.1 RTOS简介 RTOS(实时操作系统)是指一类系统,如 FreeRTOS,uC/OS,RTX,RT-Thread 等,都是 RTOS 类操作系统。 FreeRTOS 由美国的 Richard Barry 于 2003 年发布。 FreeRTOS 于 2017 年被亚马逊收购&#x…

【EXCEL数据处理】000022 案例 保姆级教程,附多个操作案例。EXCEL邮件合并工具

前言:哈喽,大家好,今天给大家分享一篇文章!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏关注哦 💕 目录 【EXCEL数据处理】000022 案例 保姆级教程,附多个操作案例。…

如何基于 RLHF 来优化 ChatGPT 类型的大语言模型

🚴前言 对于ChatGPT来说,RLHF是其训练的核心。所谓RLHF,即Reinforcement Learning with Human Feedback,基于人类反馈的强化学习。这项技术通过结合模型自身的生成能力和人类专家的反馈,为改进文本生成质量提供了新的…

云计算Openstack Horizon

OpenStack是一个开源的云计算平台,提供了构建和管理云计算环境所需的软件工具。而Horizon则是OpenStack的一个关键组件,它是基于Web的用户界面,为用户提供了一种直观、便捷的方式来管理和使用OpenStack资源。 一、技术原理 Horizon是一个基…

CloudStack计算节点配置

主机信息 CloudStack计算节点 任务1、计算节点基础环境准备 1)需要创建2张网卡!!!】 2)VMware Workstation 中设置网卡模式为NAT,在“网络编辑器”中设置DHCP,网关设置为192.168.100.1,地址段为192.168.…

【记录】PPT|PPT 箭头相交怎么跨过

众所周知,在PPT中实现“跨线”效果并非直接可行,这一功能仅存在于Visio中。然而,通过一些巧妙的方法,我们可以在PPT中模拟出类似的效果。怎么在PPT中画交叉但不重叠的线-百度经验中介绍了一种方法,而本文将介绍一种改进…

初探OceanBase 4.x单机环境下如何进行主备架构搭建

本文来自OceanBase 用户的体验分享 (以下简称 OB),已经开源了3年左右,其间从3.x版本演进至4.x版本,发生了许多变化。对一个DBer而言,最为关切的是如何高效运用OB,以及是否能实现如同应用MySQL般…

计算机毕业设计 基于Hadoop的智慧校园数据共享平台的设计与实现 Python毕业设计 Python毕业设计选题 Spark 大数据【附源码+安装调试】

博主介绍:✌从事软件开发10年之余,专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…

解析一体式IO与分布式IO:从架构到应用

在工业自动化领域,IO(输入/输出)系统扮演着举足轻重的角色。它们不仅负责数据的采集和控制指令的发送,还直接影响到系统的灵活性、可靠性和成本效益。明达技术将为您介绍一体式IO和分布式IO在架构及应用层的主要区别,帮…

Unity 从零开始的框架搭建1-1 unity中对象调用的三种方式的优缺点分析【干货】

该文章专栏是向QFrameWork作者凉鞋老师学习总结得来,吃水不忘打井人,不胜感激 Unity 框架搭建学习笔记1-1,前一个1代表凉鞋的第一季教程,后一个1代表该季第一篇我的文章 unity中对象调用的三种方式 方法调用,例如&…

计算机毕业设计 基于Python的智能停车系统的设计与实现 Python+Django+Vue 前后端分离 附源码 讲解 文档

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点…

对高危漏洞“Docker Engine API is accessible without authentication”的修复

一.背景 之前文章maven项目容器化运行之1-基于1Panel软件将docker镜像构建能力分享给局域网_1panel 构建镜像-CSDN博客将1Panel软件的Doocker端口给到了局域网,安全组兄弟扫描认为是高危漏洞,可能导致攻击者获取对Docker主机的完全控制权。 二.修复的建…

单兵可背负履带式全地形无人车技术详解

单兵可背负履带式全地形无人车是一种专为复杂环境和多样化任务设计的智能装备,具备出色的地面适应性、越野性能以及灵活的操控性。以下是对其技术的详细解析: 一、驱动技术 履带式驱动:采用履带式驱动技术,通过履带与地面的广泛…

动手学深度学习9.3. 深度循环神经网络-笔记练习(PyTorch)

本节课程地址:58 深层循环神经网络【动手学深度学习v2】_哔哩哔哩_bilibili 本节教材地址:9.3. 深度循环神经网络 — 动手学深度学习 2.0.0 documentation (d2l.ai) 本节开源代码:...>d2l-zh>pytorch>chapter_multilayer-perceptr…

计算机毕业设计 基于Flask+vue的博客系统的设计与实现 Python毕业设计 Python毕业设计选题 Flask框架 Vue【附源码+安装调试】

博主介绍:✌从事软件开发10年之余,专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…