微信小程序入门（二）

wxml数据绑定
基本概念
WXML 中的动态数据均来自对应 Page 的 data。

使用方法
数据绑定在wxml模板中使用 双大括号 {{}} 将变量包起来

在组件属性中绑定数据
在组件的属性中绑定数据需要在双引号中使用大括号

// js
Page({
  data: {
    id: "index"
  }
})

// wxml
<view id="{{id}}"></view>

列表渲染
重点概念
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

// wxml
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

// js
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

wx:key的使用

// wxml
<view wx:for="{{array}}" wx:key="{{index}}">
  {{index}}: {{item.message}}
</view>

for循环嵌套
当for循环嵌套时候，会造成index和item冲突，这时候需要用到以下两个属性：

• 使用 wx:for-item 可以指定数组当前元素的变量名，
• 使用 wx:for-index 可以指定数组当前下标的变量名

<view wx:for="{{array}}" wx:for-index="subIndex" wx:for-item="subItem">
  {{subIndex}}: {{subItem.message}}
</view>

条件渲染

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

事件绑定

- 点击事件 bindtap
- 表单input监听输入事件 bindinput

点击事件 bindtap
bindtap类似于html的onClick事件

<view bindtap="tabClick"> Click me! </view>

事件对象event

Page({
  tabClick: function(event) {
    console.log(event)
  }
})

获取事件参数

// wxml
<view bindtap="tabClick" data-name="myName"> Click me! </view>

// js
Page({
  tabClick: function(event) {
    const data = event.currentTarget.dataset;
    console.log(data)
    console.log(data.name)
  }
})

input监听输入事件 bindinput

// wxml
<input  bindinput="bindKeyInput" placeholder="输入同步到view中"/>

// js
Page({
  bindKeyInput: function(event) {
    console.log(event.detail);
    console.log(event.detail.value);
  },
})

注意： 小程序所有的事件获取参数都是上例的bindtap中的一样，通过data-*来绑定

修改page中data的值

// wxml
<view>{{text}}</view>
<button bindtap="changeText"> 
    修改 
</button>

// js
Page({
  data: {
    text: '默认的文字',
  },

  changeText: function() {
    // 错误使用： this.data.text = '修改后的文字'
    this.setData({
      text: '修改后的文字'
    })
  },
}

this指向问题

Page({
    data: {
        text: "默认的文字"
    },
    changeText: function(){
        const that = this;
        setTimeout(function(){
            that.setData({
                text: "修改后的文字"
            })
        },2000)
    }
})

注意：

• 切记不要使用this.data.* = ""的方式修改data的值，一定要是this.setData
• 请不要把 data 中属性的值设为 undefined