微信小程序——修改缓存数据，更新页面展示

最新推荐文章于 2025-01-15 11:21:41 发布

原创

最新推荐文章于 2025-01-15 11:21:41 发布 · 2.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

这篇博客介绍了一个用户界面的实现过程，当用户点击‘选为当前设备’按钮，该按钮会变成灰色并显示‘当前设备’，其他设备按钮变为绿色并显示‘选为当前设备’。代码示例使用了微信小程序（wx）的WXML和JS，通过更新本地缓存数据来改变按钮的状态。

项目需求大概是这样的一个流程，当用户点击“选为当前设备”，点击的那个按钮变为灰色按钮且展示的文字是“当前设备”，其他的按钮展示成“选为当前设备”，且按钮成绿色状态
在这里插入图片描述
本地缓存数据如下:

 deviceList:[
	 {
   
   deviceName:'设备A',deviceId:'a',selStatus:false},
	 {
   
   deviceName:'设备B',deviceId:'b',selStatus:false},
	 {
   
   deviceName:'设备C',

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

贝塔贝卡贝

关注关注

0
点赞
踩
5

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序——定位权限引导实现（含代码）

不迁怒，不贰过。小知识，大智慧。

12-06

3483

在微信小程序中，获取用户的定位权限并引导用户开启该功能是实现精准服务的关键步骤。通过使用方法，我们能够有效判断用户的授权状态，并在未授权的情况下，通过弹出模态框引导用户开启定位权限。接着，利用方法获取用户的位置信息，为后续的业务逻辑提供支持。整个过程不仅提升了用户体验，还确保了应用的功能完整性。合理处理用户的选择和可能出现的错误，能够进一步增强用户的信任感和满意度。希望本文提供的方法和思路能够帮助开发者在实际项目中顺利实现定位功能，为用户提供更优质的服务。码文不易，本篇文章就介绍到这里，如果想要学习更多。

微信小程序动态改变data中的数据

Xiang_Gong_Ya_的博客

06-19

490

【代码】微信小程序动态改变data中的数据。

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

混杂设备驱动模型

01-24

206

混杂设备属于字符设备，有相同的主设备号（都是10），不同的次设备号。所有的混杂设备形成一个链表，对设备访问时，内核根据次设备号查找相应的混杂设备。 linux中使用struct miscdevice来描述一个混杂设备。 struct miscdevice{ int minor；次设备号 const char *name 设备名 const struct

微信小程序 修改缓存数组中的某一个值

小码的博客

10-15

3686

var obj={}; obj.name="123"; obj.age=18; wx.setStorageSync('user', obj); 修改其中的年龄： var user = wx.getStorageSync('user'); user.age=19 wx.setStorageSync('user', user);

微信小程序如何修改本地缓存key中的单个数据

weixin_38168547的博客

08-12

689

假如用户注册后，获得用户手机号和userid，realName默认为0，然后进入B页面进行实名认证，认证成功后realName变为1，再更新缓存里的用户信息。 A页面用户注册后，存储用户信息： var obj = {}; obj.phone = res.data.data.phone; obj.userid = res.data.data.userId; obj.realN...

微信小程序setData修改数据

weixin_45740510的博客

04-21

1056

【代码】微信小程序setData修改数据。

精选资源

微信小程序项目实例——今日美食

05-24

总的来说，“微信小程序项目实例——今日美食”是一个集前端技术、后端数据管理、用户体验设计于一体的综合项目，对于学习微信小程序开发和移动应用设计的人员来说，是一个很好的实践案例。通过分析和实施这个项目，...

精选资源

微信小程序——老地方旧书店.zip

08-13

7. **用户体验**：微信小程序要求提供流畅的用户体验，因此需要考虑性能优化，比如减少网络请求、合理缓存数据、避免阻塞主线程的操作等。 8. **交互设计**：“老地方旧书店”作为一个在线书店，良好的交互设计是...

精选资源

微信小程序——天气预报项目源码

07-08

这个"微信小程序——天气预报项目源码"是开发者利用微信小程序的API和数据绑定功能，实现的一个简单的天气预报应用的完整代码。下面将详细阐述该项目涉及的主要知识点： 1. **微信小程序开发环境**：首先，开发者...

微信小程序如何修改本地缓存key中单个数据的详解

10-17

主要介绍了微信小程序如何修改本地缓存key中单个数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

微信小程序实现数据浏览，新增，修改，删除

04-08

微信小程序 连接数据库，代码简单，一看就明白，下载就可以使用

微信小程序本地缓存数据增删改查实例详解

12-09

微信小程序本地缓存数据增删改查实例详解数据如： var user = { name: 'Lion', sex: 'guy' } CRUD： // 添加 wx.setStorageSync('user', user); // 查询 var developer = (wx.getStorageSync('user') || []); // 更改 developer.name = 'Lion01'; wx.setStorageSync('user', user); // 删除 wx.removeStorage({ key: 'user' }) 感谢阅读，希望能帮助到大家，谢谢大家

微信小程序开发系列（二十一）·wxml语法·setData（）修改数组类型数据（增加、修改、删除）

时光の尘的博客

03-07

4397

在微信小程序中，setData（）方法用于将数据从逻辑层发送到视图层，以实现页面数据的更新和视图的刷新。通过 setData（）方法可以更新页面上展示的数据，让用户看到最新的信息。当调用 setData（）方法时，需要传入一个对象，该对象包含需要更新的数据。在这里，key1，key2等表示要更新的属性名，value1，value2分别为对应的属性值。当调用 setData（）后，相关属性的数据会被更新，并触发页面视图的重新渲染，以展示最新的数据。

微信小程序——动态修改页面数据(和样式)及参数传递

菜鸟＋＋的博客

01-12

4452

1.1.1动态修改页面数据在小程序中我们经常要动态渲染数据，对于新手而言我们常常遇到修改的数据在控制台显示和页面显示不一致，因为我们用“=”修改数据的，这种是可以修改，但无法改变页面的状态的，还会造成数据不一致，代码如下： data: { array: [{ text: '数组' }] } onLoad:function(){ 　　this.data.array[0].text=1; 　　console.log(this.data.array[0].text); } 修改

微信小程序开发系列（二十）·wxml语法·setData（）修改对象类型数据、ES6 提供的展开运算符、delete和rest的用法

时光の尘的博客

03-06

1721

根据以上我们可以发现，如果新增和修改都是用数据路径，要是新增和修改的数据量比较小的时候还能一个个敲上去，但是如果新增和修改的数据过多，每次都写数据路径就太过麻烦。

如何抓包微信小程序修改数据