微信小程序 开发学习 第十六天 初步完成不同页面数据同步显示

最新推荐文章于 2023-09-08 18:14:14 发布
最新推荐文章于 2023-09-08 18:14:14 发布
阅读量637 收藏
点赞数
分类专栏： 微信小程序开发学习 记录 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45269116/article/details/106166299
版权
本文记录了微信小程序中不同页面间数据同步的实现过程，通过在离开界面前保存用户动作数据到缓存，并在展示页面加载这些数据，确保了页面更新的一致性。关键点包括动作数据的保存和加载策略。
摘要由CSDN通过智能技术生成

做了几天晚上的数据结构修改，终于做出点小成果了：

动作修改前

查看计划界面：
在这里插入图片描述
修改动作界面增加了一个动作：波比跳

在这里插入图片描述

动作修改后：

回到查看动作页面
在这里插入图片描述
开始动作界面：

在这里插入图片描述

小结：

关键是页面跳转时要把用户的动作数据保存到缓存，并在新页面展示时加载缓存的数据

离开界面前保存数据

changeInfo: function () {
最低0.47元/天 解锁文章
卡、
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小白学习微信小程序的跨页面通信和数据传递
m0_75244442的博客
07-24 143
通过全局变量、页面传参、事件发布订阅和 Storage 缓存，我们可以在不同的页面之间实现数据的共享和通信。在微信小程序中，页面是独立的组件，用户在不同页面之间进行切换。但有时候，我们需要在不同页面之间传递数据或者进行通信，这就需要用到跨页面通信和数据传递的方法。在本篇文章中，我将为小白介绍微信小程序中跨页面通信和数据传递的几种常用方法，并给出代码案例进行详细讲解。页面传参是一种常见的跨页面通信方法，可以通过在跳转时传递参数的方式，在目标页面中获取到传递的参数。
微信小程序多页面共用一个数据globalData，并及时同步更新各页面的数据的做法
summer_my_sunshine的博客
07-21 6881
使用场景：比如有A、B、C 三个页面都有收货地址这么一个数据，这个收货地址的数据源是一样的，而这3个页面都可以独立修改收货地址。在其中一个页面修改收货地址后，另外两个页面的收货地址数据也要同步更新。 因为小程序里globalDta存储的是全局对象，多个页面使用到的数据我们就放到这里面了。 1.需要先在app.js里定义全局变量： App({ globalData: { //收货地址 receivingAddress:{ latitude:23.12463, //纬度
详解小程序开发经验：多页面数据同步
11-30
导语：本文主要介绍在小程序中，多页面之间如何保持数据同步 在很多的产品中，都会存在跨页面间需要数据同步，如下示例： 为了更好的理解该场景，我们再详细描绘一下： 本场景包括4个页面：动态广场、个人中心、我的动态、动态详情 首先，进入动态广场页，请求加载数据，展示动态列表，其中，我们用绿色内阴影区分该条动态是“我的”，其他未加内阴影的表示是“别人的”； 然后，进入个人中心页，请求加载数据，展示获赞数量； 点击我的动态，进入我的动态页，请求加载数据，展示我的动态列表； 点击其中一条动态，进入动态详情页，请求加载数据，进行点赞操作； 在第5步中，点赞成功后，回退到我的动态页，
【微信小程序】使用全局事件实现在不同页面之间共享数据或触发特定的操作
资深全栈开发工程师
07-17 2565
在上述代码中，我们在App对象中定义了globalData对象，用于存储全局数据。在上述代码中，我们通过getApp()方法获取到App对象的实例，然后将onMyEvent方法重新赋值为一个新的函数，该函数用于监听并响应全局事件。在这个新的函数中，我们可以处理接收到的数据，并更新页面的数据。在上述代码中，我们通过getApp()方法获取到App对象的实例，然后调用onMyEvent方法，并传入需要发送的数据。通过以上的代码，你可以实现在微信小程序中使用全局事件来实现不同页面之间的数据共享和操作触发。
【159】微信小程序跨页面跨组件同步全局状态、跨页面跨组件通讯方案，使用自制广播模块实现
zhangchao19890805的专栏
08-20 599
本文源代码位置：https://gitee.com/zhangchao19890805/csdnBlog 仓库中的 blog159 文件夹中，子文件夹 zcBroadcast 就是项目文件夹。建议使用微信开发工具打开。 工作中需要让微信小程序各个页面、各个组件之间通信，及时获取全局状态的变化情况。我自己编写了 zcBroadcast.js 广播模块，用来完成此工作。 目录结构： 其中 lib/zcBroadcast.js 是广播模块，lib/store.js 是用来保存全局状态的模块。 custom-t
微信小程序用promise解决同步加载问题
monk0271_chen的博客
12-10 1823
微信小程序用promise解决同步加载问题 大多数人应该都会碰到以下场景： #mermaid-svg-Vmh0XL280YFUl6Zt .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-Vmh0XL280YFUl6Zt .label text{fill:#333}#mermaid-svg-Vmh0XL280YF
原生微信小程序开发学习笔记（零基础）
最新发布
qq_33365152的博客
09-08 232
原生微信小程序开发学习笔记（适合零基础）
【微信小程序开发零基础入门】——微信小程序入门
热门推荐
m0_52435951的博客
02-17 1万+
微信小程序入门一、小程序介绍1.1.什么是小程序？1.2. 微信⼩程序历史1.3.小程序可以干什么？1.4.疯狂的微信⼩程序1.5. 还有其他的⼩程序 不容忽视1.6. 官⽅微信⼩程序体验二、小程序开发资料三、第⼀个微信⼩程序四、开发小程序储备知识五、小程序特点六、wxml 语法七、小程序 API八、小程序特点九、小程序支付流程 一、小程序介绍 1.1.什么是小程序？ 2017 年度百度百科十大热词之一 微信小程序，简称小程序，英文名 Mini Program，是一种不需要下载安装即可使用的应用 (
微信小程序开发(笔记)
m0_58575070的博客
06-02 936
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。如何创建自定义组件?在根目录创建文件夹components文件夹 , 然后在此文件夹中创建文件夹,然后在新创建的文件夹下新建component , 输入文件名后回车,就会自动生成关于其 对应的.js、.wxss、.json、.wxml四个文件;全局引入和局部引入。
微信小程序开发的四十个技术窍门总结（推荐）
11-27
【微信小程序开发技术要点】 1. **禁用全局对象**：微信小程序的脚本逻辑运行在JsCore环境中，不支持window对象，因此无法在脚本中使用window或直接操作组件。 2. **库的兼容性问题**：由于依赖window对象，zepto/...
小程序实现同一个tabbar项，根据不同需求显示不同页面.zip
07-27
自定义tabbar，规定某个tabbar项目根据需要显示不同的tab页面。通过一个空白的中间页面进行中转。从而实现根据需求显示不同页面的功能
小程序订单点击不同页面_wx小程序跨页面传参
weixin_39609071的博客
12-04 105
小程序传值01wx.navigateTo传值的页面Awx.navigateTo({ url:'xxxx?good_ id='+num,//传多个值用&连接起来注意:如果要传 数组, 字典等复杂类型, 要先用 JSON.stringify() 转成字符串传递.注释：url:'xxxx?good_ id='+JSON.stringify(num), success:fu...
微信开发者工具根据场景不同来接收页面参数
weixin_72329752的博客
05-09 573
在开发小程序的时候会有要扫描二维码或者点击一个链接等跳转到小程序的页面，通常会携带一些参数。所以想要接受到这些参数，就得在微信开发者工具里面设置编译模式来模拟进入小程序的场景并携带参数。一般只用设置4个地方就可以了，模式名称、启动页面、启动参数、进入场景。设置完成后想要获取到携带的参数直接用onLoad的形参接收就行了。
微信小程序同步/异步 setStorage/setStorageSync getStorage/getStorageSync
weixin_34150830的博客
07-03 992
最近在写一个小程序的监控文件，遇到一个很常见的错，就是setStorage和getStorage是异步的问题 其中有两段代码是这样写的 native.onLaunch = function (options) { console.log("hook onLaunch", options); onLaunch && onLaunch.apply(n...
关于微信小程序异步转同步方法
qq_36765732的博客
07-15 1458
通常我们开发微信小程序时，是不支持async await来实现异步转同步的，那是因为async await 是es7语法，微信开发者工具不支持，但是只需要引入runtime就能轻松实现https://github.com/facebook/regenerator/blob/master/packages/runtime/runtime.js 使用时也很方便，直接在对应的js文件引入就好 下面贴一下runtime.js的源码,还是建议通过网址直接访问，然后复制里面的代码 /** *Copyrig...
js，uniapp，微信小程序，异步同步问题（终极解决方案Promise + async + await）
sam的博客
12-12 6225
当前框架：uni-app 异步解决方案： 使用 Promise 使用 Promise + async + await 我曾经的常规写法： 存在的问题：代码量一但多起来，就懵逼了 <template> <view class="content"> </view> </template> <script> export ...
微信小程序实现不同按钮跳转同一个页面显示不同内容
特创数字
10-27 2721
微信小程序实现不同按钮跳转同一个页面显示不同内容
掌握微信小程序开发五大关键步骤：数据绑定与页面结构
小程序页面由四个关键文件组成：js（数据来源）、wxml（页面骨架）、wxss（页面样式）和json（可选，用于配置页面元素）。其中，js文件和wxml文件尤为重要，分别负责数据管理和页面布局。 2. 数据绑定： 数据绑定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值