【微信小程序】wxml模板

文章目录

数据绑定条件渲染列表渲染模板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"]) } })