微信小程序动态设置/获取值与属性

  这两天在公司做微信小程序，也是刚刚入手，遇到了很多的坑，和大家分享一下。

  首先微信小程序不像普通的页面一样，获取属性啊什么的需要你去操作节点，在小程序里你就是去对这个页面的data进行一系列的操作，然后通过data来反映到页面上。

  1.设置data与使用data

  wxml代码：

<!--index.wxml-->

<view class="container" style='color:{{color}}'>

{{motto}}

</view>

js代码：

Page({
  data: {
    motto: 'Hello World',
    color:'red'
  },
})

截图：

这是最简单的使用流程。

2.通过js获取与设置data的值

js代码：

Page({
  data: {
    motto: 'Hello World',
    color:'red'
  },
  onLoad: function () {
    console.log(this.data.motto)
    this.setData({
      motto:'hello hadar'
    })
  },
})

截图：

这里需要注意一下，设置值的时候只能用setData， 不能this.data.motto=‘xxxxx’ ，通过这样设置的data，确实修改了值，但是不会反应到wxml页面中去。

错误示范：

3.当多个元素调用相同的函数对相对应的数据进行处理

比如说，我有三个input，我需要失去其焦点的时候，保存对应输入的数据到data中，可不能傻傻的去写三个函数吧。

wxml代码：

<input data-id='input1' bindblur='moveTo'></input>
<input data-id='input2' bindblur='moveTo'></input>
<input data-id='input3' bindblur='moveTo'></input>

这里需要用到data-xx 来标识当前的元素。

js代码：

Page({
  data: {
    motto: 'Hello World',
    color:'red'
  },
  moveTo:function(e){
    console.log(e)
    var x={}
    x[e.currentTarget.dataset.id]=e.detail.value
    this.setData(x)
    console.log(this.data)
  }
})

这里值得一提的是在setData之前创建一个对象，将需要保存的参数与参数值先传入进去，不然在setData中是无法使用变量来对参数名进行操作的。这在request中对data进行遍历的时候也会常常用到。切记在setdata之前把对象拼接好。

运行截图：

4.点击一个元素对另一个元素进行一定的操作

  wxml：

<input data-id='input1'  hidden='{{hidden}}' ></input>
<input data-id='input2'  bindtap='show'></input>

js：

Page({
  data: {
    motto: 'Hello World',
    color:'red',
    hidden:''
  },
  show:function(){
    this.setData({
      hidden:'true'
    })
  }
})

用法还有很多，这里也就举几个例子，大家如果有什么更好的方法欢迎留言交流。

最后再提一下，很多时候会在函数内部调用一些方法，这时候一定要注意this对应着谁。最好在开始定义一个var that=this，先把this保存下来，避免发生错误。