微信小程序开发-基础

wxml语言

Wxml（微信标记语言）作为小程序前端的结构语言，与html类似，但需要注意以下几点：

属性区分大小写；

标记必须严格关闭，否则编译时会报告错误；

属性值可以动态更改，由｛｛name｝｝表示，但变量区分大小写，必须用双引号括起来；

未定义或设置为未定义的变量将不会同步到wxml；

如果一个组件需要控制多个视图的渲染，它可以被一个块覆盖，这相当于html中的模板；

分配

在js文件中修改Page实例中的数据时，方法如下：

此数据。nameArray=[]；

this.set数据({

名称数组：this.data.nameArray

})

setData方法用于将数据从逻辑层传输到呈现层，比较JS对象前后的差异，将差异应用到Dom树，并呈现新的UI。

setData方法是Page实例的原型函数。此操作是异步操作。第二个参数是回调，它在setData完成呈现接口后触发。

逻辑语法

｛｛｝｝在这个括号中，除了直接填写变量名之外，还可以使用三元运算符，或者简单的数值运算，或者字符串拼接等操作。

条件逻辑

Wx:if/Wx:elif/Wx:else构成了条件判断的使用。具体示例如下：

view1

view2

视图3

<查看wx:else>

视图4

列表呈现

Wx:for/Wx:for index/Wx:for item/Wx:key构成了列表呈现的组件。默认情况下，数组中当前项的下标变量名默认为索引，数组中的当前项的变量名默认是项。此外，wx:for index可以重命名当前循环的下标名称，wx:for item可以重命名当前环路的元素（item），如下所示：

｛｛indexNewName｝｝：｛

如果添加或减少了列表数据，或者更改了列表中元素的数据，为了实现动态渲染效果，可以使用wx:key来标识每个渲染。Wx:key有两种形式：

字符串：表示for循环中数组的属性。此属性必须是列表中唯一的字符串或数字，并且不能动态更改；

This：保留关键字This表示for循环中的项本身。此表示需要确保项目是唯一的字符串或数字

示例如下：

{｛item.uniquePropProperty｝｝:｛{item.otherProperty}｝

{｛item｝｝

样板

在wxml中，您可以使用模板定义模板，并使用name属性表示模板的名称。当您确实需要使用和渲染模板时，可以使用is来表示使用的模板，并使用数据来表示传递到模板中的渲染数据。具体示例如下：