【微信小程序】wxml模板

数据绑定

<!-- index.wxml -->
<view >
    <text >hello,</text>
    <text data-title="{{title}}">{{name}}</text>
    <view >{{"welcome " + name}}</view>
</view>

// index.js
Page({
    data:{
        name:"Nicholas",
        title:"名字"
    }
})

条件渲染

• wx:if="{{}}" | wx:else

<!-- index.wxml -->
<view >
    <view wx:if="{{num>50}}">{{num}}大于50</view>
    <view wx:else>{{num}}小于等于50</view>
</view>

// index.js
Page({
    data:{
        num:Math.floor(Math.random()*100+1)
    }
})

• wx:if="{{}}" | wx:elif="{{}}" | wx:else

<!-- index.wxml -->
<view >
    <view wx:if="{{num<20}}">{{num}}小于20</view>
    <view wx:elif="{{num>20 && num<80}}">{{num}}大于20且小于80</view>
    <view wx:else>{{num}}大于等于80</view>
</view>

// index.js
Page({
    data:{
        num:Math.floor(Math.random()*100+1)
    }
})

• 多个元素用<block>包裹

<!-- index.wxml -->
<block wx:if="{{num>10}}">
    <view >num是{{num}}</view>
    <view >num大于10为真</view>
</block>

// index.js
Page({
    data:{
        num:Math.floor(Math.random()*100)
    }
})

列表渲染

• index | item

<!-- index.wxml -->
<view wx:for="{{todos}}">
    {{index}}-{{item.title}}
</view>

// index.js
Page({
    data:{
        todos:[
            {title:"吃饭"},
            {title:"睡觉"},
            {title:"打豆豆"}
        ]
    }
})

其中，数组下标默认是index，数组项默认是item。

• 自定义变量名，idx | todoItem

<view wx:for="{{todos}}" wx:for-index="idx" wx:for-item="todoItem">
    {{idx}}-{{todoItem.title}}
</view>

wx:for-index="idx"，index指定为idx；wx:for-item="todoItem"，item指定为todoItem。

• wx:key="title"
  数组中的元素是对象， wx:key的值是对象的一个属性，且该属性值是字符串或数值。

<!-- index.wxml -->
<switch wx:for="{{todos}}" wx:key="title" >{{item.title}}</switch>
<button bindtap="addTodoItem">Add</button>

// index.js
Page({
    data:{
        todos:[
            {title:"吃饭"},
            {title:"睡觉"},
            {title:"打豆豆"}
        ]
    },
    addTodoItem:function(){
        const newTodoItem = {
            title:"需求开发"
        };
        this.data.todos = [newTodoItem].concat(this.data.todos);
        this.setData({
            todos:this.data.todos
        })
    }
})

wx:key用来唯一标识列表中的每项，和React里key的性质差不多。
当需要在列表最前面添加新项时，小程序只会创建新项，列表中的已有项则不会经历重建过程，只会重新排序。

• wx:key="*this"
  数组中的元素是字符串或数值，this代表了元素自身。

<!-- index.wxml -->
<switch wx:for="{{words}}" wx:for-item="word" wx:key="*this" >{{word}}</switch>
<button bindtap="AddWord">Add</button>

// index.js
Page({
    data:{
        words:["foo","bar"]
    },
    AddWord:function(){
        this.data.words = ["hello"].concat(this.data.words);
        this.setData({
            words:this.data.words
        })
    }
})

模板

• 定义模板
  <template name="">，name属性唯一标识该模板

<!-- item.wxml -->
<template name="item">
    <view>from:{{from}}</view>
    <view >msg:{{msg}}</view>
</template>

• 导入模板
  <import src="" />
• 使用模板
  <template is="" data="">，is属性决定渲染哪个模板，data是传入模板的数据

<!-- index.wxml -->
<import src="./item.wxml" />
<template is="item" data="{{...item}}"></template>

// index.js
Page({
    data:{
        item:{
            from:"Nicholas",
            msg:"Nice to meet you"
        }
    }
})

wxml文件引用

• <import src=""/>
import是有作用域的。

<!-- a.wxml -->
<template name="A">
    <view>This is A template</view>
</template>

<!-- b.wxml -->
<import src="./a.wxml"/>
<template name="B">
    <text>This is B template</text>
</template>

<!-- index.wxml -->
<import src="./b.wxml" />
<template is="A"></template>
<template is="B"></template>

index.wxml引入b.wxml，b.wxml引入a.wxml，简单描述成：index->b->a，但index.wxml中无法使用a.wxml中定义的模板。

• <include src="">
include可以引入目标文件中除了<template>、<wxs>的所有代码。

<!-- a.wxml -->
<template name="A">
    <view>This is A template</view>
</template>
<view>view from A</view>

<!-- b.wxml -->
<import src="./a.wxml"/>
<template name="B">
    <text>This is B template</text>
</template>
<view>view from B</view>

<!-- index.wxml -->
<include src="./a.wxml"/>
<include src="./b.wxml"/>

<!-- header.wxml -->
<view>this is header</view>

<!-- footer.wxml -->
<view>this is footer</view>

<!-- index.wxml -->
<include src="./header.wxml"/>
<view>this is content</view>
<include src="./footer.wxml"/>

共同属性

• id|style|class

<!-- index.wxml -->
<view>
    <text id="title" class="title" style="color:red">world</text>
</view>

• hidden

<!-- index.wxml -->
<view>
    <text hidden="{{isHidden}}">hello,</text>
    <text id="title" class="title" style="color:red">world</text>
</view>

/* index.wxss */
#title{
    font-family:simsun;
}
.title{
    font-size:14px;
}

// index.js
Page({
    data:{
        isHidden:false
    }
})

• data-title|bindtap

<!-- index.wxml -->
<view>
    <text data-title="helloworld" bindtap="handleClick">hello,world</text>
</view>

// index.js
Page({
    handleClick:function(e){
        console.log(e);
        console.log(e.target.dataset["title"])
    }
})