4.微信小程序（WXML模板文件一）

落日映苍穹つ 2023-06-12 14:28 19阅读 0赞

# 微信小程序（WXML模板文件一） #

**（1）页面根元素  
（2）WXML简介  
（3）标签闭合、敏感性  
（4）数据驱动  
（5）数据绑定\{ \{\}\}—\{ \{\}\}  
（6）列表渲染v-for----wx:for**

# 页面根元素 #

**根元素page**  
每一个页面都具备一个根元素：  
页面根元素可以在控制台的WXML选项卡中看到  
允许在wxss文件中对page根元素进行样式设置  
![在这里插入图片描述][20191113111036797.png]

# 简介 #

**全称：**  
WXML 全称是 WeiXin Markup Language，是小程序框架设计的标签语言

**对比：**  
网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。  
同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。wxss–→css

# WXML标签 #

WXML 文件后缀名是 .wxml，语句在语法上同 HTML 非常相似

标签：  
一个完整的 WXML语句由一段开始标签和一段结束标签组成，在标签中可以是内容，也可以是其他的 WXML 语句，这一点上同 HTML 是一致的

标签闭合编译：  
WXML 要求标签必须是严格闭合的，没有闭合将会导致编译错误。  
![在这里插入图片描述][20191113111201128.png]  
标签写法：  
单标签双标签等

![在这里插入图片描述][20191113111213976.png]  
解析结果  
![在这里插入图片描述][20191113111217503.png]  
**WXML中的选择器是大小写敏感：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]  
WXML和 HTML 非常相似，WXML 由标签、属性等等构成。但是也有很多不一样的地方，下面来一一阐述一下：  
**（1）标签名不一致**  
HTML 经常会用到的标签是 div, p, span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如弹窗等等。既然都需要这些组件，那干脆把这些常用组件包装起来，大大提高开发效率。  
小程序的 WXML 用的标签是 view, button, text ,map等等，这些标签就是小程序给开发者包装好的，此外还提供了地图、视频、音频等等组件。

**（2）属性不一致**  
属性：WXML多出wx:if、wx:for等一些属性及表达式  
在网页的一般开发流程中，通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。  
MVVM模式：用户点击某个按钮的时候，可以通过JS操作DOM。当项目越来越大的时候，代码会充斥着非常多的界面交互逻辑，这显然不是一个很好的开发模式，因此就有了 MVVM 开发模式（例如 React, Vue），提倡把渲染和逻辑分离。

**MVVM模式**：简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。  
小程序的框架也是用到了这个思路，例如数据绑定案例。

**数据data初始化**：  
**①页面需要显示动态数据必须要定义到data对应的变量中；  
②如果该数据在操作过程中发生变化，需要将新数据重新绑定到该变量中，语法为this.setData(\{属性名：属性值\})  
③获取data数据语法为this.data.属性名**  
**数据  
数据的定义：data选项里—键值对  
数据操作：this.setData(\{\})  
数据获取：this.data.属性名**

# WXML基本标签 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]  
（2）属性不一致  
数据绑定案例。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]  
**（3）数据驱动案例**  
wx:if属性决定是否渲染，注意wx:if后值通过\{ \{\}\}绑定  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]  
**（3）数据驱动案例**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]  
**（3）拓展**

**按钮点击操作  
单击：bindtap  
事件绑定：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]  
（3）数据驱动案例  
**添加按钮操作，控制显隐**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]  
**此时便可以通过按钮控制显隐**

**（4）数据驱动案例  
在原来基础上新增按钮文本切换**  
![在这里插入图片描述][20191113112252388.png]  
![在这里插入图片描述][20191113112254953.png]

# WXML属性 #

**数据绑定：**  
通过Mustache 即双大括号\{ \{\}\}语法把变量绑定到界面上，称为数据绑定。

**属性：**  
仅仅通过数据绑定还不够完整描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

**接下来介绍下WXML属性**

#### WXML语法—数据绑定 ####

**WXML 中的动态数据均来自对应 Page 的 data**

**（1）文本绑定**  
![在这里插入图片描述][20191113112348864.png]  
**data初始化数据中**  
![在这里插入图片描述][20191113112358977.png]  
**渲染结果**  
![在这里插入图片描述][20191113112408369.png]  
**（2）属性绑定（class、id、style等属性动态绑定）**  
![在这里插入图片描述][20191113112422978.png]  
**data初始化数据中**  
![在这里插入图片描述][20191113112431560.png]  
**渲染结果**  
![在这里插入图片描述][20191113112440213.png]  
**（3）算术运算  
WXML的文本插值可以进行算术运算**  
![在这里插入图片描述][2019111311245435.png]  
**data初始化数据中**  
![在这里插入图片描述][20191113112503441.png]  
**渲染结果**  
![在这里插入图片描述][20191113112508946.png]  
**（4）三目运算/三元运算**  
![在这里插入图片描述][20191113112520719.png]  
**渲染结果**  
![在这里插入图片描述][20191113112528579.png]  
**（5）字符串运算**  
![在这里插入图片描述][20191113112537184.png]  
**data初始化数据**  
![在这里插入图片描述][20191113112547854.png]  
**渲染结果**  
![在这里插入图片描述][20191113112556602.png]

#### WXML语法—列表渲染 ####

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

**案例：用户名单**  
![在这里插入图片描述][20191113112629403.png]  
![在这里插入图片描述][20191113112639180.png]  
**指定变量名**  
wx:for-item 可以指定数组当前元素的变量名  
wx:for-index 可以指定数组当前下标的变量名  
![在这里插入图片描述][20191113112652284.png]  
**渲染结果**  
![在这里插入图片描述][20191113112710746.png]  
**列表渲染案例  
9\*9乘法表**  
![在这里插入图片描述][201911131127307.png]  
**data初始化数据**  
![在这里插入图片描述][20191113112739534.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 7]  
< block>标签  
如果不想要标签多层嵌套，可以在外层使用  
< block>标签进行嵌套，block不会渲染读取出来  
![在这里插入图片描述][20191113112838135.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 8]  
**wx:key属性**  
**wx:for**通常需要使用 wx:key 来指定列表中项目的唯一的标识符

如果不提供 wx:key，会报一个 **warning**， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

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

**wx:key属性  
接下来结合switch开关按钮，体会下wx:key的作用**  
![在这里插入图片描述][2019111311291765.png]  
**初始化数据data**  
![在这里插入图片描述][20191113112926992.png]  
**渲染结果**  
![在这里插入图片描述][20191113112937330.png]  
**wx:key属性**  
此时，每个switch按钮都被view嵌套者，如果不想用嵌套语法，可以在外层用block标签  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 9]  
**wx:key属性  
添加操作按钮**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 10]  
**注意：小程序无法不支持数组push和unshift等语法。这里用concat达到数组开头添加元素的效果**

**wx:key属性  
添加操作按钮**  
![在这里插入图片描述][20191113113028662.png]  
**点击添加按钮后发现，之前给开关1绑定的开属性被新开关取代，没有实时跟踪到自身，所以需要添加key，给每个元素添加身份识别。**  
![在这里插入图片描述][2019111311303994.png]

# 如有问题或者疑问请留言联系小编！！！！ #

# 感谢来访！！！！ #

[20191113111036797.png]: https://img-blog.csdnimg.cn/20191113111036797.png
[20191113111201128.png]: https://img-blog.csdnimg.cn/20191113111201128.png
[20191113111213976.png]: https://img-blog.csdnimg.cn/20191113111213976.png
[20191113111217503.png]: https://img-blog.csdnimg.cn/20191113111217503.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191113111239393.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191113112048787.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191113112106511.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191113112132452.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2019111311215532.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191113112212247.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191113112229640.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191113112252388.png]: https://img-blog.csdnimg.cn/20191113112252388.png
[20191113112254953.png]: https://img-blog.csdnimg.cn/20191113112254953.png
[20191113112348864.png]: https://img-blog.csdnimg.cn/20191113112348864.png
[20191113112358977.png]: https://img-blog.csdnimg.cn/20191113112358977.png
[20191113112408369.png]: https://img-blog.csdnimg.cn/20191113112408369.png
[20191113112422978.png]: https://img-blog.csdnimg.cn/20191113112422978.png
[20191113112431560.png]: https://img-blog.csdnimg.cn/20191113112431560.png
[20191113112440213.png]: https://img-blog.csdnimg.cn/20191113112440213.png
[2019111311245435.png]: https://img-blog.csdnimg.cn/2019111311245435.png
[20191113112503441.png]: https://img-blog.csdnimg.cn/20191113112503441.png
[20191113112508946.png]: https://img-blog.csdnimg.cn/20191113112508946.png
[20191113112520719.png]: https://img-blog.csdnimg.cn/20191113112520719.png
[20191113112528579.png]: https://img-blog.csdnimg.cn/20191113112528579.png
[20191113112537184.png]: https://img-blog.csdnimg.cn/20191113112537184.png
[20191113112547854.png]: https://img-blog.csdnimg.cn/20191113112547854.png
[20191113112556602.png]: https://img-blog.csdnimg.cn/20191113112556602.png
[20191113112629403.png]: https://img-blog.csdnimg.cn/20191113112629403.png
[20191113112639180.png]: https://img-blog.csdnimg.cn/20191113112639180.png
[20191113112652284.png]: https://img-blog.csdnimg.cn/20191113112652284.png
[20191113112710746.png]: https://img-blog.csdnimg.cn/20191113112710746.png
[201911131127307.png]: https://img-blog.csdnimg.cn/201911131127307.png
[20191113112739534.png]: https://img-blog.csdnimg.cn/20191113112739534.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191113112744474.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191113112838135.png]: https://img-blog.csdnimg.cn/20191113112838135.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191113112843434.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[2019111311291765.png]: https://img-blog.csdnimg.cn/2019111311291765.png
[20191113112926992.png]: https://img-blog.csdnimg.cn/20191113112926992.png
[20191113112937330.png]: https://img-blog.csdnimg.cn/20191113112937330.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191113112954663.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20191113113006961.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191113113028662.png]: https://img-blog.csdnimg.cn/20191113113028662.png
[2019111311303994.png]: https://img-blog.csdnimg.cn/2019111311303994.png