微信小程序 如何在页面直接传递信息 / 通信方法 / 附带项目案例

最新推荐文章于 2024-07-10 15:35:23 发布
最新推荐文章于 2024-07-10 15:35:23 发布
阅读量3.3k 收藏 7
点赞数 1
分类专栏： 微信小程序 文章标签： 微信小程序 页面间通信 页面间传递数据 城市选择 Mina
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Beijiyang999/article/details/73109815
版权
本文介绍如何在微信小程序中实现场景化的城市选择功能，并通过全局数据在页面间传递信息。详细步骤包括在app.js设置全局数据，在城市选择页面修改数据，最后在首页读取并渲染更新后的全局数据。
摘要由CSDN通过智能技术生成

相关项目案例：

场景如下

需求是：

  • 点击首页的城市定位，进入选择城市的页面。
  • 选好后，将选中的结果返回首页处

分析：

  • 这是两个不同的页面。需要在它们之间传递信息，实现通信。
  • 我们需利用 全局数据 来实现这一目的。

app.json

...
"pages": [
    "pages/index/index",
    "pages/cityselector/cityselector”,
...

而利用全局数据， 把大象装进冰箱分三步：

  • 设置全局数据
  • 城市选择页面 修改全局数据
  • 首页 读取、渲染全局数据

截图

  • 首页定位处与搜索框
    pages/index/index.wxml
最低0.47元/天 解锁文章
Beijiyang999
关注
专栏目录
小白学习微信小程序的跨页面通信和数据传递
wx_linying1029的博客
08-06 1087
跨页面通信和数据传递在微信小程序开发中非常重要，它们可以帮助不同页面之间共享数据并实现页面间的交互。根据实际需求和场景，选择适合的方式进行跨页面通信和数据传递，可以更好地实现页面间的交互和数据共享。我们可以将数据保存在小程序的实例中，以实现在不同页面之间共享数据。通过页面栈，我们可以获取打开的其他页面实例，从而实现页面间的通信。在页面跳转时，可以通过url参数将数据传递给目标页面。我们可以在页面A中设置全局变量，在页面B中获取该全局变量。通过页面栈，我们可以获取打开的其他页面实例，并直接访问其数据。
微信小程序wx.navigateTo中events属性实现页面间通信传值，数据同步
12-03
小程序wx.navigateTo路由方法中新增加了events属性，可以用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。 相关文档链接：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html 基本使用方法文档中已经有示例，可以参考 上级页面 新打开页面 通过上面的方法，小程序可以实现不同页面直接互相调用相关方法，也能进行页面间传值等处理
小程序之页面通信&派发通知
你若盛开，清风自来
05-28 1925
小程序页面通信指的是不同页面之间传递数据、状态和事件的过程。提高小程序的用户体验：通过页面通信，可以实现不同页面之间的数据共享和交互，使用户在使用小程序时更加流畅、便捷。优化开发效率：小程序页面通信可以简化开发流程，避免重复的代码编写和数据传递逻辑的处理。支持复杂场景的开发：在需要实现较为复杂的页面交互和数据传递逻辑时，小程序页面通信可以帮助开发者实现更加灵活、即时的数据传递和状态更新。
微信小程序之 带参数跳转页面实例(传参及接收参数)
热门推荐
gyueh的博客
08-26 1万+
带参数跳转页面 目的： 实现页面A带参跳转页面B，并在页面B中获取到相应的参数 A页面--------获取id、name值并跳转页面 // demo.js gotoB() { let project_id = e.target.dataset.id; let project_name = this.data.userName; wx.navigateTo({ url: './add/add?id=' + project_id + '&name=' + project_
微信小程序 -- 页面间通信
Mr. Wu's blog
10-07 1259
通过url传参实现页面间单向通信通过，getCurrentPages()页面栈实现页面间单向通信，通过EventChannel实现页面间双向通信。
学习微信小程序的跨页面通信和数据传递
吃不胖.
09-22 862
随着移动互联网的迅猛发展，微信小程序越来越受到大家的关注，为了便于用户使用和开发者开发，微信小程序不仅提供了各种组件和API，还提供了跨页面的通信和数据传递功能，本篇文章主要介绍微信小程序中跨页面通信和数据传递的几种方式。需要注意的是，通过组件通信API传递数据需要在组件中定义一个自定义事件，并在触发事件时传递数据，在页面中使用bind()方法绑定自定义事件并定义事件处理函数来获取数据。需要注意的是，事件总线只在同一个页面内的组件实例中有效，如果需要在不同页面之间使用，可以使用小程序提供的组件通信API。
微信小程序页面间值传递的两种方法
10-17
在微信小程序开发中，页面间值传递是一个常见的需求，它涉及到用户数据在不同页面之间的流动。本文将详细介绍两种主要的页面间值传递方法：通过URL带参数传递和使用全局变量。 1. **URL带参数传递** 这种方法类似...
微信小程序个人信息页面demo
07-27
此案例为微信小程序用户个人信息填写表单，昵称、手机号、性别、所在城市，还行增加别的可自行添加。
微信购物商城的微信小程序页面源码
05-18
微信购物商城的微信小程序页面源码是使用微信WEB开发者工具开发，亲测可直接运行。该程序包含了详细完整的框架架构结构，从设计上满足了相关应用服务的设计要求，是一款非常值得学习简介的DEMO小程序源码。
ChatGPT聊天微信小程序源码/适配H5和WEB端
03-05
ChatGPT-MP(基于ChatGPT实现的微信小程序，适配H5和WEB端) 可二开包含前后台，支持打字效果输出流式输出，支持AI聊天次数限制，支持分享增加次数等功能。 技术栈：JDK8 + SpringBoot + Vue2 + uniapp + Mysql 包含...
小程序组件间通信方式大总结
weixin_47121832的博客
05-17 277
直接拼接查询数据在跳转到的页面中的onload函数中的opstion中进行获取。在一级页面中预留一个event事件在子页面跳转的时候获取到该页面进行派生就行。第三步调用上一个页面的setState把你需要的数据设置进去即可。第二步获取到上一个页面 (在上一个页面中预留好一个数据)第一步需要获取到当前跳转的所有页面集合 是一个栈结构。使用wx.navigateTo方式。第二步在子页面中进行派生该事件。第一步预留接受事件的事件函数。通过event事件进行传递。跳转页面接收数据方式。
【uniapp微信小程序】uniapp微信小程序——页面通信
最新发布
九日的博客
07-10 888
在 uniapp 应用中创建一个专门用于管理页面之间事件通信的事件总线。这种方式在逻辑复杂、需要频繁通信的情况下非常实用。// 页面A 发送事件// 页面B 监听事件// 输出 some data});
【微信小程序】页面间通信
'Ablaze 的专栏
01-09 1242
早期 先来看早期（2017年）的一篇解决方案：微信小程序跨页面通信解决思路 这里总结出两种方案： 方案一：获取Page实例，然后setData更新数据的，跟业务的耦合性比较大。 方案二：使用发布订阅模式，但这种多了以后，同样不容易进行后期的维护。 现状 基础库2.7.3（2019年）开始支持页面间通信。 如果一个页面由另一个页面通过 wx.navigateTo 打开，这两个页面间将建立一条数据通道： 被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 Event
微信小程序之页面通信方式
BaiShanlxl的博客
09-24 2131
文章目录一、前言二、页面通信是什么？三、传值的几种常用方式1.页面跳转传参2.页面跳转传入数据3.使用全局变量传递数据4.利用缓存进行传值四、小结 一、前言 提示：微信小程序中，页面间的通信方式很重要，通信方式也有很多种，其中最简单的有页面跳转时的传参**(/pages?event = ‘xxx’)**，还有更复杂的传参方式和传递的更复杂的值，下面是我在学习中使用过的几种常用的页面间的通信传值方式 二、页面通信是什么？ 类似于vue中的组件传值，可以应用于很多场景，用的最多的则是路由跳转传值和获取上一
微信小程序父子组件之间通信的 3 种方式
qq_39321234的博客
06-24 2439
⚫ 父组件还可以通过 this.selectComponent() 获取子组件实例对象，这样就可以直接访问子组件的任意数据和方法。⚫ 用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据。⚫ 用于子组件向父组件传递数据，可以传递任意数据。
小程序中如何进行数据传递和通信
weixin_42560424的博客
06-29 1573
在小程序中，可以通过页面参数来传递数据。当跳转到一个新页面时，可以将需要传递的数据作为参数传入，然后在目标页面的onLoad函数中获取参数。以上是小程序中常用的数据传递和通信的方法和示例代码。根据实际需求和场景，选择适合的方法来实现数据传递和通信功能。在小程序中，可以使用全局变量来共享数据。可以在app.js文件中定义全局变量，并在各个页面中访问和修改这些变量。在小程序中，可以使用事件进行组件间的通信。可以通过自定义事件和事件监听来实现组件间的数据传递和通信。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值