WXML模板语法

1.数据绑定

①在js-data中定义数据

②在WXML中使用数据

（此后不再详细解释具体代码对应哪个文件，默认上方为WXML。下方为JS或WXSS等，请仔细分辨）

Mustache语法的三种作用：

动态绑定内容：

<view>传递的值为：{{number1}}</view>

Page({
  data: {
    number1:7,
  },

动态绑定属性：

<image src="{{img}}"></image>


Page({
  data: {
    img: "xxxx/xx.png"
  },

三元运算：

<view>{{rnumber > 5 ? '该随机数大于5' : '该随机数小于5'}}</view>

Page({
  data: {
    rnumber : Math.random() * 10
  },

算术运算：

<view>乘于100后的数字为{{rnumber *100}}</view>

Page({
  data: {
    rnumber  : Math.random().toFixed(2) *  10
  },

2.事件绑定、事件传参和数据同步

        事件是指渲染层到逻辑层之间的通讯方式，通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。小程序中常用的事件有：tap，input，change。

        当事件回调触发时，会收到一个事件对象event，主要属性有：

        type：事件的类型

        target：触发事件的组件的一系列属性值集合

        detail：额外的信息

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

 

        点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数。此时，对于外层的view来说:
e.target 指向的是触发事件的源头组件，因此，e.target是内部的按钮组件
e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget是当前的view 组件

通过bindtap属性来绑定js文件中对应的触发器实现对应的功能。

通过this.setData()方法来为Data中的数据赋新值。

通过属性data-name="{{x}}"可以进行传递参数，js中需用this.target.dataset.name来接收.

（以上三条详情见1中button按钮处）

        bindinput语法格式

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

①通过bindinput，可以为文本框绑定输入事件
②在页面的.js 文件中定义事件处理函数
运行时如果出现事件警告就重新编译！

<input bindinput="ipt"></input>

ipt(e){
  console.log(e.detail.value)
},

        例：实现文本框与data数据的同步：

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

Page({
  data: {
    msg:"你好！"
  },
ipt(e){
  this.setData({
    msg : e.detail.value
  })
},

<!--以下为美化代码-->
input{
  border: solid 1px lightskyblue;
  background-color: lightskyblue;
}

3.条件渲染

在小程序中，可以使用wx:if,wx:elif,wx:else来判断是否进行渲染

例：通过判断sex值来显示性别

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

Page({
  data: {
    sex:3
  },

还可结合block标签一次进行多个view的显示与隐藏：

<block wx:if="{{flag}}">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</block>

Page({
  data: {
    flag:true
  },

注意：block标签并不是一个组件，而是仅为一个包裹性容器，不会有任何的渲染。

在小程序中，也可通过hidden="{{ condition }}"来控制显示与隐藏

<view hidden="{{flag}}">为假时不会显示</view>

Page({
  data: {
    flag:true
  },

wx:if 与hidden的对比
①运行方式不同
wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏，
hidden以切换样式的方式(display: none/block; )，控制元素的显示与隐藏。

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

4.列表渲染

通过wx:for可以根据指定的数组，循环渲染重复组件的结构

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

<view wx:for="{{array1}}">
当前索引为:{{index}},当前项为:{{item}}
</view>

Page({
  data: {
    array1: ["苹果","小米","华为"]
  },

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

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

Page({
  data: {
    userlist:[
      {id:1,name:"小明"},
      {id:2,name:"小红"},
      {id:3,name:"小刚"}
    ]
  },