微信小程序中页面间数据传递

最新推荐文章于 2025-07-08 16:46:03 发布

原创最新推荐文章于 2025-07-08 16:46:03 发布 · 4k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #页面之间数据传递

本文详细解析了在小程序开发中，如何在不同页面间进行数据传递和处理。具体介绍了从index.js页面通过goodspagedata方法获取数据并发送到视图层，再利用sharePoster方法将数据传送到post.js页面的过程。同时，阐述了post.js页面如何接收和显示这些数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、在index.js页面

1、index.js中的goodspagedata方法从后台get的数据通过setData将数据shareData从逻辑层发送到视图层（我理解为将数据发送到Page({})下层和goodspagedata方法的同级）

2、然后在index.js的sharePoster方法中通过this.data.shareData拿到数据，再通过navigateTo将所需数据传送到post.js中

（从index页面跳转到post页面，并且把index页面的数据传递到post页面使用）

二、在post.js页面

1、在post.js页面中的onLoad事件的e参数中就包括index.js传递过来的数据，将数据通过setData从逻辑层发送到post.wxml视图层

post.js

post.wxml

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

__ring__

关注关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序页面间数据传输

qq_51632935的博客

08-01

568

将index里的用户信息数据传给home页面。记录一下两个页面之间数据的传输。

微信小程序页面之间传参的几种方式

01-10

1万+

A页面部分js代码B页面部分js代码。

1 条评论您还未登录，请先登录后发表或查看评论

微信小程序页面之间传值的方式有哪些

最新发布

qq_42267338的博客

07-08

491

微信小程序页面间数据传递的5种方法：1.URLQuery适合简单数据（如ID），通过路由参数传递；2.全局变量用于跨页共享数据（如token），存储在App.globalData；3.本地存储适用持久化数据（如用户信息），使用wx.setStorageSync；4.EventChannel支持双向通信（基础库v2.7.3+），适合复杂数据交互；5.页面栈传值用于返回上一页时修改数据。使用时需注意：URL参数需字符串化，全局变量避免过大，敏感数据勿存本地。

页面互传数据

weixin_47253648的博客

10-18

892

页面互传数据： ·有时候在做项目的过程中，所需要的数据不是从后台数据库传送过来的数据，而是需要另一个页面上的数据；而能够使页面与页面之间完成数据互传的方法有四种； ·HTTP是无状态的协议。Web页面本身无法向下一个页面传递信息，如果需要让下一个页面得知该页面中的值，除非通过服务器。因此，Web页面保持状态并传递给其它页面，是一个重要的技术。 ·Web页面之间传递数据，是Web程序的重要功能在 HTTP协议中一共有4种方法来完成这件事情： ·URL传值； ·表单传值； ·Cookie方法； ·Sessio

微信小程序数据传递方式

michaelxuzhi___的博客

09-07

1239

1、在一个页面上的数据从视图层传递到逻辑层，可以用标签的data-xx属性的形式设置某一个值，再在逻辑层中用currentTarget.dataset.xx取出来。（鉴于currentTarget和target的区别，只对事件绑定了的元素的某一属性取值） 2、逻辑层到视图层的数据传递，用 this.setData({ nameInWXML : nameInJS }) 把在js某...

微信小程序如何实现页面之间的数据传递

weixin_48921797的博客

11-24

7901

1、使用路由传递数据：跳转时将数据拼接在URL后面；在另一个页面的onLoad()方法的参数中即可获取到传递的参数。 //home.js wx.navigateTo({ url: `../select/select?id=${id}`, }) //select.js onLoad(option){ const id = option.id; } 2、如果将对象类型的数据拼接在路径后面，到另一个页面获取时会发现是"[object,object]"，无法使用。解决方法：利用JSON...

微信小程序页面间值传递的两种方法

10-17

微信小程序页面间值传递主要有两种方式：一是通过URL携带参数，这种方式简单直观，适用于简单的数据传递；二是利用全局变量，适用于需要在多个页面间共享同一数据的情况。在实际开发中，开发者应根据具体需求选择...

微信小程序跨页面传递data数据方法解析

10-15

以下将详细介绍三种在微信小程序中实现跨页面数据传递的方法。 1. **URL参数传递** 在微信小程序中，可以通过在页面跳转时将数据以URL参数的形式传递。例如，如果你在A页面需要将`name`和`gender`数据传递到B页面...

微信小程序 页面跳转及数据传递详解

12-29

微信小程序 页面跳转及数据传递详解类似 Android 的 Intent 传值，微信小程序也一样可以传值：例如：wxml 中写了一个函数跳转：已完成任务 <view class=containVertical>{{finishedMissionCount}} 在 js ...

微信小程序跨页面数据传递事件响应实现过程解析

10-15

本文通过一个实际的开发示例，详细介绍了微信小程序跨页面数据传递及事件响应的实现过程。首先，我们需要创建一个Emitter类，这个类的主要作用是用于事件处理。Emitter类中定义了几个关键的方法，包括用于添加事件...

微信小程序获取json页面数据

01-11

本文将详细介绍如何在微信小程序中获取JSON格式的页面数据。 #### 二、基础知识概述 1. **JSON（JavaScript Object Notation）**：一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。 2. **...

微信小程序页面间传递数组对象方法解析

10-16

主要介绍了微信小程序页面间传递数组对象方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

微信小程序 一个页面跳转另一个页面如何将数据带过去？

weixin_44774699的博客

05-05

1693

微信小程序 一个页面跳转另一个页面如何将数据带过去？ <block wx:for="{{invoiceList}}" wx:for-index="itemIndex" wx:for-item="itemList" wx:key="itemIndex"> <view class="cell-item" data-item="{{itemList}}" data-contno="{{itemList.contno}}" bindtap="jumpdetail"></view&g

浏览器打开新的窗口并传输较大数据(Laya实例)

keeptotheend的专栏

01-11

760

在当前页面中，使用window.open(url)打开另一个网页传输数据如果是比较少的数据，一般添加查询参数就可以了例如： 127.0.0.1:8082?a=b&c=d 但是这个传输有字符数的限制在传输比较多的数据时，可以使用发消息的方式发送： let win2 = Laya.Browser.window.open(url); win2.postMessage(content, url);// 此处最好加延迟接收： Laya.Browser.window.addEventListene

微信小程序之页面带参跳转

热门推荐

qq_41988669的博客

01-06

1万+

本文转载:https://blog.csdn.net/generallizhong/article/details/117773615。页面跳转参数传递有很多中方式，这里只说一种非常简单的。

小程序如何引用其他页面的js_如何操作小程序页面中data数据区中的数据

weixin_39966130的博客

01-29

3376

前言在微信小程序中，每一个页面都有一个独立的js文件，用来实现该页面的业务逻辑。这个js文件通常采用Page()方法来对页面进行注册。其中系统为页面设置了一个名为data的区域，用来存储页面的初始数据，我们将其称为小程序页面的数据区。小程序页面的数据区是采用对象的形式来进行数据设定的。那么我们该如何操作数据区中的数据呢？一、输出数据区中的数据：由于在小程序页面中，关键字this指向这个页面利用Pa...

微信小程序之缓存——不同页面传递数据

weixin_33840661的博客

11-23

538

1. 添加缓存单个密钥允许存储的最大数据长度为1MB，所有数据存储上限为10MB。 // 存储信息到storage // 异步存储 set() { wx.setStorage({ key: 'user', data: 'cck', success: ()=> { console.log('存储成功'); ...

微信小程序页面跳转url传参，对象数据过长问题

qq_26282869的博客

11-27

3596

小程序url传参如果是对象的话需要先用JSON.stringify()转换一下，接受页面在用JSON.parse()再转换回来。但这样传参有一个问题，当对象数据长度过大时会报错，因为url传参时程序把过长的那段数据给截取掉了，导致数据转换回来时格式不对而报错。这时可以再添加另一个API：encodeURIComponent(obj) 和 decodeURIComponent(options.o...

微信小程序页面间传递数组对象

AHua~

06-03

6137

在微信小程序中，有时候使用wx.navigateTo()跳转页面时要传递过长的参数或者传递一个数组对象会发现传递不过去情景再现：发送端接收端输出值我们可以使用以下解决办法：在发送端对数据进行处理接收端中，对接收的数据也进行一次处理在接收端查看输出信息 ...