微信小程序使用setData修改数组中单个对象的方法分析

2024-10-10 22:08:04

本文实例讲述了微信小程序使用setData修改数组中单个对象的方法。分享给大家供大家参考，具体如下：

微信小程序已经出来挺久的时间了，之前只是在文档上粗略的看了一下，最近稍得空闲，便利用微信小程序平台写一个练手的项目，顺便学习一下小程序开发，感觉大体跟前端开发基本类似，但是因为是在微信的平台上运行，具体还是要根据小程序的规则来编写代码的，其中还是有部分的内容跟前端中常见的有所不同，于是接下来的博客里，也会顺手记录微信小程序开发过程中的一些坑，帮助后来的小程序开发者少踩一些坑，当然我踩的坑大部分都是以前的开发者踩过的，我所做的也仅仅是记录，分享。

习惯使用Vue或者React这类框架的开发者们，肯定不会对修改data内中数组的单个对象而烦恼，因为这些框架已经帮我们很好的处理了这个问题，并且在文档上也写的非常清楚。

比如要求是有一个数组存放了购物车的商品信息，而你在购物车内修改了单个商品的期望购买数量后，我们就要动态的更新这个单个对象的购买数量值，如果在小程序里我们会怎么做呢？

如果你按照Vue的写法来实现的话，不出意外会失败。而微信小程序也只给我们提供了一个setData方法，这个方法是使用键值对的形式对数据进行修改，例如：

this.setData({
  name : 'leon'
})

回到我们刚刚的例子里，这时候，如果你想修改单个商品的数量信息，应该怎么写？

首先展示一种错误的写法：

Page({
 data: {
  array: [{text: 'init data'}],
 },
 changeItemInArray: function (index) {
 this.setData({
 'array['+index+'].text':'changed data'
 })
 }
})

如果这样动态的写index，很显然，这样是无法使用在对象的key中的，我相信小程序的新手开发者可能尝试过这样的写法。

那么正确的写法究竟是怎么样的呢？

changeItemInArray: function (index) {
 // 提前准备好对象
 var item = this.data.list[index]
 item.count = 100
 // 依旧是根据index获取数组中的对象
 var key = "list["+ index + "]"
 this.setData({
 // 这里使用键值对方式赋值
  key: item
 }, function () {})
}

最后，希望以后的小程序版本更新中，有更好的赋值方法。希望这篇文章能帮助到小程序的新手开发者。

希望本文所述对大家微信小程序开发有所帮助。

微信小程序 JS动态修改样式的实现代码

微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动态的修改数据,从而实现动态样式的改变而已.感觉有点········那个啥的,怪怪的.不过也没办法了.如果你有更好的方法,可以在评论区分享一下. test.wxml <view style="text-align: center;"> <label style="
微信小程序 JS动态修改样式的实现方法

前言本文主要介绍了关于微信小程序 JS动态修改样式的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧先写一个不怎么好看的demo,通过点击事件来控制view的元素属性,把背景改变成蓝色. 是这样的效果: 代码如下: 上一份小代码 index.wxml <view > <view class="cont" style="background:{{background}};">属性改变</view> <
微信小程序 setData使用方法及常用错误解决办法

微信小程序 setData使用方法及常用错误解决办法最近在弄微信小程序,类似于共享单车用来练练手,基本原理就是小程序发送经纬度给服务器,服务器从数据库中检索经纬度附近的单车传给小程序. 就在这里..没错就是这里,传回来的值是以jsonarray格式传过来的. 我需要将jsonarray进行解析获取经纬度,ID等车辆信息,然后赋值给小程序地图上的mark,一般我的思路时直接用个for循环给每个mark进行赋值然后再Setdata一下就ok, 结果没想到小程序setData()设置数组对象的某个元
微信小程序 setData的使用方法详解

微信小程序 setData的使用方法详解最近在使用微信小程序的setData时,遇到了以下问题.如下: 官网文档在使用setData()设置数组对象的某个元素的属性时,是这么使用的: Page({ data: { array: [{text: 'init data'}], }, changeItemInArray: function() { this.setData({ 'array[0].text':'changed data' }) } }) 使用了 'array[0].text' : '
微信小程序中this.data与this.setData的区别详解

一.摘要小程序中我们会经常使用到this.data与this.setData.其中this.data是用来获取页面data对象的,而this.setData是用来更新界面的.那么他们之间的区别与联系你真的搞懂了吗? Page.prototype.setData() setData 函数用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值. 注意: 直接修改 this.data 无效,无法改变页面的状态,还会造成数据不一致. 单次设置的数据不能超过1024kB,请尽量避免一次
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】

本文实例讲述了微信小程序实现点击按钮修改view标签背景颜色功能.分享给大家供大家参考,具体如下: 1.效果展示 2.操作步骤: ① 数据绑定view样式背景属性值 ② 通过逻辑文件设置该背景属性初始值 ③ 通过点击按钮修改背景属性值 3.关键代码 index.wxml文件: <view style="background:{{viewBg}};color:white;height:100px;">我是view标签</view> <button type=
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】

本文实例讲述了微信小程序实现点击按钮修改文字大小功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="font-size:{{fontSize}}pt">我是view标签</view> <button class="btn" type="default" bindtap="magnifyFontS
微信小程序报错：this.setData is not a function的解决办法

微信小程序报错:this.setData is not a function 在page中定义的代码如下,代码会报错:this.setData is not a function <strong> pasteEncryptedText:function()</strong>{ let decryptedPass = this.data.decryptedPassword; if (decryptedPass == '' ){ wx.showToast({ title: '请先输入
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】

本文实例讲述了微信小程序实现点击按钮修改字体颜色功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="color:{{color}}">我是view标签</view> <view style="display:flex;"> <block wx:for="{{colorArray}}" wx:k
微信小程序点击控件修改样式实例详解

微信小程序点击控件修改样式实例详解现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. 第一步:在wxss中定义被点击和未被点击的样式,如下: .service_selection .is_checked{ border: 1px solid #FE0002 ; color: #FE0002 ; background: #fff; } .service_selection .norm

微信小程序使用setData修改数组中单个对象的方法分析

相关推荐

随机推荐