微信小程序开发（三）小程序开发框架的WXML

WXML（威信标记语言）

简介：WXML是一套用于框架设计的标记语言。结合组件、WXS和事件系统，您可以构建页面结构

2.语法：它由包装内容的开始标记和结束标记组成。熟悉前端开发的人必须理解WXML等同于HTML文件

注意：WXML标记必须关闭并区分大小写

以下是WXML代码和显示效果的一部分：

wxml.png

3.WXML属性

（1） 数据绑定

在WXML中，数据绑定用于动态更新页面数据，如天气、股市和其他页面。WXML中的数据来自js文件中Page的数据对象。对于数据绑定，我们使用Mustache的方法，即变量名加上｛｛｝｝的语法来打包变量。请注意，所有组件和属性都应为小写

//索引.wxml

<视图>

｛｛message｝｝

//索引.js

第页({

数据：{

留言：“hello world”

}

})

数据绑定还可以执行一些运算符绑定，如下所示：＜view＞标记中的隐藏属性决定是否显示视图中的内容。我们可以将数据中标志的布尔值设置为隐藏，以动态显示和隐藏内容

//索引.wxml

文本

//索引.js

第页({

数据：{

标志：false

}

})

小程序的标签组件有6个常见属性

wxml标签组件属性.png

（2） 列表呈现

在一些网上购物网站上，应该展示某个品牌的所有商品。当数量相对较小时，我们可以在wxml中逐行写入它们，但当数量较大且不固定时，需要小程序的列表渲染功能。如下所示：我们在js中定义一个items数组，并在标签中使用＜block＞的wx:for属性绑定items。index变量引用数组中当前元素的对应下标，item变量引用数组的当前元素。您可以通过wx:for item指定我们想要的变量名。wx:key属性表示列表中项目的唯一标识符。

注意：＜block＞标签不是组件，而是包装元素。我们可以看到，当页面被呈现时，标签将不会被呈现。

//索引.wxml

<视图>

{{index}}:｛｛item.name｝｝

//索引.js

第页({

数据：{

项目：[

｛name:“商品1”｝，

｛name:“商品2”｝，

｛name:“商品3”｝，

｛name:“商品4”｝，

]

}

})

（3） 条件渲染

当我们需要在不同的条件下显示不同的内容时，我们需要使用条件渲染。通常，我们使用属性wx:if wx:elif wx:else来控制条件渲染。

//索引.wxml

今天的晚餐</view>

大米

稀粥

面条

//索引.js

第页({

数据：{

//数学。Random（）生成0-1浮点随机数Math。floor（）处理浮点数并返回向下取整的整数

//生成1-3个随机整数

条件：Math.floor（Math.random（）*3+1）

}

})

（4） 模板参考

小程序支持在模板中定义自己的代码片段，然后在不同的地方调用或导入它们。在wxml中，我们定义了一个tempItem模板。在＜template＞中，如标记中定义的，name属性是模板名称。使用时，我们使用is属性来声明我们正在使用的模板，并使用data属性来传递我们想要的数据。模板有自己的作用域，只能通过data属性传入。

//索引.wxml