【uniapp微信小程序】uniapp微信小程序——页面通信

uniapp微信小程序——页面通信

在开发微信小程序过程中,页面之间的通信是一个常见需求。在使用 uniapp 开发微信小程序时,我们可以采用多种方式实现页面之间的数据传递和状态共享。本文将详细介绍几种常见的实现方式,以供开发者参考。

1. 页面跳转携带参数

最常见的方法是在进行页面跳转时,通过调用 navigateTo, redirectToswitchTab 等 API 携带参数到新页面。

。例如:

// 当前页面的跳转
uni.navigateTo({url: 'detail?id=10003&name=wm',success: (res) => {// 跳转成功}
});

在目标页面的 onLoad 函数中接收这些参数:

// 目标页面的onLoad函数
onLoad: function(options) {console.log(options.id); // 输出 10003console.log(options.name); // 输出 wm
};

2. 全局事件通信

我们可以通过 uni.$emituni.$on 实现全局的消息订阅与发布,从而达到页面间通信的目的。

// 发送消息的页面
uni.$emit('update-status', { status: 'success' });
// 接收消息的页面
this.$on('update-status', (data) => {console.log(data.status); // 输出 success
});

3. 全局存储

利用微信小程序的全局存储功能,通过 uni.setStorageuni.getStorage 可以在不同页面之间共享数据。

// 存储数据
uni.setStorage({key: 'key',data: 'value',success: (res) => {// 数据存储成功}
});
// 获取数据
uni.getStorage({key: 'key',success: (res) => {console.log(res.data); // 输出 value}
});

4. 返回到上一页面并携带数据

在某些情况下,我们需要在用户操作之后返回上一页面并带回数据。这时可以通过 navigateBack 传递参数。

// 在当前页面,设置并返回上一页
var pages = getCurrentPages(); // 获取页面栈
var prevPage = pages[pages.length - 2]; // 上一个页面
prevPage.setData({myData: 'some data'
});
uni.navigateBack({delta: 1
});

在返回页面中,通过 onShow 或其他生命周期函数获取并使用这个数据。

// 在上一个页面
onShow: function() {console.log(this.data.myData); // 输出 some data
};

5. 使用 Vuex 状态管理

如果项目较大且状态管理复杂,可以使用 Vuex 来管理应用的全局状态,这样不仅能管理页面间的数据传递,还能更好地维护和更新数据。

// store.js
const store = new Vuex.Store({state: {myData: ''},mutations: {setMyData(state, payload) {state.myData = payload;}}
});// 页面A - 设置数据
this.$store.commit('setMyData', 'some data');// 页面B - 获取数据
console.log(this.$store.state.myData); // 输出 some data

6. 使用 Provide / Inject (仅在 vue3 中可用)

在 Vue 3 组合式 API 下,可以通过 provideinject 实现祖先组件与后代组件之间的数据共享。

// 父组件
import { provide } from 'vue';
provide('sharedData', 'some data');// 子组件
import { inject } from 'vue';
const sharedData = inject('sharedData');
console.log(sharedData); // 输出 some data

7. 自定义事件总线

在 uniapp 应用中创建一个专门用于管理页面之间事件通信的事件总线。这种方式在逻辑复杂、需要频繁通信的情况下非常实用。

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();// 页面A 发送事件
import { EventBus } from './eventBus';
EventBus.$emit('my-event', 'some data');// 页面B 监听事件
import { EventBus } from './eventBus';
EventBus.$on('my-event', (data) => {console.log(data); // 输出 some data
});

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

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

相关文章

谷歌内置AI部署

感谢阅读 准备工作开启功能查看下载情况安装插件效果截图网页版地址(需进行前面的所有步骤) 准备工作 点我下载谷歌dev版本 注意这个版本不需要卸载之前版本 开启功能 使用下载的浏览器依次导航到下面两个地方,然后点击enablebypass以及en…

自动优化:SQL Server数据库自动收缩配置指南

自动优化:SQL Server数据库自动收缩配置指南 在数据库管理中,随着数据的增删,数据库文件的大小会不断变化,导致空间浪费和性能下降。SQL Server提供了自动收缩功能,帮助数据库文件保持最佳状态。本文将深入探讨如何在…

2025最新付费进群系统源码 修复版

2025最新付费进群系统 修复一堆bug 修复分销无法添加 易支付只能在文件里更改等等问题 源码下载:https://download.csdn.net/download/m0_66047725/89515782 更多资源下载:关注我。

【结构型模式-代理模式】

概述 由于某些原因需要给某对象提供一个代理以控制该对象的访问。这时,访问对象不适合或者不能直接引用目标对象,代理对象作为访问对象与目标对象之间的中介。 Java中的代理按照代理类生成时机不同又分为静态代理和动态代理。静态代理代理类在编译期就生…

情感分析新纪元:Transformer模型的革命性应用

情感分析新纪元:Transformer模型的革命性应用 情感分析,又称为意见挖掘,是自然语言处理(NLP)领域中的一项重要任务,它旨在从文本数据中识别和提取主观信息,判断文本所表达的情感倾向&#xff0…

MACOS查看硬盘读写量

一、安装Homebrew 按照提示进行安装 /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"二、安装smartmontools brew install smartmontools三、查看硬盘读写量等信息 sudo smartctl -a /dev/disk0

WPF 制作一个文字漂浮提示框

WPF好像没有自带的文字提示漂浮&#xff0c;我们可以定制一个。 效果如下&#xff1a; xaml xaml如下&#xff1a; <Window x:Class"GroupServer.MsgTip"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://sc…

谷粒商城学习笔记-23-分布式组件-SpringCloud Alibaba-Nacos配置中心-简单示例

之前已经学习了使用Nacos作为注册中心&#xff0c;这一节学习Nacos另外一个核心功能&#xff1a;配置中心。 一&#xff0c;Nacos配置中心简介 Nacos是一个易于使用的平台&#xff0c;用于动态服务发现和配置管理。作为配置中心&#xff0c;Nacos提供了以下核心功能和优势&am…

微软推出全新的学习网站 Microsoft Learn

微软官方宣布推出全新的学习网站 Microsoft Learn&#xff0c;供开发人员学习 Microsoft 技术。 该网站包含所有 Microsoft 产品和服务(从 HoloLens 到 Azure)的技术文档。提供了超过 80 小时的学习内容&#xff0c;涉及 Azure、Dynamics 365、PowerApps、Microsoft Flow 和 Po…

VSTO插件功能介绍-清除空行【进化过程】

大家看到的是完成的成果&#xff0c; 可能不知在其中&#xff0c;写码人的艰辛 今天的主要是记录【进化过程】 用于自勉&#xff0c;与大家共勉&#xff0c;努力 文章中的代码你可复制使用哦 想要的效果若用户选择了区域&#xff0c;选择确定Button对此区域&#xff0c;进行清除…

代码随想录算法训练营Day64|拓扑排序(卡码网117)、dijkstra朴素版

拓扑排序 117. 软件构建 (kamacoder.com) 拓扑排序简单的说是将一个有向图转为线性的排序。 它将图中的所有结点排序成一个线性序列&#xff0c;使得对于任何的边uv&#xff0c;结点u在序列中都出现在结点v之前&#xff0c;这样的序列满足图中所有的前驱-后继关系。 拓扑排…

vue 插槽 【slot】

文章目录 默认插槽具名插槽作用域插槽 默认插槽 父组件中&#xff1a;<Category title"今日热门游戏"><ul><li v-for"g in games" :key"g.id">{{ g.name }}</li></ul></Category> 子组件中&#xff1a;<…

9. 机器人数目

题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 少年宫新近邮购了小机器人配件&#xff0c;共有3类。 &#x1d434;A 类含有&#xff1a;88 个轮子&#xff0c;11 个传感器&#xff1b; &#x1d435;B 类含有:…

深入理解基本数据结构:栈详解

引言 在计算机科学中&#xff0c;数据结构是存储、组织和管理数据的方式。栈是一种重要的线性数据结构&#xff0c;广泛应用于各种编程场景。在这篇博客中&#xff0c;我们将详细探讨栈的定义、特点、操作及其在不同编程语言中的实现。 什么是栈&#xff1f; **栈&#xff08…

java动态代理的使用和代码示例

文章目录 1. 简介2. 代码3. 参考链接 1. 简介 代理类在程序运行时创建的代理方式被成为动态代理。在静态代理中&#xff0c;代理类&#xff08;RenterProxy&#xff09;是自己已经定义好了的&#xff0c;在程序运行之前就已经编译完成。而动态代理是在运行时根据我们在Java代码…

前端vue 实现取色板 的选择

大概就是这样的 一般的web端框架 都有自带的 的 比如 ant-design t-design 等 前端框架 都是带有这个的 如果遇到没有的我们可以自己尝试开发一下 简单 的 肯定比不上人家的 但是能用 能看 说的过去 我直接上代码了 其实这个取色板 就是一个input type 是color 的input …

CTF学习记录(一)——Web基础

目录 Web基础Web基础常用工具ncat(网络工具中的瑞士军刀&#xff0c;功能齐全)curl(一个工作在命令行的发起HTTP请求的工具)BurpSuite(Web核心抓包工具)Hackbar插件SwitchyOmega 代理插件&#xff08;非常牛逼&#xff09;Wappalyzer 技术判断插件EditThisCookie 插件Postman 接…

深入理解Spring Boot中的定时任务调度

深入理解Spring Boot中的定时任务调度 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 1. Spring Boot中的定时任务概述 在现代应用程序开发中&#xff0c;定时任务调度是一项非常常见和重要的功能…

【计算机网络03】不花钱怎么搭建一个网络实验室

使用GNS3和虚拟机搭建网络实验室 1、安装抓包工具分析数据包2、定义和使用抓包筛选器3、安装和配置GNS34、配置路由器和VPCS5、使用WireShark捕获GNS3网络数据包6、VMware创建虚拟机7、使用思科PacketTracer 1、安装抓包工具分析数据包 官网安装wireshark&#xff1a;https://…

python怎么判断字符串以什么结尾

在python编辑器中新建一个data.py。 写上自己的注释。 然后新建一个变量testname。 利用endswith来判断字符串是不是以“ar”结尾。 将结果打印出来。 选择“run”->“run”。 运行该程序&#xff0c;如果是&#xff0c;就会返回true。