微信小程序(WXML语法、WXSS样式、事件系统、WXS脚本语法)

三、微信小程序视图层

框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。
●WXML(WeiXin Markup language) 用于描述页面的结构。
●WXS(WeiXin Script) 是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。
●WXSS(WeiXin Style Sheet) 用于描述页面的样式。
●组件(Component)是视图的基本组成单元。

3.1、WXML语法(重点)

wxml语法包括:数据绑定 列表渲染 条件渲染 模板 引用

1.wxml概述及作用

WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构,功能类似于html;wxml语法包含数据绑定、列表渲染、条件渲染、模板和引用

2.数据绑定

WXML 中的动态数据均来自对应 Page 的 data。通过{{}}语法在对应的.wxml页面解析输出即可
页面第一次渲染需要的业务数据,当页面加载的时候,data会以json字符串的形式将数据从逻辑层传递到视图层

使用语法








{{2+3}}+5
{{'hello'}}+world
{{5>13 ? '大于' : '小于'}}
{{array[2]}}
{{user.name}}

使用注意:

1.注意引号和花括号之间不要有空格
2.如果属性的值是bool类型, 注意bool类型一定嵌套在{{}}
3.在组件上不管是属性的值还是内容只要是变量一定嵌套在{{}}

3.列表渲染wx:for

在组件上使用 `wx:for` 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 `index`,数组当前项的变量名默认为 `item`

使用语法:

wx:for  默认下标名:index  默认值名:item   修改下标名:wx:for-index   修改item值名:wx:for-item
​






​
​


    下标是:{{index}}---值是:{{item}}

=========================================


    下标是:{{index}}---值是:{{item}}

=========================================

    下标是:{{index}}---值是:{{item}}

使用注意:

1. 引号和花括号之间不能有空

wx:key

作用:

当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

定义key:

1.如果列表是静态的可以不用定义key;
2.字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。(数据的id)
3.保留关键字 `*this` 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字。
1.
    
        下标是{{i}}---值是{{m}}
     -->
2.
    
        下标是{{index}}---值是{{item.name}}
    

使用注意:

1.key的添加不需要嵌套在{{}}

4.条件渲染

在小程序开发过程中,我们也会经常碰见分支操作,这里我们称为条件渲染,而在小程序中实现条件渲染,我们使用wx:if

使用语法

wx:if   wx:elif   wx:else
​
优秀
良好
一般

if VS hidden:

 `wx:if` 也是**惰性的**,如果在初始渲染条件为 `false`,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。
​
相比之下,`hidden` 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。
​
一般来说,`wx:if` 有更高的切换消耗而 `hidden` 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 `hidden` 更好,如果在运行时条件不大可能改变则 `wx:if` 较好。
​
​
hello
hello
=========================================

block使用



​
    
    
        
        李四
    
    
    
    

5.模板

类似于vue.js一样,微信小程序也是存在模板语法的,WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。可以提高代码的复用率

定义模板:

使用模板: