小程序模板语法

数据绑定

小程序的数据绑定与 Vue 极为相似

在 page -> data 中定义数据

1
2
3
4
5
page({
 data:{
  message: 'Hello World'
 }
})

使用插值表达式在页面中动态渲染定义在 data 中的数据

1
<text>{{ message }}</text>

Mustache 语法应用场景

  • 绑定内容
1
<text>{{ message }}</text>
1
2
3
4
5
page({
 data:{
  message: 'Hello World'
 }
})
  • 绑定属性
1
<image src=""/>
1
2
3
4
5
page({
 data:{
  imgSrc: 'https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png'
 }
})
  • 计算表达式
1
2
3
<text>
{{ flag ? 'true' : 'false' }}
</text>
1
2
3
4
5
page({
 data:{
  flag: true
 }
})

事件绑定

渲染层到逻辑层的通讯方式

小程序常用事件

类型 绑定方式 描述
tap bindtap or bind:tap 手指点击，相当于 HTML 中的 click 事件
input bindinput or bind:input 文本框输入事件
change bindchange or bind:change 状态改变时触发

事件对象(event) 在小程序中默认缩写为 e

bindtap

1
<button bindtap="handlerTap">点击<button/>
1
2
3
4
5
6
7
8
9
10
11
12
page({
 data: {
  num: 0
 },

 handlerTap(e) {
  this.setData({
   num: this.data.num + 1
  })
  console.log(e)
 }
})

bindinput

1
<input bindinput="handlerInput" />
1
2
3
4
5
page({
 handlerInput(e) {
  console.log(e.detail.value)
 }
})

事件对象的属性列表

属性 类型 说明
type String 事件类型
timeStamp integer 页面打开到触发事件经过的毫秒数
target Object 触发事件组件的一些属性集合
currentTarget Object 当前组件的一些属性集合
detail Object 额外的信息
touches Array 触摸事件，当前触摸点信息
changedTouches Array 触摸事件，当前发生变法的触摸点信息

target 和 currentTarget 的区别

  • target：触发事件的源头组件
  • currentTarget：当前事件的绑定组件

事件传参

在小程序中是不能在事件绑定时进行事件传参，而是通过自定义属性为事件传参

1
<button type="primary" bindtap="handlerTap" data-index="{{1}}" data-username="name">点击</button>
1
2
3
4
5
6
page({
 handlerTap(e) {
  console.log(e.target.dataset.username)
  console.log(e.target.dataset.index)
 }
})

在使用自定义属性传参时，如果参数是 Number 类型，需要使用 {{}} 进行包裹

条件渲染

用来处理组件显示与隐藏

if

控制组件是否显示

条件渲染模板传入的参数必须是一个布尔值

1
<text wx:if="{{ flag }}">男</text>
1
2
3
<text wx:if="{{ gender === 1 }}">男</text>
<text wx:elif="{{ gender === 0 }}">女</text>
<text wx:else>保密</text>

hidden

控制组件是否隐藏

1
<view hidden="{{ flag ]}}">A</view>
  • flag === true：组件隐藏
  • flag === false：组件显示

if 与 hidden 的区别

  • if：通过动态创建或移除元素，控制组件是否显示
  • hidden：通过为元素添加 dispaly: none 或 display: block 控制组件是否移除

==频繁切换时，推荐使用 hidden==

配合 <block> 标签使用条件渲染

<block> 在渲染时，不会被渲染，它只是包裹性的容器，可以使用它控制多个组件是否显示或隐藏

1
2
3
4
5
<block wx:if="{{ flag ]}}">
 <view>A</view>
 <view>B</view>
 <view>C</view>
</block>

列表渲染

通过循环数组数据渲染组件

1
2
3
4
5
<ul>
 <li wx:for="{{ array }}" wx:key="id">
  当前索引：{{ index }}；数据项：{{ item }}
 </li>
</ul>

微信小程序和 Vue 一样，在列表渲染时，都需要添加 key 来提高渲染的效率

key 的值是不需要使用 Mustache 语法包裹的，并且默认使用的就是 item 中的属性，所以是不需要使用 item.id ，而是直接使用 id

  • array：数组类型的数据
  • index：当前索引
  • item：当前数据项

自定义索引和数据项变量名

1
2
3
4
5
<ul>
 <li wx:for="{{ array }}" wx:for-index="i" wx:for-item="v" wx:key="id">
  当前索引：{{ i }}；数据项：{{ v }}
 </li>
</ul>