微信小程序 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)
上一篇 2022年4月18日 下午11:00
下一篇 2022年4月18日 下午11:00


相关推荐

  • ActiveMQ面试题

    ActiveMQ宕机了怎么办官方的解决方案是主从集群(备份)方案zookeeper集群Replicated(瑞pk得)levelDB就是之前在讲消息持久化kahaDB的另一种消息持久化方案,这种方案的性能会比较好activemq集群activemq最起码有三个,因为一个activemq挂了之后可以在另外两个中选取,如果只有两个的话挂了一个就只剩下一个没法选取了,三台activemq只…

    2022年4月5日
    63
  • libsvm工具箱C++编程实践2

    libsvm工具箱C++编程实践2

    2022年1月8日
    52
  • python 0xff_正在解压缩“0xff”与“\xff”[通俗易懂]

    python 0xff_正在解压缩“0xff”与“\xff”[通俗易懂]我试图用wave库从wave文件中读取二进制数据。数据以’\x0f\x06\x0a…’的形式读取和报告,我想把十六进制数转换成整数(你知道,以10为基数)。我把这些字符当作十六进制字符来处理,但我并没有把这些字符当作十六进制字符来处理。在importwaveimportstructpath=”C:\\directory\\file.wav”file=wave.open(path,’r’)dat…

    2022年6月19日
    34
  • PyCharm使用教程(专注初学者)

    PyCharm使用教程(专注初学者)本篇包含以下几个点 1 新建文件夹 python 文件 2 插件的安装和使用 列了几个 2 1 translation2 2 ChineseLangu 3 RainbowBrack 4 activate power mode2 5 AtomMaterial 6 MaterialThem 3 terminal 终端 和 pythonconsol 控制台 4 setting 设置 详细介绍 5 Ipython 的安装使用

    2026年3月18日
    1
  • linux(6)查看进程ps命令[通俗易懂]

    linux(6)查看进程ps命令[通俗易懂]ps命令Linuxps(英文全拼:processstatus)命令用于显示当前进程的状态,类似于windows的任务管理器查看所有进程ps-A显示所有进程信息,连同命令行ps-

    2022年7月29日
    12
  • Java异常处理简单实例

    Java异常处理简单实例Java异常处理异常是程序中的一些错误,但并不是所有的错误都是异常,并且错误有时候是可以避免的。比如说,你的代码少了一个分号,那么运行出来结果是提示是错误java.lang.Error;如果你用System.out.println(11/0),那么你是因为你用0做了除数,会抛出java.lang.ArithmeticException的异常。异常发生的原因有很多,通常包含以下几大…

    2022年5月12日
    49

发表回复

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

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