微信小程序 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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Java学习路线图(2020最新版)

    Java学习路线图(2020最新版)第一阶段:Java基础学习任何一门编程语言,首先要学习的是基础语法,开启Java学习的第一步,当然就是深入掌握计算机基础、编程基础语法,面向对象,集合、IO流、线程、并发、异常及网络编程,这些我们称之为JavaSE基础。当你掌握了这些内容之后,你就可以做出诸如:电脑上安装的迅雷下载软件、QQ聊天客户端、考勤管理系统等桌面端软件。第二阶段:数据库互联网最具价值的是数据,任何编程语言都需要解决数据存储问题,而数据存储的关键技术是数据库。MySQL和Oracle都是广受企业欢迎的数据库管理系统。Java

    2022年5月13日
    60
  • [ 工具篇 ] 谷歌安装 hackbar (超级详细)

    [ 工具篇 ] 谷歌安装 hackbar (超级详细)harkbar

    2022年5月7日
    275
  • HTTP协议之:报文详解

    HTTP协议之:报文详解超文本传输协议(HTTP,HyperTextTransferProtocol)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。HTTP协议的主要特点支持客户/服务器模式。简单快速:客户向服务器请求服务时,只需传送请求方法和路径。灵活:HTTP允许传输任意类型的数据对象。正在传输的类型由Content

    2022年7月15日
    14
  • dategrip激活码【2021最新】

    (dategrip激活码)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

    2022年3月22日
    54
  • pycharm多行代码同时注释、去除注释_解除注释的快捷键

    pycharm多行代码同时注释、去除注释_解除注释的快捷键1.单行多行注释快捷键:ctrl+/2.取消单行多行注释快捷键:ctrl+/

    2022年8月29日
    2
  • 如何实现 MySQL 删除重复记录并且只保留一条

    点击上方“全栈程序员社区”,星标公众号 重磅干货,第一时间送达 作者:千g blog.csdn.net/n950814abc/article/details/82284838 最近…

    2021年6月26日
    68

发表回复

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

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