微信小程序之wxml的基本使用

概览:

微信小程序之wxml的基本使用

基本功能

我们一般用到的就是:页面布局,引用数据

引用数据

一般引用的数据是js中声明的data块的数据

引用方式是通过使用 “{{…}}”

比如:

微信小程序之wxml的基本使用

列表渲染(wx:for)

一般的控件渲染就不说了,这里说列表渲染主要是在控件中用到了for循环
微信小程序之wxml的基本使用

wx:key与wx:key="*this"

参考

一般的,wx:key是跟着wx:for的,值一般是item的唯一标识,一般这个属性是item中唯一的且不会改变的字符串或者数字

wx:key="*this"也就是在item自己就是字符串和数字的时候使用,表示用自己来当这个唯一标识

使用wx:key和不使用wx:key的区别可以看下博客,简单来说,就是:

  1. 使用了wx:key的时候,当列表发生改变的时候,老的item不会重绘,保留老item的内容和状态
  2. 不使用wx:key的时候,当列表发生改变的时候,所有列表重绘,老item的状态不会保留
  3. 最明显的表现应用就是在item中进行了状态切换的时候

复杂列表(block配合wx:for)

微信小程序之wxml的基本使用

再命名(wx:for-index和wx:for-item)

比如:
微信小程序之wxml的基本使用

wx:for-index表示用idx命名当前角标

wx:for-item表示用itemName来命名当前的item

不声明的话,默认item的引用就是item

条件渲染(wx:if)

微信小程序之wxml的基本使用
只会展示符合条件的View,比如上面的例子中,只会展示第三个View

复杂布局(block配合wx:if)

参考上面的

隐藏和显示(hidden配合wx:if)

比如:

微信小程序之wxml的基本使用

模板(template)

这个模板是针对组件的重用的

模板的声明

定义一个wxml文件,作为公用的wxml,内容标签是template,特点是有一个name属性

模板的引用

在需要引用模板的页面,也就是page.wxml引入模板文件,引用方式是import

然后在填充模板的地方使用template标签,使用is指定模板的名称,data传递数据

举例

我们先看一下数据:
微信小程序之wxml的基本使用

模板的声明:

微信小程序之wxml的基本使用

在页面,也就是page.wxml中使用import引入模板文件,然后在填充控件的地方:
微信小程序之wxml的基本使用

is指定了模板的名称

data指定也传递的data中的数据,注意表示方式

多模板选择

比如:
微信小程序之wxml的基本使用