WXMＬ模板语法

数据绑定

数据绑定基本原则：

1. 在data中定义数据
2. 在WXML中使用数据

在data中定义页面的数据

在页面对应的.js文件中，把数据定义到data对象中即可：

Page({
  data: {
    //字符串类型的数据
    info:'init data',
    //数组类型的数据
    msgList:[{msg:'hello'},{msg:'world'}]
  },
})

Mustache语法的格式

把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。

主要应用场景：

• 绑定内容
• 绑定属性
• 运算（三元运算、算术运算等）

动态绑定内容

<view>{{要绑定的数据名称}}</view>

动态绑定属性

页面的数据如下：

Page({
  data: {
    imgSrc:'/images/1.png'
  },
})  

页面的结构如下：

<image src="{{imgSrc}}">

三元运算

算数运算

页面的数据如下：

Page({
  data: {
    randomNum2:Math.random().toFixed(2),
  },
})

页面的结构如下：

<view>{{randomNum2 * 100}}</view>

事件绑定

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

小程序中常用的事件

事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象event，它的详细属性如下表所示：

target和currentTarger的区别

target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件。

点击内部的按钮时，点击事件以冒泡的方式向外扩撒，也会触发外层view的tap事件处理函数。

此时，对于外层的view来说：

• e.target指向的是触发事件的源头组件，因此，e.target是内部的按钮组件
• e.currentTarget指向的是当前正在触发事件的哪个组件，因此，e.currentTarget是当前的view组件

bindtap的语法格式

在小程序中，不存在HTML中的onclick鼠标点击事件，而是通过tap事件来相应用户的触摸行为。

1. 通过bindtap，可以为组件绑定tap触摸事件，语法格式如下：

<button type="primary" bindtap="btnTapHandler">按钮</button>

2. 在页面的.js文件中定义对应的事件处理函数，事件参数通过形参event（一般简写e）来接收：

Page({
  btnTapHandler(e){ //按钮的tap事件处理函数
    console.log(e) //事件参数对象e
  }
})

在事件处理函数中为data中的数据赋值

通过调用this.seData(dataObject)方法，可以给页面data中的数据重新赋值，示例如下：

Page({
  data:{
    count:0
  },
  //修改count的值
  changeCount(){
    this.setData({
      count:this.data.count+1
    })
  }
})

页面结构：

<button type="primary" bindtap="changeCount">+1</button>

事件传参

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。例如，下面的代码将不能正常工作：

<button type="primary" bindtap="btnTapHandler(123">事件传参</button>

因为小程序会把bindtap的属性值，统一当作事件名称来处理，相当于要调用一个名称为btnHandler(123)的事件处理函数。

可以为组件提供data-参数名字自定义属性传参，示例如下：

<button bindtap="btnHandler" data-info="{{2}}">事件传参</button>

最终：

• info会被解析为参数的名字
• 数值2会被解析为参数的值

在事件处理函数中，通过event.target.dataset.参数名即可获取到具体参数值。

  btnHandler(e){
    console.log(e.target.dataset);
    console.log(e.target.dataset.info);
  }

传参并且count自增加2

  btnHandler(e){
    this.setData({
      count:this.data.count+e.target.dataset.info
    })
  }

bindinput的语法格式

在小程序中，通过input事件来响应文本框的输入事件，语法格式如下：

1. 通过bindinput，可以为文本框绑定输入事件：

<input bindinput="inputHandler"/>

2. 在页面的.js文件中定义事件处理函数：

  inputHandler(e){
    //e.detail.value是变化过后，文本框最新的值
    console.log(e.detail.value);
  }

实现文本框和data之间的数据同步

实现步骤：

1. 定义数据

Page({ 
  data:{
    msg:'你好，'
  },
})  

2. 渲染结构

<input value="{{msg}}" bindinput="iptHandler"/>

3. 美化样式

input{
  border: 1px solid #eee;
  padding: 5px;
  margin: 5px;
  border-radius: 3px;
}

4. 绑定input事件处理函数

  iptHandler(e){
    this.setData({
      msg:e.detail.value
    })
  }

条件渲染

wx:if

在小程序中，使用wx:if="{condition}"来判断是否需要渲染该代码块：

<view wx:if="{{condition}}">
  True
</view>

也可以用wx:elif和wx:else来添加else判断：

<view wx:if="{{type===1}}">
  男
</view>
<view wx:elif="{{type===2}}">
  女
</view>
<view wx:else>
 保密
</view>

结合<block>使用wx:if

如果要一次性控制多个组件的展示与隐藏，可以使用一个<block></block> 标签将多个组件包装起来，并在<block>标签上使用wx:if控制属性，示例如下：

<block wx:if="{{true}}">
  <view>
    view1
  </view>
  <view>
    view2
  </view>
</block>

注意：block并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。

hidden

在小程序中，直接使用hidden="{{condition}}"也能控制元素的显示与隐藏。

<view hidden="{{condition}}">
  条件为true的时候隐藏元素，否则显示
</view>

wx:if与hidden的对比

运行方式不同

• wx:if以动态创建和移除元素的方式，控制元素的展示与隐藏
• hidden以切换样式的方式（display:none/block），控制元素的显示与隐藏

使用建议

• 频繁切换时，建议使用hidden
• 控制条件复杂时，建议使用wx:if搭配wx:elif、wx:else进行展示与隐藏的切换

列表渲染

wx:for

通过wx:for可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：

<view wx:for="{{array}}">
  索引是：{{index}} 当前项是：{{item}}
</view>

默认情况下，当前循环项的索引用index表示，当前循环项用item表示。

页面数据：

  data:{
    arr1:['苹果','华为','小米']
  },

页面结构：

<view wx:for="{{arr1}}">
  索引是：{{index}} 当前项是：{{item}}
</view>

手动指定索引和当前项的变量名

• 使用wx:for-index可以指定当前循环项的索引的变量名
• 使用wx:for-item可以指定当前项的变量名

示例代码如下：

<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="name">
  索引是：{{idx}}当前项是{{name}}
</view>

wx:key

类似于Vue列表渲染中的:key，小程序在实现列表渲染时，也建议为渲染出的列表项指定唯一的key值，从而提高渲染的效率，示例代码如下：

页面数据：

    userList:[
      {id:1,name:'小红'},
      {id:2,name:'小兰'},
      {id:3,name:'小分'},
    ]

页面结构：

<view wx:for="{{userList}}" wx:key="id">
  {{item.name}}
</view>

WXSS模板样式

WXSS（WeiXin Style Sheets）是一套样式语言，用于美化WXML的组件样式，类似于网页开发中的CSS。

WXSS和CSS的关系

WXSS具有CSS大部分特性，同时，wxss还对css进行了扩充以及修改，以适应微信小程序的开发。

与css相比，wxss扩展的特性有：

• rpx尺寸单位
• @import样式导入

rpx尺寸单位

rpx是微信小程序独有的，用来解决屏适配的尺寸单位。

实现原理

rpx的实现原理非常简单，鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份（即：当前屏幕的总宽度为750rpx）

• 在较小的设备上，1rpx所代表的宽度较小
• 在较大的设备上，1rpx所代表的宽度较大

小程序在不同设备上运行的时候，会自动把rpx的样式单位换算程对应的像素单位来渲染，从而实现屏幕适配。

rpx与px之间的单位换算

在iPhone6上，屏幕宽度为375px，供分为750份，也就是750rpx，

则：750rpx=375px 所以 1rpx=0.5px

官方建议：开发小程序时，设计师可以用iPhone6作为视觉稿的标准。

样式导入

使用WXSS提供的@import语法，可以导入外联的样式表。

语法格式：

@import后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。

导入：

/**index.wxss**/
@import "/common/common.wxss";

全局样式和局部样式

全局样式：定义在app.wxss中的样式为全局样式，作用于每一个页面。

局部样式：在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面。

注意：

1. 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式。
2. 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式。