小程序-step_3-wxml

标签

1. wxml 对大小写敏感

<icon class="" type="success" size="23" color=""></icon>
<Icon class="" type="success" size="23" color=""></Icon>

3. wxml 具有数据绑定，可以将数据变化反应到页面上

<button bind:tap="getAppFunc">
 click
</button>

Page({
...
 getAppFunc() {
   wx.showToast({
     title: '点击事件触发',
   });
 }
})

3. wxml 的属性值必须包含在双大括号中

<view >
 {{msg}}
</view>

Page({
 data: {
   msg: '信息'
 }
})

条件判断

5. wx:if, wx:elif, wx:else条件逻辑

<view wx:if="{{show}}">
 展示
</view>
<view wx:else>
 不展示
</view>

 Page({
 data: {
   show: true
 }
})

7. 要一次性判断多个标签是否需要展示，使用<block/>标签包裹

<block wx:if="{{show}}">
 <view>block 元素</view>
 <view>block 元素</view>
 <view>block 元素</view>
 <view>block 元素</view>
</block>


<block wx:else>
 <view>block 元素</view>
 <view>block 元素</view>
 <view>block 元素</view>
 <view>block 元素</view>
</block>

列表渲染

9. wx:for列表渲染，默认当前项下标 index,当前项的值为 item

<view wx:for="{{arr}}" wx:key="item">
 {{item}}
</view>

11. wx:for-index重新制定下标名

<view wx:for="{{arr}}" wx:for-index="idx" wx:for-item="value" wx:key="value">
 第{{idx}}个： {{value}}
</view>

13. wx:for-item重新指定变量名
    9.wx-for 渲染多节点的结构块也可以使用 <block />

<block wx:for="{{arr}}" wx:for-index="idx" wx:for-item="value" wx:key="value">
 <view >
   索引： {{idx}}
 </view>
 <view >
   值： {{value}}
 </view>
</block>

14. wx:key 是唯一标识，新增删除元素时一定要有

模板

15. 模板用 template name="“声明，template is=”"调用，然后传递data 属性去渲染动态的字段

<template name="tpl">
 <div>
   {{msg}}
 </div>
</template>

<template is="tpl" data="{{msg}}" />

这里单标签的形式调用就可以

引用

wxml 提供了 import,include 两种引用方式

import

引入目标文件中的template，只可以引入一层

• template.wxml里的模板

<template name="tpl1">
 <div>
   tpl1
 </div>
</template>


<template name="tpl2">
 <div>
   tpl2
 </div>
</template>

index.wxml里引用

<import src="./template.wxml" />

<template is="tpl1" data="{{msg}}" />

inlcude

include 引入目标文件中除 template 和wxs 之外的全部代码，相当于把代码嵌入到了当前位置
template 的代码

<template name="tpl1">
 <div>
   tpl1
 </div>
</template>


<template name="tpl2">
 <div>
   tpl2
 </div>
</template>

<view>
 这些是除下 template 之外的代码
</view>
 

index.wxml 的代码

<include src="./template.wxml" />

wxml 共同属性

1. hidden是否显示
2. data-*：自定义属性，组件上事件触发的时候，会传递给处理函数

<button bind:tap="clickButton" data-value="点击" data-tag="button">
点击
</button>

Page({
...
 clickButton(e) {
   const {tag, value} = e.target.dataset
   wx.showToast({
     title: `tag: ${tag}, value: ${value}`,
   });
})

4. bind/catch 组件上的事件