微信小程序-视图层

提示：订阅零到一百微信小程序专栏学习吧！

---

视图层负责视图的显示
其内容包括：WXML页面、WXSS样式表和组件。

WXML

WXML的全称是WeiXin Markup Language（微信标记语言），使用<标签>和</标签>来构建页面结构的语言。
WXML具有数据绑定、列表渲染、条件渲染、模板、事件和引用的能力。

数据绑定

简单绑定

在WXML页面中可以使用双花括号{ {变量名}}的形式表示动态数据，例如：

page({
	data:{
	message:"简单数据绑定" <text>{
  {message}}</text>}
}
)

---

组件属性绑定

代码如下（示例）：
组件的属性也可以用动态数据，例如：

data: {
    no:'myView'
  },

<view id="{
    {no}}">测试</view>

控制属性绑定

控制属性也可以使用动态数据，但必须在引号内。例如：

运算绑定

双花括号内部还可以进行简单的运算，支持的运算方式包括：
三元运算

<view hidden="{
    {result?true:false}}">该组件将被隐藏</view>

  data: {
    result:true
  },

逻辑判断示例代码：

<view wx:if="{
    {x>5}}">该组件将被显示</view>

  data: {
    x:99
  },

字符串运算示例代码：

<view>{
  {"你好"+name}}</view>

  data: {
    name:"小程序"
  },

组合绑定

还可以在双花括号内直接进行变量和值的组合，构成新的对象或者数组。

列表渲染

简单列表

小程序在组件上使用wx:for属性实现列表渲染，即同一个组件批量出现多次，内容可以不同。
其原理是使用wx:for绑定一个数组，然后就可以自动用数据中的每个元素依次渲染该组件，形成批量效果。
数组当前项的下标变量名默认为index，数组当前项的变量名默认为item。



可使用wx：for-item 和wx:for-index自定义当前元素和下标的变量名。

多节点列表

标签可以与wx：for结合渲染包含多节点的结构块。

data: {
    students:[
      {stuNo:"001",name:"张三"},
      {stuNo:"002",name:"李四"},
      {stuNo:"003",name:"王五"}
    ]
  },

<block wx:for="{
    {students}}">