小程序页面之间数据传递的四种方法

news2025/1/22 19:33:55

近期再使用小程序开发的时候遇到小程序页面和页面之间的数据传递问题。总结一下大致有以下几种方式实现页面数据传递。

最常见的就是路由传参,使用场景主要是页面汇总的少量数据的传递。以下都以Taro+vue示例,原生、react或者uniapp同理,替换以下关键字Taro即可

注意:以下的几种方式会把参数string化,例如: true -> ‘true’; 1 -> ‘1’

1. 少量数据传递

例如: 从A页面->B页面
使用页面跳转navigateBack 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。

参数: 隔开,=相连
官方文档
在这里插入图片描述
A页面

  wx.navigateTo({
  	url: 'test?id=1'
  })

B页面

import { useDidShow, useRouter } from "@tarojs/taro"

// 在 show生命周期中获取
useDidShow(() => {
    const router: any = useRouter();
    const data = router.params ?? {}; // 取router里面的params 
});

这种适用于数据量少的情况,也不建议复杂或者数据量打的时候使用该方法(个人建议而已-.-)

2. 数据量大或者相对复杂的数据传递

从A页面->B页面,适用于页面跳转数据量较多或者复杂的数据时
A页面

Taro.navigateTo({
  url: '/test',
  success: function(res) {
    // 通过 eventChannel 向被打开页面传送数据
    res.eventChannel.emit('test-data', { data: 'test' }) 
    // res.eventChannel.emit 第二个参数是要传递的数据 **第二个参数只能是key-value形式的对象**
  }
})

B页面,在show生命周期中获取

 useDidShow(() => {
    const current = pages[pages.length - 1];
    const event = current.getOpenerEventChannel();
        event.on('test-data', params => {
            console.log(params); // { data: 'test' }
        });
    });

3. 返回上一个页面的数据传递

B页面->A页面,从B页面返回A页面时需要传递一些数据时。返回上一个页面navigateBack
示例:
B页面返回上一个页面

 // 获取全部页面
 let pages= getCurrentPages()
 // 获取前一个页面的序号
 let prevPage = pages[pages.length - 1]
 // 给前一个页面设置数据
 prevPage.setData({...})
 
 wx.navigateBack({
   delta: 1 // 返回一个页面
   // 返回的页面数,如果 delta 大于现有页面数,则返回到首页
 })

在A页面

useDidShow(async () => {
    const data = Taro.getCurrentInstance().page.data ;
    // 页面返回的参数
    })

4. 使用本地缓存

使用setStorageSyncgetStorageSync(建议在以上三种都不满足使用场景时使用该方法)

// set
 Taro.setStorageSync('test', data);
 // get
 Taro.getStorageSync('test')

目前接触就这四种,应该还有其他方式,只是常用这四种。欢迎补充和指正。

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

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

相关文章

Pinia(二)了解和使用Store

Store Store 是保存状态(state)和业务逻辑的实体, store 不应该与我们的组件绑定. 换句话说, store 就是全局状态.store 有三个关键概念, 分别是 state, getters 和 actions, 这与 Vue 组件中的 data, computed 和 methods 是相对应的概念. 定义 store 通过 defineStore 函数…

Vue页面路由参数的传递和获取

文章目录1. 通过动态路由参数传递2. 通过query字符串传递3. props 隐式传递vue 页面路由切换时传参的方式有如下几种: 动态路由参数 它隐藏字段信息,相对于来说较安全,同时地址栏中的地址也相对较短 它必须是先定义后使用,一般用…

关于嵌套使用 iFrame 出现 Refused to display in aframe 拒绝连接访问 和 ‘X-Frame-Options‘ to ‘SAMEORIGIN‘ 的解决方案【已解决】

目录问题描述原因分析问题解决总结今天在迁移旧项目时,出现了如下错误提示: Refused to display in a frame because it set X-Frame-Options to SAMEORIGIN问题描述 当前项目是一个生产环境正常运行的项目,由于我们要迁移服务器并且部署 k…

Pro2:修改div块的颜色

什么是JavaScript?实现目标实现代码实现效果实现方法💛作者主页:静Yu 🧡简介:CSDN全栈优质创作者、华为云享专家、阿里云社区博客专家,前端知识交流社区创建者 💛社区地址:前端知识交…

html里面使用axios发送请求

html里面使用axios 效果展示&#xff1a; 代码展示&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name…

Vue项目实战 —— 后台管理系统( pc端 ) —— Pro最终版本

前期回顾 开源项目 —— 原生JS实现斗地主游戏 ——代码极少、功能都有、直接粘贴即用_js斗地主_0.活在风浪里的博客-CSDN博客JS 实现 斗地主网页游戏https://blog.csdn.net/m0_57904695/article/details/128982118?spm1001.2014.3001.5501 通用版后台管理系统&#xff0c;如果…

前端vben框架中表格table问题汇总

1.template中的代码 <BasicTable register"registerTable" :canResize"false"><!-- 表格左边的插槽 --><template #tableTitle><div class"btn-group"><a-buttonghosttype"primary"preIcon"ant-desi…

【vue】vue脚手架以及vite介绍

内容一、VUECLI二、关于cli的原理三、vite四、使用vite五、vite处理css、less、postcss、ts六、vite对vue的支持&#xff1a;七、预打包&#xff1a;八、关于vite打包九、真实项目中不会一直使用npx的十、ESBuild十一、vite脚手架&#xff0c;一、VUECLI 先安装这个工具&#…

基于AI分词模型,构建一个简陋的Web应用

文章目录前言1. 效果展示2. 应用设计3. 实现3.1. lac分词模型的服务化部署3.2 使用Flask构建app4. 小结前言 内容纯属个人经验&#xff0c;若有不当或错误之处&#xff0c;还请见谅&#xff0c;欢迎指出。 文中大致介绍了&#xff0c;如何快捷地使用PaddleHub服务化部署一个简…

vue 时间格式总结及转换

vue框架中我们常常用el-date-picker标签来显示和选择时间&#xff0c;那么&#xff0c;常见的时间的格式包含年-月-日&#xff08;yyyy-MM-dd&#xff09;、年-月-日 时-分-秒&#xff08;yyyy-MM-dd HH-mm-ss&#xff09;、标准时间格式以及时间戳。那么今天我们就来总结一下常…

Vue的开发常用的工具有哪些?

相比其他大型框架&#xff0c;Vue更加灵活&#xff0c;开发者既可以选择使用Vue来开发一个全新项目&#xff0c;也可以将Vue引入到一个现有的项目中。代码简洁、上手容易&#xff0c;深受开发者青睐。本节我们将对Vue的开发环境以及常用工具的使用进行讲解。 1.Visual Studio …

web前端面试高频考点——Vue3.x新增API(生命周期,ref、toRef 和 toRefs 的理解和最佳使用方式)

系列文章目录 内容参考链接JavaScript 面试高频考点HTML、CSS、JavaScript、ES6、AJAX、HTTP 面试考点 Vue2.x 面试高频考点Vue2.x 面试高频考点Vue3.x新增API生命周期&#xff0c;ref、toRef 和 toRefs 的理解和最佳使用方式Vue3.x升级的重要功能emits属性、生命周期、多事件…

React初体验-Hello React的组件化方式-React入门小案例

文章目录React初体验Hello React案例演练Hello React案例升级Hello React的组件化组件化的方式数据依赖事件绑定其他案例练习电影列表展示计数器的案例React初体验 接下来我们通过Hello React的案例, 来体验一下React开发模式, 以及jsx的语法 Hello React案例演练 第一步: 先引…

〖大前端 - 基础入门三大核心之CSS篇⑲〗- CSS精灵的使用 与 background综合属性

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费开放&#xff0c;购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。福利&#xff1a;除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外&#xff0c;还可以通过加入星荐…

vue pc项目 router.js 配置详解 ,vue项目中路由懒加载的正确使用,vue实现动态路由一步到位

这个是我之前一个项目的router.js 文件 xmjd import Vue from vue import http from ./plugins/axios import Router from vue-router import { getChnPinyin } from "/utils/chnpinyin"; import { clearLoginInfo, handlerMenu } from /utilsVue.use(Router) // 解…

css清除浮动的四种方法(详细)

浮动带来的影响 清除浮动主要是为了解决&#xff0c;父元素因为子级元素浮动引起的内部高度为0的问题 看下面一段代码 <div class"fater"><div class"box1">one</div><div class"box2">two</div></div> …

VUE中调用高德地图获取当前位置(VUE2.0和3.0通用)

标签&#xff1a; Vue vue 定位 js javascript1、去高德开放平台获取高德地图KEY地址&#xff1a;https://lbs.amap.com/注意&#xff1a;这里一定要选择WEB端的KEY&#xff0c;不要选择WEB服务的KEY&#xff0c;否则拿不到数据2、去项目中引入KEY&#xff0c;也就是CDN&#x…

基于RuoYi框架自动生成后端代码及前端界面

&#x1f3c0;&#xff08;1&#xff09;序言 &#x1f438;近来工作临近项目周期尾声&#xff0c;基本都是每天加班到晚上8到9点的节奏&#xff0c;似乎每年到10月份之际都是一个忙碌月&#xff0c;不知道这是一个&#x1f436;行业规律&#x1f436;还是仅仅对我而言的一个&a…

在vue中使用FullCanlendar实现日历预约会议室功能

最近接到任务,让实现一个预约功能,让我找找插件,需求是这个样子滴 明白任务以后,那咱就开抄呗~(bushi 开找 经过一番寻找,最后我决定使用FullCalendar,为啥用这个呢,你看它样子长的像不像我的需求,虽然说不上是有一些像吧,但简直就是一模一样. 更关键的是这玩意有很全的文档(但…

H5移动端适配方案rem/vw

前言 在讲解适配方案之前&#xff0c;我们聊聊为什么要做适配&#xff1f; 因为视口、逻辑像素、分辨率这些变量的不同&#xff0c;在每个设备展示都不一样&#xff0c;需要一种方案来统一。 物理像素&#xff1a;也就是分辨率&#xff0c;一个物理像素是显示器上的最小的物…