微信小程序page中data的数据操作和函数调用

获取data值和函数调用

Posted by Ayi on September 11, 2018

前言

今天遇到一个bug,输出一个page中data里已经定义好的值,结果是undefined了,因此感觉微信小程序的语法和vue中的稍许存在不一样,特此记录一下。

获取data数据

在vue中的js,如果要获取data中的值,则采用普通的this.变量名就可以了,但是在微信小程序中应该这么写

var src = this.data.src;
console.log(this.data.hasLocation)

我个人的总结就是微信小程序要获取data中的数据要比vue中多一个data的写法,即他的语法是this.data.变量名

设置data

主要使用setData函数,这个函数用于将数据从逻辑层发送到视图层,同时会改变对应的this.data的值

举个例子

  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }

值得注意的是

  • 直接修改this.data是无效的,无法改变页面的状态,还会造成数据不一致
  • 单次设置数据不能超过1024kb,尽量避免一次设置过多的数据
  • setData()参数格式:接受一个对象,以key-value的形式表示将this.data中的key对应的值改成value,其中key的写法很灵活,以数据路径的形式给出,比如array[2].messagea.b.c.d,并且不需要在this.data中预先定义

##函数调用

在某js页面定义了一个函数,想在本页面定义的话,直接使用this.函数名调用

举个例子

  onLoad() {
    this.getuser()
    this.initValidate()

要调用从别的js中定义的函数,先引进js,然后使用引进的js名.函数名

举个例子

uploadimg: function() {
  app.uploadimg({
	//你的操作
  })
}

因为我这里是写在app.js里的,是全局的,因此没有引用,如果不是写在全局里的话,一定要引用。