微信小程序 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


相关推荐

  • WPS Office常用快捷键大全

    WPS Office常用快捷键大全创建新文档 Ctrl N 或者 Alt F N 对应 New 打开文档 Ctrl O 或者 Alt F O 对应 Open 关闭文档 Ctrl W 或者 Alt W C 保存当前文档 Ctrl S 或者 Alt F S 对应 Save 文档另存为 F12 或者 Alt F A 对应 SaveAs 打印文档 Ctrl P 或者 Alt F P 对应 Print

    2026年3月17日
    3
  • 全网最全 Cursor 配置指南:从入门到高效工作流!建议收藏

    全网最全 Cursor 配置指南:从入门到高效工作流!建议收藏

    2026年3月16日
    4
  • 原来酷炫的大屏,用Excel就能做

    原来酷炫的大屏,用Excel就能做前段时间用 tableau 做了可视化大屏 大家有的说说没学过 tableau 有的说不会做 但就是觉得很炫 因此 有人私聊我说用 excel 能做可视化大屏吗 当然 这是可以的 基于粉丝的这个需求 我们今天来讲述一下 怎么使用 excel 做一个简单的可视化大屏 通过本文 你将会收获如下这些知识 数据去重 excel 常用函数 数据验证 excel 常用图表 切片器 以及如何利用 excel 做数据

    2026年3月26日
    2
  • 超级P2P搜索引擎

    超级P2P搜索引擎
    搜索Google大家都用过吧?我们正是利用它强劲的搜索功能来突破封锁下载,Google搜索和限制下载有什么关系,没可能实现吧?不要不相信哦,往下看哦!

    http://www.google.com/intl/zh-CN/
    http://www.3721.com/
    http://www.baidu.com/

      首先打开Google,在关键词输入框中输入“indexof/“inurl:lib(双引号为英文状态下),选择“搜索简体中文

    2022年7月18日
    43
  • 使用git的基本流程总结

    使用git的基本流程总结之前是写在debug记录里的,因为需要经常查阅所以放在这里方便参考。总结一下要用git的步骤:设置ssh设置gitglobalgitconfig–globaluser.name”ASxx”gitconfig–globaluser.email”123456789@qq.com”vscode打开终端的快捷键:control+shift+~clone创建分支gitcheckout-bmy-test//在当前分支下创建my-test的本地分支分支git

    2026年2月17日
    3
  • 科大讯飞版“龙虾”AstronClaw上线

    科大讯飞版“龙虾”AstronClaw上线

    2026年3月14日
    1

发表回复

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

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