微信小程序开发——XMXL语法+列表渲染-条件渲染

小程序开发语言

• wxml语法

• wxss语法

• js语法

wxml语法

WXML（WeiXin Markup Language），它与HTML有很多相似之处。它是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

什么是组件：

• 组件是视图层的基本组成单元

• 组件自带一些功能与微信风格的样式

• 一个组件通常包括开始标签 和结束标签，属性用来修饰这个组件，内容在两个标签之内。

基本写法

• 写注释<!--注释--> （快捷方式：ctrl+/）

• 写标签<标签名 属性名1=“属性值1”……>……</标签名>

• 所有元素都必须闭合标签<text>hello world</text>

• 标签必须使用小写

• 不可以含有中文

• ……

常用的属性类型

体会text与view组件的区别

更多资料，请参考微信小程序基础组件

{{ }}的作用

{{ }}中的内容为动态数据，若内容为数字与字符串相加，则会默认数字为字符串格式。详见数据绑定部分内容。

基础语法介绍

• 数据绑定

  wxml中的动态数据均来自对应page的data，数据绑定使用 Mustache 语法（双大括号）将变量包起来 
  

  

• 列表渲染

  在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

  默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item 
  
  

  使用 wx:for-item 可以指定数组当前元素的变量名，

  使用 wx:for-index 可以指定数组当前下标的变量名 
  

• 条件渲染

  在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：

  <view wx:if="{{condition}}"> True </view>

  在下图中，使用条件渲染并设置了false，即该条件后的语句均不起作用，因此该语句后面的文本并没有显示出来

  

  另外，使用hidden也可以不显示文本或组件。

  

wx:ifvs hidden

因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length > 5}}"> 1 </view> 
<view wx:elif="{{length > 2}}"> 2 </view> 
<view wx:else> 3 </view>

更多资料可参考微信官方文档及w3cschool教程。