iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >小程序页面之间数据传递的4种方法总结
  • 183
分享到

小程序页面之间数据传递的4种方法总结

摘要

目录前言1. 少量数据传递2. 数据量大或者相对复杂的数据传递3. 返回上一个页面的数据传递4. 使用本地缓存总结 前言 近期再使用小程序开发的时候遇到小程序页面和页面之间

前言

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

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

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

总结 

到此这篇关于小程序页面之间数据传递的4种方法的文章就介绍到这了,更多相关小程序页面间数据传递内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 小程序页面之间数据传递的4种方法总结

本文链接: https://www.lsjlt.com/news/211364.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 小程序页面之间数据传递的4种方法总结
    目录前言1. 少量数据传递2. 数据量大或者相对复杂的数据传递3. 返回上一个页面的数据传递4. 使用本地缓存总结 前言 近期再使用小程序开发的时候遇到小程序页面和页面之间...
    99+
    2023-05-17
    小程序页面间数据传递 微信小程序页面跳转传值 微信小程序如何实现页面跳转
  • 小程序页面间有哪些传递数据的方法
    小程序页面间传递数据的方法有: 使用全局变量实现数据传递,app.js和app.wxss中的代码都是全局生效的,实现传递数据的代码。//往globalData设置值getApp().globalData.data = &...
    99+
    2024-04-02
  • PHP页面之间传递参数的三种方法
    php变量传递是非常常见的,比如一个简单的登录模块,首先需要创建登录表单,然后需要将登录表单页面的用户名和密码传递到登录处理页面进行判断用户名和密码是否正确,如果正确则进行登录成功的相关操作,如果错误就提示给用户账号密码有误。 以上所说的登...
    99+
    2023-09-09
    php
  • 微信小程序页面间如何传递数据
    微信小程序页面间实现传递数据的几种方法使用url通过option获取值//定义url,并赋值wx.navigateTo({url: 'testid=1'})//使用option获取值url的值Page({data:{id:'',},onLo...
    99+
    2024-04-02
  • 小程序跨页面传递参数的几种方式
    当我们在开发小程序时,经常会遇到需要在不同页面之间传递数据的情况。为了实现页面间的数据传递,小程序提供了多种方法。下面将介绍几种常用的传递数据的方法。 URL参数传递:这是一种简单直接的传递数据的方式。在跳转页面时,可以在URL中添加参数来...
    99+
    2023-10-26
    小程序
  • 微信小程序页面返回传值的4种解决方案汇总
    目录使用场景解决方案1、使用globalData实现2、使用本地缓存Storage实现3、使用小程序的Page页面栈实现4、使用wx.navigateTo API的events实现总...
    99+
    2024-04-02
  • uniapp页面间传参的几种方法实例总结
    目录前言一、上级页面 → 下级页面(单向)uni.navigateTo:URL编程式传参<navigator>标签传参二、上级页面 ← 下级页面(单向...
    99+
    2022-12-22
    uniapp 页面传参 uniapp页面参数传递 uniapp传值
  • 微信小程序之五种页面跳转方法小结
    目录第一种:<navigator></navigator>标签.第二种:wx.navigateTo.第三种:wx.redirectTo.第四种:wx.swit...
    99+
    2024-04-02
  • 微信小程序页面间的数组如何传递
    微信小程序页面间的数组的传递案例:设置全局变量 globalData代码。// A页面// 数组、对象都需要stringifyvar listData = JSON.stringify(th...
    99+
    2024-04-02
  • 小程序实现页面跳转与数据传递方案
    目录页面跳转和数据传递wx的API跳转navigator组件(了解)总结页面跳转和数据传递 界面的跳转有两种方式:通过navigator组件 和 通过wx的API跳转 这里我们先以w...
    99+
    2024-04-02
  • ASP.NET页面间数据传递的方法是什么
    这篇文章主要讲解了“ASP.NET页面间数据传递的方法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“ASP.NET页面间数据传递的方法是什么”吧!Web页面是无状态的,服务器对每一次请...
    99+
    2023-06-17
  • 小程序页面间传参的五种方式实例详解
    目录前言1、使用globalData2、使用storage3、使用url3.1 api跳转3.2 组件跳转4、使用通信通道5、使用页面栈总结前言 由于经常需要进行页面间传参且各种传参...
    99+
    2022-11-13
    小程序 传参 微信小程序传参 微信小程序 页面传数据
  • 微信小程序页面与组件之间信息传递与函数调用
     这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容 页面如何向组件传数据 组件如何向页面传数据 页面如何调用组件内的函数 组件如...
    99+
    2024-04-02
  • 小程序中页面间传值的方法有哪些
    小编给大家分享一下小程序中页面间传值的方法有哪些,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!一:url带参数传递与前端语言一样,小程序页面间的传递可以通过在路由url后接参数,路由的同时会将参数一并传递到新的页面。ind...
    99+
    2023-06-14
  • 小程序如何实现页面之间的传参
    使用url带参数传递数据代码实现:toSomeone: function (event) {wx.navigateTo({url: 'some/someid=' + ...
    99+
    2024-04-02
  • 微信小程序页面间传递数组对象的示例分析
    这篇文章主要介绍了微信小程序页面间传递数组对象的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。方法1:A页面跳转链接添加参数,B页面...
    99+
    2024-04-02
  • vue跳转页面常用的4种方法与区别小结
    目录1:router-link跳转2:this.$router.push()3.  this.$router.replace() 4.  this.$r...
    99+
    2024-04-02
  • 微信小程序页面间传值的实现方法示例
    小程序页面间传值 大家晚上好,说晚上好是因为是在晚上写的,说这句话是因为这句话开篇不那么突然。那么小程序的页面间传值,在我使用这段时间里,我就非常的主观的把它们分为wx.navig...
    99+
    2024-04-02
  • 微信小程序中页面跳转传递值的方法有哪些
    这篇文章主要介绍了微信小程序中页面跳转传递值的方法有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。微信小程序 页面跳转传递值微信小程序导...
    99+
    2024-04-02
  • 微信小程序如何实现页面之间的传参
    这篇文章主要介绍了微信小程序如何实现页面之间的传参,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。微信小程序 传参:实现效果图:微信小程序在两...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作