微信小程序学习笔记（三）

4.1 语法

WXML是框架设计的标签语言类似HTML，结合组件，系统，构建出页面的结构

4.1.1数据的绑定

Normal写法

<view>{{message}}</view>

Page({
    data:{
        data:{
            massage:'Hello World!'
        }
    }
})

组件属性

<view id="item-{{id}}"></view>

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

布尔类型

<checkbox checked="{{true}}"></checkbox>

4.1.2运算

三元运算

<view hidden="{{flag ? true:false}}>Hidden</view>

算数运算

<view>{{ a + b }} + {{c}} + d </view>

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

字符串运算

<view>{{"hello"+ words}}</view>

Page({
    data:{
        words: 'World'
    }
})

4.1.3条件渲染

• wx:if

  <view wx:if="{{false}}">1</view>
  <view wx:elif="{{true}}">2</view>
  <view wx:else>3</view>

• hidden

<view hidden="{{condition}}"> True </view>

4.1.4列表渲染

• wx:for
• 项的变量名默认为 item wx:for–item 可以指定数组当前元素的变量名
• 下标变量名默认为 index wx:for–index 可以指定数组当前下标的变量名

string 类型，表⽰ 循环项中的唯⼀属性 如

list:[{id:0,name:"学习"},{id:1,name:"编程"}]
wx:key="id"

**保留字 this ，它的意思是 item 本⾝ ，this 代表的必须是 唯⼀的字符串和数组

list:[1,2,3,4,5]
wx:key="*this"

• wx:key ⽤来提⾼数组渲染的性能
• wx:key 绑定的值 有如下选择

<view wx:for="{{array}}" wx:key="id">
 {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      id:0,
      message: 'foo',
   }, {
      id:1,
      message: 'bar'
   }]
 }
})

• block渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素

<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>