微信小程序 this.data与this.setData

一.摘要小程序中我们会经常使用到this.data与this.setData.其中this.data是用来获取页面data对象的,而this.setData是用来更新界面的.那么他们之间的区别与联系你真的搞懂了吗? 二.正文 this.data可以获取页面data对象,但是它返回的对象到底是新的对象还是仅仅只是一个引用呐.这个很关键,在日常开发中很可能因为不知道或者是自己的疏忽导致bug,而且很难排查原因.带着这个疑问我们来做一下试验.由于时间比较紧,博主就不单独写demo了,项目中可能有大量…

微信小程序this.data和this.setData({})的区别

this.data.xx是用来获取页面data对象的----------只是js(逻辑层)数据的更改: this.setData是用来更新界面的---------用于更新view层的.…

微信小程序报Cannot read property 'setData' of undefined的错误

最近在学习微信小程序的开发,让我吐槽的是,都9102年了,怎么还是有有时不能复制,有时不能打中文的bug呢,这个时候,你可以Ctrl+shift+w一下,如果还不行,那就得重启了.. 进入正题吧,刚在写代码的时候,报了这样一个错误然后把this输一下是undefined,因为这个时候this指向的是当前wx对象,而wx对象没有setData,我们应该将this的指向修改为page对象只要把success改成箭头函数就ok啦...…

微信小程序报错TypeError: this.setData is not a function

今天在练习小程序的时候,遇到小程序报错对于处于小白阶段的我,遇到这种报错,真还不知道是错从何来,只有一脸蒙逼,后来通过查询,终于知道了问题所在,下面对这一问题做一记录小程序默认中是这么写的 onLoad:function(e){ this.setData({ name:app.name }) } 这个this就没问题自己写的 ononon:function(){ var tt=setInterval(function(){ jindu++ if(jindu>=50){ clearInt…

微信小程序--修改data数组或对象里面的值

1.初始data数据 Page({ data:{ code:'1234', reward:[{ name:"艾伦", img:"../img/success.png", status:1 }, { name:"郝建", img:"../img/s…

微信小程序——修改data里面数组某一个值

比如我现在有个data数据如下: data: { playIndex: null, courseList: [{ videoId: '0', isPlaying: false, }, { videoId: '1', isPlaying: false, }] }, 我现在想要修改courseList里面的isPlaying的值该怎么做呢? var thisIdx = e.currentTarget.dataset.index; var playStatus = "courseList["…

微信小程序中this指向作用域问题this.setData is not a function报错

在微信小程序中我们一般通过以下方式来修改data中的数据 this.setData({ index1: e.detail.value }) 比如在函数里面修改数据 bindFaChange1: function (e) { this.setData({ index1: e.detail.value }) } 但是当我们通过wx.request请求网络数据成功后绑定数据时候报以下错误 this.setData is not a function 代码如下: doCalc:function(){ w…

微信小程序 setData 的坑(转)

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

微信小程序开发——使用回调函数出现异常：TypeError: Cannot read property 'setData' of undefined

关键技术点: 作用域问题——回调函数中的作用域已经脱离了调用函数了,因此需要在回调函数外边把this赋给一个新的变量才可以了. 业务需求: 微信小程序开发,业务逻辑需要,需要把获取手机号码的业务逻辑作为检验登录有效性函数的回调函数. 异常描述: 微信小程序开发给data中的变量赋值,出现以下错误: VM1610:1 thirdScriptError Cannot read property 'setData' of undefined;at pages/index/index checkSess…

【微信小程序】数据与界面UI不同步，不能直接操作Page.data

问题:数据层与UI不同步微信小程序也采用UI绑定数据源的形式,根据以前做WPF的经验,直觉上认为修改了数据层(Page.data)后,UI会自动更新,然而实验发现数据层修改后UI层未修改,导致数据层与UI不同步的情况. 查看官方文档Q&A,第一项就是该问题的说明,不能直接操作Page.data!需要改用Page.setData来修改数据,才能同步到UI! 另外w3cschool的教程中,对UI与数据源的绑定,Page.setData的使用也有一个很好的例子. https://www.w3csc…

微信小程序中 this.setData is not a function报错

在微信小程序中我们一般通过以下方式来修改data中的数据: 比如获取小程序缓存: wx.getStorage({ key: 'is_screen', success: function (res) { this.setData({ is_screen: res.data }) } }) 但是会报错: this.setData is not a function 这是因为this作用域指向问题 ,success函数实际是一个闭包 , 无法直接通过this来setData 那么需要怎么修改呢? 我们…

微信小程序setData的使用，通过[...]进行动态key赋值

首先先介绍一下微信小程序Page.prototype.setData(Object data, Function callback)的讲解: setData函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的this.data的值(同步) 微信小程序官网文档只对字符串,数字,数组和对象类型的数据通过对setData进行了修改,却没有对动态数据进行讲解,在这里我就针对静态数据以及动态数据的修改进行讲解. 这里关键是动态数据修改,通过使用[...]: "..."进行动态数据赋值,如下…

微信小程序setData复杂数组的更新、删除、添加、拼接

众所周知,微信小程序里所有对数据的修改只有在setData里修改才会在页面上渲染.在此分享小程序里复杂数组的更新.删除.添加.拼接初始数据数组嵌套对象 data: { cartList = [{ id: 1, goods: {id: 1, name: 'wechat'}, checked: true }, { id: 2, goods: {}, checked: false }, { id: 3, goods: {}, checked: true }] }, 索引部分删除 let index…

微信小程序 setData 如何修改动态数据？

最近这段时间在写微信小程序,有一个页面需要动态修改 data 中的数据,而这里似乎是个坑. 1.正常修改正常修改很简单,当触发 change 事件时,数据和页面都会同时发生改变.这个也不用多说,很简单的例子. 2.如何修改对象中某个属性值当你想把下面代码中 human 中的 height 的值改成 178 时,直接用 this.setData ({human.height: 178}) 会报错. 这个时候可以先用字符串拼接属性名,然后用 [] 包裹起来,这里画上,待会可能要考. …

微信小程序开发（request请求后台获取不到data）

1微信的request的post请求后台获取不到data(当初这个问题纠结了好久好久),原因是post传递的data是json格式而不是key,value的格式,所以获取不到相应的data就是post请求应为表单模式的data,微信小程序提供的datajson格式完全获取不到. 解决方法: 1.改变header header: {'Content-Type': 'application/json;charset=UTF-8;'}, 2.query的格式传递post请求就可以了,不过这个有点..你…

微信小程序中如何使用setData修改数组或对象中的某一参数

本人也是刚开始接触微信小程序,在微信小程序中经常会遇到修改数组中某一项的值,比如array[0]或者是对象中object.item的值.这些值在微信小程序中都需要使用一个名为setData的方法,而这个方法是通过键值对的形式对数据进行修改,setData({ 参数名: 值 }); 既然知道是以键值对的方式进行传参,那么我们在修改数组和对象的时候就直接将要修改的参数名写成对应字符串就可以了,然后使用[]将字符串括起来,这就告诉编译器这是指向的是该字符对应的实际位置,如下: var authorit…

微信小程序云开发报错解决： Setting data field "openid" to undefined is invalid.

最近在学习微信小程序云开发,刚一开始就遇到了问题. 点击获取openid的时候控制台开始报错: [云函数] [login] user openid: undefined VM97:1 Setting data field "openid" to undefined is invalid. 然后我开始去百度搜索解决这个问题,各种方法都试过了,还是没有解决.换了一个思路,开始追踪代码: 鼠标悬停到右边的 index.js:55,发现是/pages/index/index.js文件的第55…

微信小程序的wx.login用async和data解决code不一致的问题

由于wx.login是异步函数,导致在我们获取微信小程序返回的code去请求我们的登录接口时code的值会异常.现在用promise封装一下,将他success的结果返回,在登陆函数中await就可以了. loginwx() { return new Promise(function (reslove, reject) { wx.login({ success(res) { wx.setStorageSync("loginCode", res.code); reslove(res.co…

微信小程序开发心得

微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认证信息如,营业执照等再次就是用一个未曾开通过公众号的QQ号或微信号来注册一个微信小程序号. 最后,下载微信小程序开发工具. 由于这里,我们更多的关注如何去开发一些app,而不是科谱微信小程序,故在此不在过多的解释,详细的说明,可以去官网帮助文档. 首先,我们拿自己的项目在一步一步的说明并开发吧,…

通过微信小程序看前端

前言 2016年9月22日凌晨,微信官方通过“微信公开课”公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众号据说只有200个. 虽然内测名额十分稀少,但依赖中国广大开发者的破解和分享精神,在网络上很快出现了开发工具的破解版本和API文档.然而可能是微信的妥协或者早已预料,9月24日微信官方发布了不需要破解就可以使用的微信小程序开发者工具和文档,对于费劲心思破解完的开发者来说应该瞬间整个人都不好了. 以下…

快速了解微信小程序的使用，一个根据小程序的框架开发的todos app

微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程,做了一个常规的todo app.这个app基于微信小程序的平台,实现了todo app的常规功能,同时为了让它更接近实际的工作场景,也用到了loading与toast这两个组件来完成一些操作的交互与反馈.这个平台给我的直观感受是,技术层面,它跟vue有相似性,但是远没有vue强大:开发时候的思路,不…

微信小程序前端源码逻辑和工作流

看完微信小程序的前端代码真的让我热血沸腾啊,代码逻辑和设计一目了然,没有多余的东西,真的是大道至简. 废话不多说,直接分析前端代码.个人观点,难免有疏漏,仅供参考. 文件基本结构: 先看入口app.js,app(obj)注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等.其他文件可以通过全局方法getApp()获取app实例,进而直接调用它的属性或方法,例如(getApp().globalData) //app.js App({ onLaunch: function ()…