小程序页面之间数据传递的四种方法(代码片段)

关键词：

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

最常见的就是路由传参，使用场景主要是页面汇总的少量数据的传递。以下都以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. 使用本地缓存

使用setStorageSync和getStorageSync（建议在以上三种都不满足使用场景时使用该方法）

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

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

javascripthtml静态页面传值的四种方法

 一：JavaScript静态页面值传递之URL篇能过URL进行传值.把要传递的信息接在URL上.Post.htm1代码如下:23<inputtype="text"name="username">4<inputtype="text"name="sex">5<inputtype="button"value="Post">6<scriptlangua 查看详情

java中让浮点型数据保留两位小数的四种方法(代码片段)

hello，你好呀，我是灰小猿，一个超会写bug的程序猿！今天在进行开发的过程中遇到了一个小问题，是关于如何将double类型的数据保留两位小数。突然发现这方面有一点欠缺，就来总结一下。一、String类的... 查看详情

javascript中判断数据类型的四种方法(代码片段)

判断JS数据类型的四种方法在ECMAScript规范中，共定义了7种数据类型，分为基本类型和引用类型两大类，如下所示：基本类型：String、Number、Boolean、Symbol、Undefined、Null、BigInt引用类型：Object基本类型也称为... 查看详情

一个js库就能解决小程序跨页传递事件消息和数据(代码片段)

由于微信小程序wx.navigateBack方法并不支持返回传值，导致页面在返回后，不能方便地即时更新数据。一.需求分析此类需求大概意思是：A页面进入B页面，B页面返回并传值给A或在B页面触发事件时，A页面也有事件触发改变。 &n... 查看详情

python字典拼接常用的四种方法(代码片段)

...方法三😐方法四😣参考引言字典是Python中常用的数据类型，编程中常会遇到字典拼接的问题，比如将两个字典拼接为一个字典，具体该如何操作呢？本文将讲述常用的四种字典拼接的方法。拼接方法一
... 查看详情

java求两集合中元素交集的四种方法对比总结(代码片段)

hello，你好呀，我是灰小猿，一个超会写bug的程序猿！最近在做项目的时候有用到对两个集合中的元素进行对比求其交集的情况，因为涉及到的数据量比较大，所以在进行求两个集合中元素交集的时候，... 查看详情

java求两集合中元素交集的四种方法对比总结(代码片段)

hello，你好呀，我是灰小猿，一个超会写bug的程序猿！最近在做项目的时候有用到对两个集合中的元素进行对比求其交集的情况，因为涉及到的数据量比较大，所以在进行求两个集合中元素交集的时候，... 查看详情

synchronized的四种用法(代码片段)

 一修饰方法 Synchronized修饰一个方法很简单，就是在方法的前面加synchronized，synchronized修饰方法和修饰一个代码块类似，只是作用范围不一样，修饰代码块是大括号括起来的范围，而修饰方法范围是整个函数。例如：方法... 查看详情

post提交数据的四种方式(代码片段)

四种常见的POST提交数据方式HTTP/1.1协议规定的HTTP请求方法有OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT这几种。其中POST一般用来向服务端提交数据，本文主要讨论POST提交数据的几种方式。我们知道，HTTP协议是以ASCII码传输，... 查看详情

java中让浮点型数据保留两位小数的四种方法(代码片段)

hello，你好呀，我是灰小猿，一个超会写bug的程序猿！今天在进行开发的过程中遇到了一个小问题，是关于如何将double类型的数据保留两位小数。突然发现这方面有一点欠缺，就来总结一下。一、String类的... 查看详情

php文件之间传值的四种方式说明(代码片段)

.../form></html></span>   form中的action填入的是跳转页面的url路径,method填入post方法。form表单中的提交按钮按下后，就会把form中有name的内容都传到填入的url中，可以通过$_POST['name']获取，例如:<spanstyle=... 查看详情

java线程同步的四种方式详解(代码片段)

...访问同一个数据时，将会导致数据不准确，相互之间产生冲突，非常容易出现线程安全问题比如多个线程都在操作同一数据，都打算修改商品库存，这样就会导致数据不一致的问题。线程同步的真实意思，... 查看详情

vue组件之间值传递四种方法汇总(代码片段)

1、父组件获取子组件的数据和方法$refs子组件：<template><divclass="header"><h3>zz</h3></div></template><script>exportdefaultname:‘cx‘,data()returnzz:‘XXXXXXXXXXXXXXXXXXXXXXXXXXXX‘,methods:zxx:function()alert(‘子组件方法zxx()... 查看详情

php将数组存入数据库中的四种方式(代码片段)

PHP将数组存入数据库中的四种方式最近突然遇到了一个问题，如何用PHP将数组存入到数据库中，经过自己的多方查找和研究，总结了以下四种方法：1.implode()和explode()方式2.print_r()和自定义函数方式3.serialize()和unser... 查看详情

集合的四种输出方法(代码片段)

Iterator:迭代输出，是使用最多的输出方式，用于输出List中的内容LIstIterator:是Iterator的子接口，专门用于输出List中的内容foreach:可以输出数组和集合，用于输出List中的内容Enumeration:是一个旧的接口，功能与Iterator类似，用于输出Ve... 查看详情

android多线程的四种方式：handler、asynctask、threadpoolexector、intentservice

...个线程的数据传递。（1）Message  Message可以在线程之间传递消息。可以在它的内部携带少量数据，用于在不同线程之间进行数据交换。除了what字段，还可以使用arg1和arg2来携带整型数据，使用obj来携带Object数据。（2）Handl... 查看详情

srm平台采购谈判的四种方法(代码片段)

...协调冲突，是通过谈判来解决问题。srm平台采购谈判的四种方法今天介绍srm平台采购谈判的四种方法。1、利益交集法这个方法优先推荐，若要找出真正双赢的解题方式，一定可以帮助 查看详情

static关键字的四种用法---转载(代码片段)

...，他们都有多种用法，而且在一定环境下使用，可以提高程序的运行性能，优化程序的结构。下面我们先来了解一下static关键字及其用法。static关键字1.修饰成员变量在我们平时的使用当中，static最常用的功能就是修饰类的属性... 查看详情