微信小程序常用的传值

1.通过 URL 传参

在页面跳转时,可以在 URL 中携带参数进行传递,然后在目标页面的 onLoad 生命周期中获取参数。

// 在页面 A 中跳转到页面 B 并传递参数
wx.navigateTo({url: '/pages/detail/index?id=123'
});// 在页面 B 的 onLoad 生命周期中获取参数
onLoad: function (options) {console.log(options.id); // 输出 123
}

2.通过 navigateTo 方法传递数据:

通过 navigateTo 方法传递数据的方式比较常见,可以通过 wx.setStorageSync 方法在当前页面设置数据,然后在目标页面的 onLoad 生命周期中使用 wx.getStorageSync 方法获取数据。以下是一个示例代码来演示这种传递数据的方式:

在页面 A 中设置数据并跳转到页面 B:

// 在页面 A 中设置数据
wx.setStorageSync('key', 'value');// 使用 navigateTo 方法跳转到页面 B
wx.navigateTo({url: '/pages/pageB/pageB'
});

在页面 B 的 onLoad 生命周期中获取数据:

Page({onLoad: function(options) {// 在页面 B 的 onLoad 生命周期中获取数据var data = wx.getStorageSync('key');console.log(data); // 输出 'value'}
});

3.通过全局变量传值

可以在 app.js 文件中定义全局变量,然后在任何页面中都可以访问和修改这些全局变量。

在 app.js 文件中定义全局变量:

// app.js
App({globalData: {userInfo: null}
});

在任意页面中访问和修改全局变量: 

// 在任意页面中访问和修改全局变量
// 设置全局变量
getApp().globalData.userInfo = { name: 'Alice', age: 30 };
// 获取全局变量
console.log(getApp().globalData.userInfo); // 输出 { name: 'Alice', age: 30 }

4.通过事件总线传值

可以使用事件总线进行页面间通信,创建一个事件总线实例,然后在需要传递数据的页面发送事件,在需要接收数据的页面监听事件。

1.创建一个事件总线实例:

// eventBus.js
const EventBus = {events: {},on: function(event, callback) {if (!this.events[event]) {this.events[event] = [];}this.events[event].push(callback);},emit: function(event, data) {if (this.events[event]) {this.events[event].forEach(callback => {callback(data);});}}
};module.exports = EventBus;

2.在发送数据的页面发送事件

// pageA.js
const eventBus = require('../../utils/eventBus');// 发送事件
eventBus.emit('dataUpdated', { name: 'Bob', age: 25 });

3.在接收数据的页面监听事件:

// pageB.js
const eventBus = require('../../utils/eventBus');Page({onLoad: function() {// 监听事件eventBus.on('dataUpdated', (data) => {console.log(data); // 输出 { name: 'Bob', age: 25 }});}
});

这些都是微信小程序中常用的页面间传值方式

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

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

相关文章

智能网络构建:探索大模型在网络领域的应用

网络领域以其高度复杂性和快速迭代为特点,完成从网络设计、配置、诊断到安全的网络任务需要广泛的专业知识。这些任务的固有复杂性,加上网络技术和协议不断变化的格局,为传统基于机器学习的方法带来了显著的障碍。这些方法在泛化和自动化网络…

Java学习 - Redis-Sentinel

主从复制存在的问题与解决 问题 发生故障时,需要手动进行故障转移写能力和存储能力受限 解决 redis官方推出redis-sentinel可以自动实现主从复制的故障恢复用于实现redis的高可用 redis-sentinel简介 sentinel是特殊的redis,不存储数据,支…

设计模式之【工厂模式、适配器模式】

工厂模式(Factory Pattern) 定义: 工厂模式是一种创建型设计模式,它提供了一个创建对象的接口,但由子类决定要实例化的类是哪一个。工厂方法使一个类的实例化延迟到其子类。 主要类型: 简单工厂模式&…

微信小程序根据蓝牙RSSI信号强度测试设备距离

背景 在做小程序连接蓝牙设备的时候,有需求表明在搜索到0.5米之内的设备时自动连接 问题: 蓝牙模组只提供了RSSI信号强度,那又该如何计算蓝牙设备距离小程序的距离呢? 解决方案 通过以下公式做大量测试:求 A、n 的平均…

​​Linux(CentOS)​​同步服务器时间之~​​chrony​​

Chrony 是一款开源的网络时间协议(NTP)客户端和服务端软件,旨在提供高精度的时间同步功能。相较于传统的 NTP 实现如 ntpd,Chrony 提供了一些改进和优势,包括更快的同步速度、低延迟、低CPU占用和低内存消耗。以下是 Chrony 的几个关键特性和…

DIY:在您的 PC 上本地使用 Stable Diffusion AI 模型生成图像

前言 随着DALL-E-2和Midjourney的发布,您可能听说过最近 AI 生成艺术的繁荣。这些人工智能模型如何在几秒钟内创造性地生成逼真的图像,这绝对是令人兴奋的。您可以在这里查看其中的一些:DALL-E-2 gallery和Midjourney gallery 但是这些模型…

js将阿拉伯数字转为中文数字(阿拉伯数字转为金额数字,包含大写中文数字)

在之前常用的金额数字的格式化方法 里边有金额数字的格式化,以及阿拉伯数字转为中文大写金额数字的方法,在一些使用中文小写数字的时候就不适用,这里将方法进行了扩展使用更加完善 代码直接放到下方,可以直接封装成一个numberToC…

【机器学习】自然语言处理的新前沿:GPT-4与Data Analysis

目录 1、生成二维码Prompt:请用二维码编码这个信息,我爱chatgpt2、分析PDFPrompt:请分析这篇pdf的主要内容,用中文输出分析结果,100字3、设计网站Prompt:请帮我设计一个网站,网站的主题是哪吒玩…

分享10个AI搞钱副业,门槛低,普通人也能学的会!易上手!

前言 本期给大家分享的是利用AI 做副业的一些方法,大家可以挑选适合自己的赛道去搞钱 现在是人工智能时代,利用好AI 工具,可以降低普通人做副业的门槛,同时也能提高工作效率, 因此AI 赚钱的副业还是挺多的&#xff0…

测量无人船作业流程是怎样的?

在一些特殊水域测量作业中,使用有人船进行测量时受阻较多,而采用无人测量船则效率就非常高了,它是解决复杂水域测量问题最直接最有效的方式。那么,测量无人船作业流程是怎样的?下面就让小编来为大家简单介绍一下&#…

代码随想录算法训练营Day52|647.回文子串、516.最长回文子序列

回文子串 647. 回文子串 - 力扣(LeetCode) 暴力解法 遍历字符串中的所有子串,并判断是否为回文串,若为回文串,则要返回的结果1,最后返回所要求的结果,神奇的事居然能过,虽然时间和…

Java SE入门及基础(57) Java常用API 日期时间

目录 日期时间 1. Date 类 常用方法 示例 思考: 2. SimpleDateFormat 类 常用方法 常用日期格式 示例 3. Calendar 类 常用静态字段 常用方法 示例 日期时间 1. Date 类 常用方法 public Date (); // 无参构造,表示计算机系统当前时间…

PFA样品瓶带氟树脂接头试剂瓶可定制接1/4英寸管300ml

PFA带接头试剂瓶,也称作特氟龙洗气瓶,材质有PFA(可溶性聚四氟乙烯)和FEP(聚全氟乙丙烯),市场上一般问的聚四氟乙洗气瓶就是PFA洗气瓶,造型上有是2个管子接入瓶内,长进短出,带有四氟滤球,管子尺寸…

手持小风扇哪个牌子比较好?五大热门手持小风扇品牌推荐

炎炎夏日,真的需要一款随身小风扇来拯救我们的高温困境!不过,市面上的选择太多了,真的让人眼花缭乱。今天,我就给大家快速推荐五款热门的手持小风扇,它们不仅轻便易携,而且各有特色。有的是风力…

根据个人情况选择院校和专业的10大建议收藏

选择院校和专业是一个重要的决定,需要综合考虑个人情况、兴趣、职业规划以及家庭背景等多方面因素。这个口诀提供了一个简单的框架,但每个人的情况都是独特的,最终的选择应该基于个人的全面考虑。 家里有钱,学校优先:…

下穿隧道结构安全该如何保证,检测跟自动化监测该如何抉择

隧道监测背景: 隧道所处的地下环境较为复杂,易受地质条件恶化、结构损伤、退化失稳以及自然灾害等因素影响,引发隧道拱顶开裂、边墙开裂、衬砌损坏、隧道渗漏水、围岩大变形等病害,从而导致隧道安全事故发生,尤其在长期…

Flat Ads:拥抱 CTV,品牌增长新动力

近年来,CTV(联网电视)在数字营销界正迅速崛起,成为最受青睐和增长迅猛的推广形式之一。 随着更多联网设备的普及,越来越多观众正在从传统电视快速转移到流媒体环境,对传统电视广告取而代之的便是 CTV 广告。据 eMarketer 数据显示,未来四年,CTV 市值将从今年的 250 亿美元增长到…

JupyterServer配置

1. 安装jupyter ​pip install jupyter -i https://pypi.tuna.tsinghua.edu.cn/simple --default-timeout1000 2. 生成配置 jupyter notebook --generate-config 3. 修改配置,设置密码 获取密码的方式:命令行输入python后,用以下方式获…

大疆车载的第一款油车智驾:上汽大众途观L Pro的智能辅助驾驶系统

引言 在自驾行业中,有一个低调但迅速崭露头角的选手——大疆车载。自2016年成立以来,大疆车载(现已更名为卓御)通过其先进的智能驾驶技术,逐渐在市场上赢得了声誉。此次,上汽大众途观L Pro成为大疆车载首款…