第二章-页面结构文件

          页面结构文件(WXML)是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即.wxml文件。在小程序中，类似HTML的标签被称为组件，是页面结构文件的基本组成单元。这些组件有开始(如<view>)和结束(如</view>)标志，每个组件可以设置不同的属性(如id、class等)，组件还可以嵌套。
       WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。

一：数据绑定

  小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的data进行动态绑定，在页面中显示data中的数据。小程序的数据绑定使用Mustache语法（{{}}）将变量或运算规则包起来。

   1.简单绑定

                   简单绑定是使用双大括号（{{}}）将变量包起来，在页面中直接作为字符串输出使用。简单绑定可以作用于内容，组件属性，控制属性等的输出。

pp.wxml

<view>{{name}}</view>
<imagesrc="{{img}}"></imagesrc>
<view wx:if="{{sex}}">男</view>
page({
  data:{
    name:'/wk'
    img:'/index/yy.png'
    sex:true
  },
})

2.运算

       在{{}}内可以做一些简单的运算（主要有算术运算，逻辑运算，三元运算，字符串运算等），这些运算都符合JavaScript运算规则

<view>算数运算:{{age + 100}}</view>  
<view>逻辑运算:{{age == 40}}</view>  
<view>三元运算:{{age == 1 ? 3 : 100}}</view>  
  
<view wx:if="{{age > 40}}">1</view>  
<view wx:elif="{{age == 40}}">2</view>  
<view wx:else>3</view>

运行结果

二：条件数据绑定

         条件数据绑定就是根据绑定表达式的逻辑值来判断是否绑定当前组件

1.wx:if条件数据绑定

            wx:if条件数据绑定是指使用wx:if这个属性来判断 是否绑定当前组件

<view wx:if="{{conditon}}">内容</view>

            在上面的代码，当condition变量的值为true时，view组件将数据绑定输出相关内容；当condition变量的值为false时，view组件将不数据绑定

            当需要添加多个分支块的时，可以使用wx.elif,wx:else属性，当控制表达式为true时，数据绑定一个分支，当控制表达式false时，绑定另一个分支

<view wx:if="{{x>0}}">1</view>
<view wx:elif="{{x==0}}">0</view>
<view wx:else>-1</view>

2.block  wx:if条件数据绑定 

           当需要通过一个表达式去控制通过多个组件时，可以通过<block>将多个组件包起来，然后在<block>中添加wx:if属性

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

三：列表数据绑定

             列表数据绑定用于将列表中的各项数据进行重复数据绑定

1.wx:for
          在组件上，可以使用wx:for控制属性绑定一个数组，将数据中的各项数据循环进行数
绑定到该组件，格式如下： 

<block wx:if="{{items}}">
    {{index}}:{{item}}
</view>

       在上面的代码中，items为一个数组，数组当前项的下标变量名默认为index，数组当
项的变量名默认为item，示例代码如下：

page({  
  data: {  
    student: [  
      {name: 'Tom', age: 15, hobby: 'game'},  
      {name: 'Helen', age: 14, hobby: 'music'}, // 在这里添加了逗号  
      {name: 'Bob', age: 16, hobby: 'basketball'},  
    ]  
  }  
})

page({
  data:{
    name:'/wk'
    img:'/index/yy.png'
    sex:true
  },
})
<view wx:for="{{student}}">
      <text>{{index}}--{{item.age}}--{{item.age}}--{{item.hobby}}</text>
      </view>>

2.block wx:for

           与block wx:if类似，在wxml中也可以使用<block>包装多个组件进行列例如，上面的代码可以被修改为以下形式，效果不变：