微信小程序笔记(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'
    }]
  }
})

模板

暂未接触,待补充

引用

同上

微信小程序笔记(2):wxml相比于html的扩展

上一篇:微信小程序笔记(3):小程序的生命周期及其相关函数


下一篇:0029 微信开发(04 获取网页授权)