从入门到放弃:微信小程序入门个人指南Day 5

1. 数据绑定:wxml中的动态数据均是来自对应js文件中page的data.在js中访问pahe的data用this.data,改变data中某个属性的值用setData()方法.
        1.1简单绑定:数据绑定使用Mustache语法(双大括号)将变量抱起来,可以作用与以下区域:
        (1)作用于内容:
            wxml:<view>{{message}}</view>4
            js:Page({
                  data:{
                  message:"hello world"
                  }
            })

        (2)作用于组件的属性
            wxml:<view id="item-{{id}}"></view>
            js:Page({
                  data:{
                  id:0
                  }
            })

        (3)作用于控制属性
            wxml:<view wx:if="{{condition}}"></view>
            js:Page({
                  data:{
                  condition:true
                  }
            })

    2. 运算
        (1)三元运算
            <view hidden="{{true ? true :false}}">Hidden</view>
        (2)算数运算
            wxml:<view>{{a+b}}+{{c}}+d</view>
            js:Page({
                  data:{
                      a=1,
                      b=2,
                      c=3
                  }
            })
        (3)逻辑判断
            <viwe wx:if="{{length >5}}"></viwe>

        (4)字符串运算
            wxml:<view>{{"hello"+name}}</view>
            js:Page({
                  data:{
                      name:"world"
                  }
            })

    3. 组合:可以在Mustache内直接进行组合,构成新的对象或者数组
        (1)数组组合
            wxml:<view>{{[zero,1,2,3,4]}}</view>
                js:Page({
                      data:{
                          zero:0
                      }
                })

        (2)对象组合
            wxml:<template is="objectCombine" data="{{for:a,bar:b}}"></template>
            js:Page({
                  data:{
                      a:1,
                      b:2
                  }
            })

            可以用...扩展运算符来将一个对象展开

    4. 条件渲染 
        (1)wx:if:在框架中,我们用wx:if="{{condition}}"来判断是否需要渲染该代码
        (2)block wx:if:判断多个属性可以使用<block>标签将多个组件包装起来,并在上边使用wx:if控制属性

    5. 列表渲染
        wx:for:在组件上使用控制属性绑定一个数组,即可使用数组中各项数据重复渲染该组件,默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item
            <view wx:for="{{items}}">
                {{index}}:{{item.message}}
            </view>

            page({
                data:{
                    items:[{
                        message:"foo"
                    },{
                        message:"age"
                    }]
                }
            })

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

 

wxml.js

Page({
  data: {
    message:"hello world",
    message2: {
      abc:'123'
    },
    id:0,
    condition:true,
    flag:2,
    a:1,
    b:2,
    c:3,
    length:5,
    name:"world",
    zero:0,
    obj1:{
      a:1,
      b:2,
      c:3
    }, 
    obj2: {
      a: 1,
      b: 2,
      c: 3
    },
    items: [{
      message: "foo"
    }, {
      message: "age"
    }]
  },
  switchCondition:function(e){
    this.setData
  }
})

WXML.wxml

<view class="container">
  <text>简单绑定</text>
  <view>{{message}}</view>
  <view>{{message2.abc}}</view>
  <text>组件属性</text>
  <view id='item-{{id}}'>通过调试器查看该属性</view>
  <text>控制属性</text>
  <text bindtap='switchCondition'></text>
  <view wx:if="{{condition}}">condition为true显示</view>
  <text>三元运算</text>
  <view hidden='{{flag==1 ? true:false}}'>{{flag}}</view>
  <text>算数运算</text>
  <view>{{a + b}} + {{c}} + d</view>
  <text>逻辑判断</text>
  <view wx:if="{{length>5}}">{{length}}</view>
  <text>字符串判断</text>
  <view>{{"hello "+name}}</view>
  <text>数组组合</text>
  <view wx:for="{{[zero,1,2,3,4]}}">{{item}}</view>
  
  <template name="objectCombine1">
    <view>
      <text>{{for}}</text>
      <text>{{bar}}</text>
    </view>
  </template>
  <template name="objectCombine2">
    <view>
      <text>{{a}}</text>
      <text>{{b}}</text>
      <text>{{c}}</text>
    </view>
  </template>
  <text>对象组合</text>
  <template is="objectCombine1" data="{{for:a,bar:b}}"></template>
  <text>对象展开</text>
  <template is="objectCombine2" data="{{...obj1,...obj2}}"></template>
  <text>条件渲染</text>
  <view wx:if="{{length>5}}">1</view>
  <view wx:elif="{{length>5}}">2</view>
  <view wx:else>3</view>
  <block wx:if="{{true}}">
    <text>123</text>
    <text>456</text>
  </block>
  <text>列表渲染</text>
  <view wx:for="{{items}}">
    {{index}}:{{item.message}}
  </view>
  <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
    <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">
      <view wx:if="{{i <=j}}">
        {{i}}*{{j}}={{i*j}}
      </view>
    </view>
  </view>
</view>