小程序学习笔记-视图层

视图层

视图层有wxml何wxss组成
将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

wxml :WXML（WeiXin Markup Language）是框架设计的一套标签语言

一.数据绑定

• 动态数据来源： Page({})的data:{}

• 绑定目标： Mustache 语法 {{ }}

• 作用对象： 标签内容 {{ logs }} ; 组件属性：

• Mustache 语法在微信小程序中的另一个用途： 用在关键字上： ,注意此处去掉大括号会编译为字符串，达不到目的

• 运算： 可以在{{}}中进行简易的运算，参考vue的数据绑定

    // 三目运算
    

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

    // 逻辑判断
     
    // 字符串运算
    {{"hello" + name}}
    Page({
    data:{
        name: 'MINA'
    }
    })

    // 组合运算
    
    Page({
    data: {
        a: 1,
        b: 2
    }
    })
    // 最终组合成的对象是 {for: 1, bar: 2}

    ......

二.数据渲染

1. 列表渲染

   • wx.for=”{{ arr }}”, 默认送了两个参数： {{ index }} 和 {{ item }} , 分别为数组元素下标和对应的数组元素

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

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

       
           
               
                   {{i}} * {{j}} = {{i * j}}
               
           
       
   

   • block： wx:for, 渲染一个包含多节点的块：

       
            {{index}}: 
            {{item}} 
       
   

   • wx:key ??? 取值为 this(指向for循环的item本身，并且item不会变化的)，或者string，为循环中对象的键

2. 条件渲染

   • wx:if=”{{ condition }}”

          True 
     
         也可以用 wx:elif 和 wx:else 来添加一个 else 块：
          1 
          2 
          3 
     

   • block: wx: if 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

       
            view1 
            view2 
       
   

   • wx:if 和 hidden

 1. wx: if是惰性的，只有在if条件改变时才会改变渲染，初始加载耗费性能较小，后续条件改变有更高的消耗，适合运行时条件不大可能会改变的渲染
 2. hidden始终都会保持渲染，只是切换显示和隐藏，初始加载耗费性能较多，后续影响较小，适合频繁切换显示和隐藏

三.模板：

• 定义模板：使用name属性，作为模板的名字。然后在内定义代码片段

• 使用模板：使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入（is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：）