小程序(WXML语法、WXSS样式、事件系统、WXS脚本语法)
⼩程序（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字符串的形式将数据从逻辑层传递到视图层
使⽤语法：
<!-- 1.组件的内容绑定  -->
<!-- <view>{{str}}</view> -->
<!-- 2.属性-id 注意引号和花括号之间不要有空格-->
<!-- <view id="{{ id }}"></view> -->
<!-- 3.属性-class -->
<!-- <view class="{{className}}">hello</view> -->
<!-- 4.属性-style -->
<!-- <view >hello</view> -->
<!-- <view >hello</view> -->
<!-- 5.属性-取值（bool：关键字）注意bool类型⼀定嵌套在{{}}-->
<!-- <view hidden="{{false}}">hello</view>
<view hidden="{{true}}">world</view> -->
<!-- 6.运算  ++ --  三元数据路径运算（array  object） -->
<view>{{2+3}}+5</view>
<view>{{'hello'}}+world</view>
<view>{{5>13 ? '⼤于' : '⼩于'}}</view>
<view hidden="{{5>3 ? false : true}}">hello</view>
<view>{{array[2]}}</view>
<view>{{user.name}}</view>
使⽤注意：
1.注意引号和花括号之间不要有空格
2.如果属性的值是bool类型，注意bool类型⼀定嵌套在{{}}
3.在组件上不管是属性的值还是内容只要是变量⼀定嵌套在{{}}
3.列表渲染wx:for
在组件上使⽤ `wx:for` 控制属性绑定⼀个数组，即可使⽤数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 `index`，数组当前项的变量名默认为 `item`
使⽤语法：
wx:for  默认下标名:index  默认值名:item  修改下标名:wx:for-index  修改item值名：wx:for-item
<!-- wx:for  修改变量名字：wx:for-item  修改下标名字：wx:for-index -->
<!-- 1.循环数组 -->
<!-- <view wx:for="{{array}}" wx:for-index="i" wx:for-item="m">
下标是：{{i}}---值是：{{m}}
</view> -->
<!-- 2. 循环对象-->
<!-- <view wx:for="{{user}}">
下标是：{{index}}---值是：{{item}}
</view> -->
<!-- 3.循环数组对象 -->
<!-- <view wx:for="{{userInfo}}">
下标是：{{index}}---值是：{{item.name}}
</view> -->
<!-- 4.循环字符串将字符串切割成数组最后循环数组  -->
<!-- <view wx:for="hello">
下标是：{{index}}---值是：{{item}}
</view> -->
<!-- 5.循环注意事项引号和花括号之间不能有空格-->
<view wx:for="{{[1,2,3]}}">
下标是：{{index}}---值是：{{item}}
</view>
=========================================
<!-- 解析过程先运算⽣成新的字符串切割成数组最后循环数组  -->
<view wx:for="{{[1,2,3]}} ">
下标是：{{index}}---值是：{{item}}
</view>
=========================================
<view wx:for="{{[1,2,3]+' '}}">
下标是：{{index}}---值是：{{item}}
</view>
使⽤注意：
1. 引号和花括号之间不能有空
wx:key：
作⽤：
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，⽽不是重新创建，以确保使组件保持⾃⾝的状态，并且提⾼列表渲染时的效率。
定义key：
1.如果列表是静态的可以不⽤定义key;
2.字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯⼀的字符串或数字，且不能动态改变。(数据的id)
3.保留关键字 `*this` 代表在 for 循环中的 item 本⾝，这种表⽰需要 item 本⾝是⼀个唯⼀的字符串或者数字。
1.
<view
wx:for="{{array}}"
wx:for-index="i"
wx:for-item='m'
wx:key="*this"
>
下标是{{i}}---值是{{m}}
</view> -->
2.
<view wx:for="{{userInfo}}" wx:key="id">
下标是{{index}}---值是{{item.name}}
</view>
使⽤注意：
1.key的添加不需要嵌套在{{}}
4.条件渲染
在⼩程序开发过程中，我们也会经常碰见分⽀操作，这⾥我们称为条件渲染，⽽在⼩程序中实现条件渲染，我们使⽤wx:if
使⽤语法：
wx:if  wx:elif  wx:else
<view wx:if="{{score >90 }}">优秀</view>
<view wx:elif="{{score >70}}">良好</view>
<view wx:else>⼀般</view>
if VS hidden：
`wx:if` 也是**惰性的**，如果在初始渲染条件为 `false`，框架什么也不做，在条件第⼀次变成真的时候才开始局部渲染。
相⽐之下，`hidden` 就简单的多，组件始终会被渲染，只是简单的控制显⽰与隐藏。
⼀般来说，`wx:if` 有更⾼的切换消耗⽽ `hidden` 有更⾼的初始渲染消耗。因此，如果需要频繁切换的情景下，⽤ `hidden` 更好，如果在运⾏时条件不⼤可能改变则 `wx:if` 较好。
<view wx:if="{{true}}">hello</view>
<view wx:if="{{false}}">hello</view>
=========================================
<view hidden="{{true}}">hello</view>
<view hidden="{{false}}">hello</view>
block使⽤：
<!-- block使⽤不会在页⾯输出显⽰主要放置循环（wx:for）和判断(wx:if)  hidden不能使⽤block-->
<!-- <block wx:for="{{array}}">
下标是{{index}}----值是{{item}}
</block> -->
<view class="info">
<!-- ⽤户已经登录展⽰信息 -->
<block wx:if="{{buffer}}">
<image src="../../images/0.jpg"></image>
<text>李四</text>
</block>
<!-- ⽤户没有登录提⽰登录 -->
<button wx:else>请登录</button>
</view>
5.模板
类似于vue.js⼀样，⼩程序也是存在模板语法的，WXML提供模板（template），可以在模板中定义代码⽚段，然后在不同的地⽅调⽤。可以提⾼代码的复⽤率
定义模板：
<template name='模板的名称'>
业务组件......
</template>
使⽤模板：
<template is='模板的名称' />
模板传参：
data=""    <template is='模板的名称' data="param1,"" />
使⽤语法：
<!--代码复⽤  template  name  is  data  -->
<!-- 模本本⾝没有数据谁使⽤谁传递数据 -->
<!-- 模板本⾝没有样式谁使⽤谁设置样式 -->
<!-- 1.模板的基本使⽤ -->
<!-- 1.1定义模板 -->
<!-- <template name="demo1">
<view>⽤户的名称是：李⽩</view>
<view>⽤户的年龄是：18</view>
</template> -->
<!-- 1.2使⽤模板 -->
小红旗图标怎么弄<!-- <template is="demo1" /> -->
<!-- 2. 模板传参  data-->
<!-- 2.1定义模板 -->
<!-- <template name="demo2">
<view>⽤户的名称是：{{name}}</view>
<view>⽤户的年龄是：{{age}}</view>
</template> -->
<!-- 2.2使⽤模板 -->
<!-- <template is="demo2" data="{{name,age}}" /> -->
<!-- 3. 模板传参  data-->
<!-- 3.1定义模板 -->
<!-- <template name="demo3">
<view>⽤户的名称是：{{user.name}}</view>
<view>⽤户的年龄是：{{user.age}}</view>
</template> -->
<!-- 3.2使⽤模板 -->
<!-- <template is="demo3" data="{{user}}" /> -->
<!-- 4. 模板传参  data-->
<!-- 4.1定义模板 -->
<!-- <template name="demo4">
<view>⽤户的名称是：{{name}}</view>
<view>⽤户的年龄是：{{age}}</view>
</template> -->
<!-- 4.2使⽤模板 -->
<!-- <template is="demo4" data="{{...user}}" /> -->
<!-- 5. 模板传参  data-->
<!-- 5.1定义模板 -->
<!-- <template name="demo5">
<view>⽤户的名称是：{{name}}</view>
<view>⽤户的年龄是：{{age}}</view>
</template> -->
<!-- 5.2使⽤模板 -->
<!-- <template
is="demo5"
wx:for="{{userInfo}}"
wx:key="id"
data="{{...item}}"
/> -->
使⽤注意：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。