微信小程序--data的赋值与取值的几种方式

目录

 

通过小程序官方文档可知(传递单个值):

传递数组:

微信小程序 跳转传参数 传对象


通过小程序官方文档可知:

 

Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。其中的参数data用来设置初始数据,WXML 中的动态数据均来自对应 Page 的 data。

所以如果页面需要显示动态数据必须要把数据更新到data中对应的变量中。

  • 页面js文件中这么写:
Page({
  data: {
    message: 'Hello MINA!'
  }
})
  • wxml中这么写:
<view> {{ message }} </view>

如果该数据在操作过程中发生变化,需要将新数据重新绑定到该变量中,写法如下:

function setData(){
    var that = this;
    that.setData({
      message: '新消息'
    })
}

 

  • 如果想在js文件中使用data中的数据写法如下:
function getData(){
    var that = this;
    console.log(that.data.message)
}

 

 

传递数组:

其他数据格式暂时不知道,我的数据主要是对象数组格式,传递的时候总是获取不到数据。所以网上找了好多没有具体方案。自己写了一下。仅供参考!

arraylist2 是一个数组,数据格式是[{"id",1},{"content","我的"}]

格式差不多就是这样 然后将它JSON.stringify()传递一下
 

wx.navigateTo({
      url:'../textcontent/textcontent?arraylist2=' + JSON.stringify(that.data.arraylist2), 
           success:function(res) {
             console.log("成功回调",res);

            },      
            fail : function(res){
              console.log("失败回调",res);
            }
    
  })

在下一个页面 获取值然后JSON.aprse()转换成json对象

data: {
    arraylist:""
  },

  onLoad: function (options) {
    console.log("options", options.arraylist2.title);
    //var array = options.arraylist2.split(",");
    var array = JSON.parse(options.arraylist2);
    this.setData({ 
      arraylist: array
    }) 
    console.log("arraylist", this.data.arraylist);

  },

在需要数据的页面就可以获取{{arraylist.title}}

<view class="t-bg tx-l uinn" style='text-indent:40rpx;'>{{arraylist.title}}</view>


<view class="t-gra tx-l uinn  ulh-a" style='text-indent:40rpx;'>{{arraylist.content}}</view>

 

微信小程序 跳转传参数 传对象

微信小程序跳转传参

一般都是传字符串到下一页,如果要想传对象怎么办呢?

我的解决办法是先将对象转换为json字符串然后到下个页面将json字符串,再转化为对象。如下:

 

let str=JSON.stringify(e.currentTarget.dataset.item);
wx.navigateTo({
url: '../toMybaby/babyDetail/babyDetail?jsonStr='+str,
success: function (res) {
// success
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})

 

onLoad:function(options){
    // 生命周期函数--监听页面加载
    let item=JSON.parse(options.jsonStr);
    this.setData({ward:item});
  },

借鉴:https://blog.csdn.net/chq1988/article/details/74625741https://blog.csdn.net/qq_38026437/article/details/80522140

  • 15
    点赞
  • 77
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
微信小程序是一种基于微信平台的应用的开发模式,可以快速的开发出符合用户需求的小程序。在小程序的开发,组件是一个非常重要的概念,通过组件可以实现复用性和模块化编程思想。 组件应用是小程序开发的基础。通过组件可以将某一模块化并封装起来,使得组件可以在不同的页面间得到复用,大大提升了开发效率并减少了代码冗余。微信小程序提供了丰富的自带组件,包括文本、图片、按钮、输入框等等,开发者也可以自己开发组件来满足自己的需求。实际开发,通过组件可以快速搭建页面框架和业务逻辑。 Demo是一个演示小程序的示例程序。在小程序的实际开发过程,一个好的Demo非常重要。通过Demo,开发人员可以更深入的了解小程序的开发流程、组件的应用和实际的业务开发等等。在Demo,通常会包括小程序的一些基础操作,如页面跳转、数据绑定、组件的使用等。而在实际开发,Demo还会包括一些复杂的业务场景,如支付、登录、数据列表展示等等。Demo不仅为开发者提供了学习和实践的机会,也方便了使用者了解该小程序的功能和特点。 总之,微信小程序组件的应用和Demo的开发都是小程序开发过程非常重要的两个部分。良好的组件应用和精心设计的Demo,可以在极短的时间内实现小程序开发。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

dayaoK

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值