微信小程序笔记（2）：wxml相比于html的扩展

wxml的概述

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
与html不同的是，为了方便小程序的开发，wxml配合小程序渲染层与逻辑层分离的理念，新增了数据绑定、列表渲染、条件渲染、模板、引用功能。

数据绑定

小程序为了做到数据与逻辑的分离，可以在wxml中使用在js中定义的变量名，并且通过在js中调用setData的方法实时改变小程序的页面状态！
具体写法如下:

• wxml文件中

<view> {{message}} </view>

• js文件中

Page({
  data: {
    message: 'nihao!'
  }
})

change:function()//要改变页面中message的内容只要绑定该事件即可！
{
    this.setData({
        message:"zaijian!"
    })
}

条件渲染

在wxml中可以通过条件渲染来实现一些简单的逻辑交互。
具体的条件渲染属性有三个:wx:if``wx:elif``wx:else
具体写法如下:

• wxml文件中

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

hidden与wx:if的选择与取舍

hidden的功能与wx:if非常相似，都可以控制某些条件来控制控件的渲染与隐藏。
不同的是，对于hidden来说不管最终是否被隐藏，它都会把控件先渲染出来。而wx:if则不然，如果条件判断不需要渲染，那么wx:if就不会渲染这个控件。
所以，在需要频繁切换控件的渲染与隐藏时，建议使用hidden，否则使用wx:if更好一些。

列表渲染

类似于一般编程语言的for循环。如果小程序的开发中可以直接使用wx:for来渲染列表中的内容，而不用重复的编写重复的html代码。
具体写法如下:

• wxml文件中：

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

• js文件中:

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

模板

暂未接触，待补充

引用

同上