微信小程序学习笔记1.1

1.5 微信小程序视图层

微信小程序框架的视图层用WXML 和WXSS 编写，由组件来进行展示。将逻辑层的数据在视图层中进行渲染，同时将视图层的事件发送给逻辑层。

WXML（WeiXin Markup Language）用于描述页面的结构，

WXSS（WeiXin Style Sheet）用于描述页面的样式，

组件（Component）是视图的基本组成单元。

1.5.1 绑定数据

通过双大括号（{{}}）将变量包起来，在WXML页面中将数据值显示出来。

WXML页面中的动态数据都是来自．js文件Page下的data。

    index.wxml
     {{ message }} 

    index..js
    Page({
      data: {
        message: 'Hello MINA!'
      }
    })

1.组件属性绑定

将data中的数据绑定到微信小程序的组件上。

     
    Page({
      data: {
        id: 0
      }
    })

2.控制属性绑定

用来进行if语句条件判断，如果满足条件，则执行，否则不执行

     
    Page({
      data: {
        condition: true
      }
    })

3.关键字绑定

常用于组件的一些关键字。

像复选框组件，checked关键字如果等于true，则代表复选框选中，false代表不选中复选框

不要直接写成checked="false"，否则其计算结果是一个字符串，转成boolean 类型后代表真值。

4.运算

在{{}} 内可以进行简单的运算，主要支持以下几种方式的运算：

        1.三元运算

         2.数学运算

     {{a + b}} + {{c}} + d 
    Page({
      data: {
        a: 1,
        b: 2,
        c: 3
      }
    })

view中的显示内容为3+3+d

        3.逻辑判断

        4.字符串运算

{{"hello"+name}}
Page({
    data:{
        name:'MINA'
    }
})

        5.数据路径运算

    {{object.key}} {{array[0]}}
    Page({
      data: {
        object: {
          key: 'Hello'
        },
        array: ['MINA']
      }
    })

1.5.2 条件渲染

1.wx:if判断单个组件

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

     True 

使用wx:elif 和wx:else 来添加一个else 块

     1 
     2 
     3 

2.block wx:if判断多个组件

wx:if 是一个控制属性，需要将它添加到一个标签上。

如果想一次性判断多个组件标签，可以使用 标签将多个组件包起来，并在中使用wx:if 控制属性

    
       view1 
       view2 
    

注： 并不是一个组件，其仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性

1.5.3列表渲染

1．wx:for 列表渲染单个组件

在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组当前项的下标变量名为index，数组当前项的变量名为item

    
      {{index}}: {{item.message}}
    
    Page({
      data: {
        array: [{
          message: 'foo',
        }, {
          message: 'bar'
        }]
      }
    })

使用wx:for-item 可以指定数组当前元素的变量名，使用wx:for-index 可以指定数组当前项下标的变量名

    
      {{idx}}: {{itemName.message}}
    

2．block wx:for 列表渲染多个组件

渲染一个包含多节点的结构块，wx:for需要应用在标签上

    
       {{index}}: 
       {{item}} 
    

3．wx:key 指定唯一标识符

如果列表中项目的位置会动态改变或有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态，需要使用wx:key 来指定列表中项目的唯一标识符。

wx:key 的值可以两种形式表示：

        1.字符串：代表在for循环的array中item的某个属性，该属性的值需要是列表中唯一的字符串或数字，且不能动态改变。

        2.保留关键字：*this 代表在for循环中的item本身，这种表示需要item本身是唯一的字符串或数字。当数据改变触发渲染层重新渲染的时候，会校正带有关键字的组件，框架会确保它们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

     {{item.id}} 
    Page({
      data: {
        objectArray: [
          {id: 5, unique: 'unique_5'},
          {id: 4, unique: 'unique_4'},
          {id: 3, unique: 'unique_3'},
          {id: 2, unique: 'unique_2'},
          {id: 1, unique: 'unique_1'},
          {id: 0, unique: 'unique_0'},
        ]
      }
    }

注意：若不提供wx:key，会提示警告。如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

1.5.4 定义模板

WXML提供模板（template）功能，允许将一些共用的、复用的代码在模板中定义成代码片段，然后在不同的地方调用，以达到一次编写，多次直接使用的效果。 

1.定义模板

在