第5章 WXML 语法基础-【千锋教育】微信小程序开发与实战（微课版）

第5章 WXML语法基础 WXML介绍 数据绑定 条件渲染 列表渲染 模板与引用 事件处理 01 02 04 05 03 06 目 录 CATALOUGUE 初心至善 匠心育人 WXML介绍 初心至善 匠心育人 WXML介绍 WXML（全称 WeiXin Markup Language）是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。 初心至善 匠心育人 WXML介绍 WXML语法： <标签名 属性名="属性值" 属性名="属性值" ......> ...... </标签名> 初心至善 匠心育人 WXML介绍 WXML的开始标签和结束标签中包裹着我们要展示在页面中的内容，其内容可以是一段简单的字符串文本，也可以是其他的WXML语句，这个用法与HTML是一样的。在开始标签中还可以为该标签传入属性。 初心至善 匠心育人 WXML介绍 WXML示例代码： <view style="color: red;font-size: 25px;font-weight: 600;"> Hello，小程序 <view class="sub-title">小程序商城首页</view> </view> 初心至善 匠心育人 数据绑定 初心至善 匠心育人 数据绑定 数据绑定使用 Mustache 语法（双大括号）将变量包起来，示例代码： // index.wxml <view> <text>{{message}}</text> </view> // index.js Page({ data: { message: "Hello,World" } }) 初心至善 匠心育人 数据绑定 组件属性(需要在双引号之内)，示例代码： // index.wxml <view id="item-{{id}}"> </view> // index.js Page({ data: { id: 0 } }) 初心至善 匠心育人 数据绑定 控制属性(需要在双引号之内)，示例代码： // index.wxml <view wx:if="{{condition}}"> </view> // index.js Page({ data: { condition: true } }) 初心至善 匠心育人 数据绑定 可以在 {{}} 内进行简单的运算，支持的有如下几种方式： 三元运算 算数运算 逻辑判断 字符串运算 数据路径运算 初心至善 匠心育人 条件渲染 初心至善 匠心育人 条件渲染 在框架中，使用 wx:if="" 来判断是否需要渲染该代码块： <view wx:if="{{condition}}"> True </view> 也可以用 wx:elif 和 wx:else 来添加一个 else 块： <view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view> 初心至善 匠心育人 条件渲染 因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。 示例代码： <block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view> </block> 初心至善 匠心育人 列表渲染 初心至善 匠心育人 列表渲染 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。 示例代码： // index.wxml <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> // index.js Page({ data: { array: [{ message: 'foo', }, { message: 'bar' }] } }) 初心至善 匠心育人 列表渲染 使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名。 示例代码： <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.message}} </vie