微信小程序小记

1、列表循环渲染

• wx:for="{{数组或者对象}}" wx:for-item=“循环项的名称” wx:for-index=“循环项的索引”
• wx:key = “唯一的值” 用来提高列表渲染的性能
  • wx:key 绑定一个普通的字符串的时候，那么这个字符串的名称肯定是循环数组中的对象的唯一属性
  • wx:key = “*this” 就表示你的数组是一个普通的数组 *this表示的是循环项 例如:[1,2,3,4,5]
• 当出现数组的循环嵌套的时候，要注意以下绑定的名称不要重名
  • wx:for-item = “item” wx:for-index = “index”
• 默认情况下(只有一层循环的时候)可以不写这两项 直接使用item和index 即可

2、对象循环渲染

对象的渲染与数组基本一致区别就是一般将item和index换成key和value

3、条件渲染

• wx:if

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

• hidden

//注意hidden的值是false的时候才会显示
<view hidden = "{{condition}}">True</view>

• 两者的异同(类似于v-if和v-show)
  频繁切换的时候用hidden、不经常使用wx:if
  hidden控制的是标签的属性display：none/block wx:if操作的是DOM元素

4、block标签

• 渲染一个包含多节点的结构快，但是不会渲染为DOM元素(类似于VUE中的template标签)

5、事件绑定事件

1. 在输入框中输入内容的时候触发

• bindinput = “函数名称”
• 通过e.detail.value拿到输入框中的值
• 把输入框中的值赋值到data中 不能够使用1. this.data.num = e.detail.value 2. this.num = e.detail.value 要使用this.setData({num:e.detail.value})

2. 点击事件

• bindtap = “函数名称”
• 不可以在函数名称的后面加小括号直接传递参数
• 只能使用自定义属性的方式传递参数
• 在获取参数的时候通过事件对象(e)中取值