问题:数据层与UI不同步

微信小程序也采用UI绑定数据源的形式,根据以前做WPF的经验,直觉上认为修改了数据层(Page.data)后,UI会自动更新,然而实验发现数据层修改后UI层未修改,导致数据层与UI不同步的情况。

查看官方文档Q&A,第一项就是该问题的说明,不能直接操作Page.data!需要改用Page.setData来修改数据,才能同步到UI!

另外w3cschool的教程中,对UI与数据源的绑定,Page.setData的使用也有一个很好的例子。

https://www.w3cschool.cn/weixinapp/weixinapp-page.html 直接搜setData。

示例代码:

UI层index.wxml

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{num}}</view>
<button bindtap="changeNum"> Change normal num </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{object.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>

逻辑层index.js

//index.js
Page({
data: {
text: 'init data',
num: 0,
array: [{text: 'init data'}],
object: {
text: 'init data'
}
},
changeText: function() {
// this.data.text = 'changed data' // bad, it can not work
this.setData({
text: 'changed data'
})
},
changeNum: function() {
this.data.num = 1
this.setData({
num: this.data.num
})
},
changeItemInArray: function() {
// you can use this way to modify a danamic data path
this.setData({
'array[0].text':'changed data'
})
},
changeItemInObject: function(){
this.setData({
'object.text': 'changed data'
});
},
addNewField: function() {
this.setData({
'newField.text': 'new data'
})
}
})

注意其中的两行注释,直接操作this.data只会导致数据层与界面UI不同步!


看来不能太想当然,还是要多看文档再动手啊。。。

【微信小程序】数据与界面UI不同步,不能直接操作Page.data的更多相关文章

  1. 微信小程序数据请求方法wx.request小测试

    微信小程序数据请求方法 wx.request wxml文件: <view> <textarea value="{{textdata}}"/> </vi ...

  2. 微信小程序我的界面

    前言 感谢! 承蒙关照~ 微信小程序我的界面 界面效果: 界面结构: 小程序代码: 我们先看me.json代码 { "navigationBarTitleText": " ...

  3. 微信小程序 -- 数据请求

    微信小程序 -- 数据请求 微信小程序请求数据,并不是一个可以在url打开有数据就可以拿到数据那么简单 浏览器地址输入 可以获取参数的url 微信小程序中 代码展示 wxml <view> ...

  4. flume采集微信小程序数据

    flume采集微信小程序数据 flume收集前端埋点数据[1]POST请求http://f.x.com:50000数据格式: JsonArray数据格式示例:[{ "headers" ...

  5. 微信小程序5 - 数据驱动界面

    微信小程序不可以使用js直接控制界面元素.而是通过改变 this.data中的属性,同步到界面 这个问题可以克服,带来的就是和H5不一样的编码方式.JS中更多的是改变数据的逻辑,而不是获取某个View ...

  6. 微信小程序-数据缓存

    每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearSt ...

  7. mpvue学习笔记-之微信小程序数据请求封装

    简介 美团出品的mpvue已经开源出来很久了,一直说要进行一次实践,这不最近一次个人小程序开发就用上了它. 看了微信官方的数据请求模块--request,对比了下get和post请求的代码,发现如果在 ...

  8. 微信小程序之跨界面传参

    微信小程序在两个之间传参类似js传递url拼接参数,举个例子来说吧 input自己设置参数 //index.wxml <form bindsubmit="formSubmit" ...

  9. Charles抓取微信小程序数据 以及 其它应用网站数据

    为了抓取小程序数据所以使用Charles来抓取,下面介绍下使用方法(mac环境下使用).使用Charles可以非常方便的抓取Http/Https请求.官方dmg下载地址:点击此处下载 Charles抓 ...

随机推荐

  1. Groovy 学习手册(4)

    6. 领域特定语言 Groovy 有许多特性,使它非常适合写DSL(领域特定语言).这些特性包活: 具有委托机制的闭包: 点号(.)和语句末尾的分号(;)是可选的: 运算符的重载(例如,加号,减号等) ...

  2. MySQL数据库知识点整理 (持续更新中)

    一.修改用户密码 格式(在命令行下输入):mysqladmin -u 用户名 -p旧密码 password 新密码 1. 给root添加密码ab12:  mysqladmin -uroot -pass ...

  3. pip安装包时遇到的Bug

    [背景] 今天打包人生中的第一个package到PyPi,在linux上执行pip3 install mysqltools-python安装一点问题都没有,打脸的是在自己的MAC上 居然安装不上 pi ...

  4. Linux vi/vim替换命令的使用说明[转]

    vi/vim 中可以使用 :s 命令来替换字符串.:s/vivian/sky/ 替换当前行第一个 vivian 为 sky:s/vivian/sky/g 替换当前行所有 vivian 为 sky:n, ...

  5. hackerrank-knapsack

    https://www.hackerrank.com/challenges/unbounded-knapsack 题目描述: #include <iostream> #include &l ...

  6. IOS团队开发之——CocoaPods 第三方库管理工具

    使用前需要下载ruby 的gem 命令镜像,mac 下自带有.但一般不用,直接访问国外网站有限制. 下面安装 http://ruby.taobao.org/ http://blog.devtang.c ...

  7. Android基础知识之API等级介绍

    原文:http://android.eoe.cn/topic/android_sdk :可以让开发者通过一个表示API级别的整数来描述程序在android平台上的兼容性,系统会将与系统本身提供的API ...

  8. Universal USB Installer集开源软件之佳作

    有机会下载一份uui的源代码,翻看了一下,呵呵,有意思,几乎是一个开源软件的大杂烩,忽然,恍然大悟,原来,作者才是开源软件精神的代言人,不重复制造轮子的践行者啊. uui网址:https://www. ...

  9. 基于Zynq平台的EtherCAT主站方案实现

    作者:陈秋苑 谢晓锋 陈海焕 广州虹科电子科技有限公司 摘 要:EtherCAT 是开放的实时以太网通讯协议,由德国倍福自动化有限公司研发.EtherCAT 具有高性能.低成本.容易使用等特点,目前在 ...

  10. [na]ip包格式

    网络层提供的服务就是在不同网段之间转发数据包. Ip包结构 1,格式(每行4byte*5) 2,版本 V4 V6 3,首部长度 20(固定)+可变长度 ,区分服务 Win2008开始:gpedit. ...