微信小程序 this.setData(微信小程序setstorage)

微信小程序 this.setData(微信小程序setstorage)微信小程序setData()使用:Page.prototype.setData(Objectdata,Functioncallback)setData函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的this.data的值(同步)。参数说明:Object以key:value的形式表示,将this.data中的key对应的值改变成va…

大家好,又见面了,我是你们的朋友全栈君。

微信小程序setData()使用:


##Page.prototype.setData(Object data, Function callback)
setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。
参数说明:
这里写图片描述

Object 以 key: value 的形式表示,将 this.data 中的 key 对应的值改变成 value。

其中 key 可以以数据路径的形式给出,支持改变数组中的某一项或对象的某个属性,如 array[2].message,a.b.c.d,并且不需要在 this.data 中预先定义。

注意:

  1. 直接修改this.data,而不调用this.setData(),是无法改变当前页面的状态的,会导致数据不一致
  2. 仅支持可以JSON化的数据
  3. 单次设置的数据不能超过1024KB,尽量避免一次设置过多的数据
  4. 不要把data中的任何一项的value设为undefined,否则这一项将不能被设置,可能会有潜在的问题

代码示例:

Page({ 
   

  /**
   * 页面的初始数据
   */
 data: { 
   
    value:"初始值"    //定义一个变量value,赋值为:“初始化”
  
  },
   /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) { 
   
  
  }
  })

在页面中显示:

这里写图片描述

在onLoad()函数中调用setData()

  onReady: function () {
    this.setData({
      value:"调用setData()修改后的值"
    })
  
  },

再次运行:
这里写图片描述


##在wx:request()中使用
代码:

wx:wx.request({
      url: 'http://127.0.0.1:7011/ibeacon/mobile.asmx/getRequest',
      data:{userid:this.data.username},
      header: {
        'content-type': 'application/json'
      },
      method: 'POST',
      dataType: 'json',
      
      success: function(res) {

        console.log(JSON.parse(res.data.d));  
        var value = JSON.parse(res.data.d);
        this.setData({
          postData:value
        })

      },
      fail: function(res) {},
      complete: function(res) {},
    });

####这里会出现一个问题:直接在wx:request()的success回调函数中使用this.setData()会报这样一个错误:
这里写图片描述

因为这里的this是相对于wx:request()的当前对象,我们可以这样解决:因为这里的wx:rewuest()是在页面加载时调用,所以我们可以在onLoad()中定义一个变量that ,将this赋值给that,那么此时的that代表相对于onLoad()的当前对象,然后在success回调函数中直接使用that.setData()即可。

完整代码如下:

//js代码
onLoad: function (options) {
    console.log(options);
    var that = this;
    var userid = options.userid;
    that.setData({
      username: userid
    })
    // this.data.username = JSON.stringify(options);
    console.log(this.data.username);

    wx:wx.request({
      url: 'http://180.169.225.27:7011/ibeacon/mobile.asmx/getRequest',
      data:{userid:this.data.username},
      header: {
        'content-type': 'application/json'
      },
      method: 'POST',
      dataType: 'json',
      
      success: function(res) {

        console.log(JSON.parse(res.data.d));  
        var value = JSON.parse(res.data.d);
        that.setData({
          postData:value
        })

      },
      fail: function(res) {},
      complete: function(res) {},
    });
    
    
  }
//wxml代码
<view wx:for="{
  
  {postData}}">posno:{
  
  {item.posno}},TradeTime:{
  
  {item.TradeTime}}</view>

正常获取到服务器返回的数据:
这里写图片描述


##还有一个需要注意到地方就是:
###如果在onReady()函数中调用setData()方法,那么通过这个方法设置的值只能刷新一次,若需要再次刷新,需要清除缓存。

参考资料:微信公众平台

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/125390.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • echarts中国地图如何标记散点图[通俗易懂]

    echarts中国地图如何标记散点图[通俗易懂]工作中会遇到echarts在地图上面标记点位,后端数据传给城市名和坐标轴给你以后,如何添加到echarts上面渲染呢echarts需要的数据例子{name:”深圳”,value:[114.271522,22.753644]}name是城市名,value是坐标轴拿到数据后找到echarts的配置属性->series代码如下series:[//常规地图{type:’map.

    2022年10月7日
    2
  • Spark Streaming Join

    Spark Streaming Join多数据源Join思路多数据源Join大致有以下三种思路:数据源端Join,如Android/IOS客户端在上报用户行为数据时就获取并带上用户基础信息。计算引擎上Join,如用SparkStreaming、Flink做Join。结果端Join,如用HBase/ES做Join,Join键做Rowkey/_id,各字段分别写入列簇、列或field。三种思路各有优劣,使用时注意…

    2022年6月30日
    19
  • SPSS 性别卡方分析[通俗易懂]

    SPSS 性别卡方分析[通俗易懂]1.新建数据集2.打开变量视图,分别输出group、sex和number其中标签是对数据的说明,值是spss中的显示,比如定义1=subject,则输入1就等价于subject变量视图:数据视图:3.数据分析:点击数据–个案加权–将人数加入个案加权系数否则结果一般有误4.卡方检验分析–描述统计–交叉表–统计–卡方检验确定结果输出:…

    2022年5月16日
    99
  • 台式机插入网线无网络问题

    台式机插入网线无网络问题1、先查看是否是ip地址无法获取:先找到“以太网”-“详细信息”像这样,就是表示无法正确获取ip地址及网关,接下来,就是手动配置ip及网关等参数这回还是点击“以太网”,点击属性点击协议版本4,点击属性,然后手动输入ip地址等参数即可。…

    2022年6月26日
    24
  • native2ascii java_Native2Ascii和Ascii2Native的Java实现

    native2ascii java_Native2Ascii和Ascii2Native的Java实现packageutil;/***native2ascii.exeJavacodeimplementation.**@author*@version1.0*/publicclassNative2AsciiUtils{/***prefixofasciistringofnativecharacter*/privatestaticStringPREFIX=”\…

    2025年8月31日
    3
  • jdbc自建工具类

    jdbc自建工具类

    2021年10月3日
    47

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号