阅读本文大约须要3分钟
你们好，我是三天都在写bug的湾湾，一个乐天派的后端开发，人称联通的表情包。
明天是带你们从零开始做小程序的第三天，考虑到不少用户是小白，所以明天给你们介绍一下小程序的视视口View｜WXML，好了，屁话不多说，让我们直接开始吧～
一、小程序的视视口View包括哪些
按照陌陌官方文档可知，框架的视视口由WXML与WXSS编撰，而且是由组件来进行展示的。先将逻辑层的数据反映成视图，同时将视视口的风波发送给逻辑层。
#4:9:8:8:a:2:5:2:2:1:a:0:3:9:0:e:6:0:8:c:a:6:c:f:a:8:2:d:8:4:f:f#
这儿须要和朋友简单说一下，WXML(WeiXinMarkuplanguage)负责描述页面结构，WXSS(WeiXinStyleSheet)负责描述页面款式，组件呢，就是俺们的视图的基本组成单元啦～
还是一头雾水？没关系，接出来湾湾会给你们单独分开，从头到尾讲个明白。明天重点讲的是WXML。
二、什么是WXML
WXML（WeiXinMarkupLanguage）是框架设计的一套标签语言，结合基础组件、事件系统，可以建立出页面的结构。
陌陌官方文档
标签语言也就是标记语言，是一种将文本以及文本相关的其他信息结合上去，凸显出关于该网页结构和数据的计算机文字编码哦。
1、WXML的句型
以开始标签起始，但是以结束标签为中止，在这两个标签之间的内容则被称之为元素内容。
开始标签
元素内容
结束标签
您好呀，我是湾湾
点击按键
完整的代码如下：
#6:0:6:7:4:7:1:c:c:8:c:1:c:1:6:f:0:1:6:a:7:3:b:0:7:9:2:7:a:8:e:9#
三、WXML的能力
1、绑定数据
在开发过程中，会时常出现数据动态波动的情况，这么这时侯就须要绑定数据。一旦数据变动，这么页面都会及时显示最新的数据，而不是最最最开始的数据。
1）在index.wxml复制以下代码，其中newData就是我们这一次须要绑定的数据。
#7:c:d:f:a:2:7:9:6:4:b:7:f:1:3:6:5:0:3:a:d:c:4:e:8:7:d:1:7:d:e:0#
2）在page.js新建newData，这个就是俺们的数据来源啦。
#8:4:d:4:c:7:e:1:8:a:2:b:4:2:2:6:b:8:d:1:a:f:a:0:3:6:c:1:a:b:a:5#
2、列表渲染
在开发过程中，也会经常碰到列表循环展示的情况，比较蠢的做法就是把列表每条数据都单独掏出来，之后一个个去绑定，费时还吃力，代码还很不好维护，非常冗余。
像俺们耳朵转得飞快的人肯定不那么干了对吧，这时侯「列表渲染」就应运而生，能让代码反复的执行，因而达到疗效。
1）在index.wxml复制以下代码
其中wx:for="{{arr}}"拿来循环链表，我们会在组件上使用wx:for控制属性绑定一个链表，这样子就可以用链表中各项的数据重复渲染该组件。
默认链表的当前项的下标变量名默认为index，链表当前项的变量名默认为item
