微信小程序视图层详解（微信小程序界面图）

这篇文章给大家带来了一些关于微信小程序的知识，尤其是关于视图层的知识，视图层负责在页面上显示逻辑层的数据，并将视图层的事件发送到逻辑层。下面就让我们一起来看看吧，希望能帮到你。

【相关学习推荐:小程序学习教程】

applet框架的视图层由WXML（微信标记语言）和WXSS（微信样式表）编写，通过组件显示。视图层负责在页面上显示逻辑层的数据，并将视图层的事件发送到逻辑层。WXML用于描述页面的结构，WXSS用于描述页面的样式，组件是视图的基本单元。这三者之间的关系可以类比为HTML、CSS和HTML中各种标签之间的关系。除了这三种，还有一种小程序脚本语言——WXS（微信脚本）。WXS和WXML可以结合起来构建页面结构。

一、WXML1、数据绑定（1）简单绑定数据绑定的基本原则:1）在data: in中定义页面的数据。js文件对应的页面，将数据定义成数据对象。

page（{ data:{//字符串类型info的数据:init data，//数组类型msgList的数据:默认情况下，当前循环项的索引由index表示；当前循环项由item表示。

（2）手动指定索引和当前项的变量名*使用wx:for-index指定当前循环项的索引的变量名，使用wx:for-item指定当前项的变量名。在wxml中，索引为:{{idx}}，当前项目为:{{itemName}}。效果如图:

（3）wx:key类似于Vue列表渲染中的:key。小程序实现列表渲染时，也建议为渲染后的列表项指定唯一的键值，从而提高渲染效率。示例代码如下:。js:

Page（{ data:{ userList:wx:key）的值以以下两种形式提供:1）字符串。表示wx:for循环数组中项的属性。属性值必须是列表中唯一的字符串或数字，并且不能动态更改。2）保留关键字*this。表示wx:for循环中的项目本身，这要求项目本身是唯一的字符串或数字。

3.条件渲染（1）wx:if在小程序中，使用wx:if =“{ { condition } }“判断代码块是否需要渲染，或者使用wx:elif和wx:else添加else判断。例子如下:在。js:

第页（{ data: {type:1 }}）。wxml:

男女之间的保密性（2）结合wx:if如果你想一次控制多个组件的显示和隐藏，可以使用一个标签来封装多个组件，并使用wx:if来控制标签上的属性。例子如下:

视图1视图2注意:它不是一个组件，它只是一个包装容器，并且不会在页面中呈现。

（3）隐藏在小程序中，直接使用hidden =“{ { condition } }”还可以控制元素的显示和隐藏:

True表示隐藏，false表示显示（4）wx:if与hidden相比1）不同的操作模式:wx:if通过动态创建和移除元素来控制元素的显示和隐藏。隐藏开关样式（显示:无/块；）来控制元素的显示和隐藏。2）使用建议:频繁切换时，建议使用隐藏。当控制条件复杂时，建议使用wx:if配合wx:elif和wx:else在显示和隐藏之间切换。

4.事件是一种从视图层到逻辑层的通信模式，可以将用户的行为反馈到逻辑层。事件通常绑定到组件。当被设置为监控的事件被触发时，视图层会将带有id、数据集和触摸等信息的事件对象发送到逻辑层，然后框架会在逻辑层执行相应的事件处理函数来响应用户的操作。

事件分为冒泡事件和非冒泡事件。

冒泡事件:当组件上的事件被触发时，它将被传递到父节点。非冒泡事件:当组件上的事件被触发时，它不会被传递到父节点。①事件的使用。在wxml中:

按钮中定义了事件处理程序。js:

page（{//定义事件处理函数btntaphandler（event）{ console . log（event）}）效果如下:调试器控制台面板的输出信息大致为:

事件的分类

（3）事件的绑定和冒泡（4）事件的捕获阶段（5）事件对象当组件触发事件时，绑定该事件的逻辑层的处理程序将接收一个事件对象。

（6）为事件处理程序中的数据赋值。通过调用this . setdata（data object）方法，可以再次为页面数据中的数据赋值。例子如下:在。wxml:

+1.js定义了事件处理函数:

page（{ data:{ count:0 }，//+1按钮的事件处理函数count change（）{ this。setdata（{ count:this。数据。count+1 }）}）具有以下效果:

（7）事件传递小程序中的事件传递参数相当特殊，因此无法将事件和传递参数同时绑定到事件处理程序。您可以为组件提供data-*自定义属性参数，其中*表示参数的名称。示例代码如下:

英寸wxml:（info将被解释为参数的名称，值2将被解释为参数的值。)

+2.js:（在事件处理程序中，具体参数的值可以通过event.target.dataset的参数名获取）

页面（{data: {count: 0}，/+2 bintap 2（event）{ this . setdata（{ count:this . data . count+event . target . dataset . info }）} }）的效果如图所示:1

（8）小程序中8）bind input的语法格式，输入事件用于响应文本框的输入事件。。wxml:

中定义的事件处理程序。js:

page（{//event handler（event）{ console。日志（事件细节。value）}）如图:1

（9）文本框与数据同步的实现:①定义数据；②渲染结构；③美化风格；④绑定输入事件处理程序。

5.模板6。引用WXML提供了两种文件引用方式:导入和包含1）导入可以使用该文件中目标文件定义的模板。导入有范围的概念，即只导入目标文件中定义的模板，而不导入目标文件导入的模板。2）include可以导入除目标文件之外的整个代码，这相当于将其复制到include位置。

第二，WXSSWXSS（WeiXin Style Sheets）是一种样式语言，用于美化WXML的组件样式，类似于web开发中的CSS。WXSS具有CSS的大部分功能，同时WXSS对CSS进行了扩展和修改，以适应微信小程序的开发。与CSS相比，WXSS扩展的特性有:

Rpx尺寸单位@导入样式导入1。rpx（responsive pixel）是微信小程序特有的大小单位，用于解决屏幕适配问题。rpx的实现原理非常简单:鉴于不同设备的屏幕尺寸不同，为了实现自动屏幕适配，rpx将所有设备的屏幕在宽度上划分为750个部分（即当前屏幕的总宽度为750rpx）。

在较小的设备上，1rpx表示的宽度在较大的设备上较小。以1rpx为代表的宽度较大的程序在不同设备上运行时，会自动将rpx的样式单位转换为对应的像素单位进行渲染，从而实现屏幕适配。

在iPhone6上，屏幕宽度为375像素，有750个物理像素，平均分为750rpx。那么:750rpx = 375px = 750物理像素1rpx = 0.5px = 1物理像素官方建议:开发微信小程序时，设计师可以使用iPhone6作为视觉草稿的标准。

2.样式导入使用WXSS提供的@import语法，可以导入外部样式表。@import后面是要导入的外部通信样式表的相对路径，该路径由定义；指示语句的结尾。

3.内联样式内联样式是一种支持使用样式和类属性来控制框架组件上的组件的样式。1）style:用于接收动态样式，这些样式将在运行时解析。2）类:用于指定样式规则。它的值是样式规则中类选择器名称（样式类名）的集合。通常，静态样式被写入相应样式类名的定义中。多个样式类名由空格分隔。

4.选择器像CSS、WXSS也需要使用选择器来确定样式的目标。

5.全局样式和局部样式1）全局样式:app.wxss中定义的样式是全局样式，它作用于每个页面。2）局部样式:在。页面的wxss文件是一种本地样式，仅适用于当前页面。

注意:当局部样式与全局样式冲突时，根据邻近原则，局部样式将优先于全局样式。只有当局部样式的权重大于或等于全局样式的权重时，全局样式才会被覆盖。

第三，WXS1。概念WXS（微信脚本）是一种独特的小程序脚本语言。结合WXML，可以构建页面的结构。

2.中定义的函数。在应用场景wxml中不能调用页面的js，但是在wxs中定义的函数可以在wxml中调用。因此，wxs在小程序中的典型应用场景是“滤镜”。

3.wxs和JavaScript之间的关系尽管wxs的语法类似于JavaScript，但WXS和JavaScript是完全不同的语言:（1）wxs有自己的数据类型:

数字数值类型字符串字符串类型布尔布尔布尔类型对象类型函数类型数组数组类型日期类型regexp regular（2）wxs不支持类似于ES6及更高版本的语法形式。

不支持:let、const、解构赋值、扩展运算符、箭头函数、对象属性缩写等……支持:var定义变量、普通函数function等类似ES5的语法（3）wxs遵循CommonJS规范。

模块对象require（）函数module.exports对象4。嵌入式wxs脚本wxs代码可以编写在wxml文件的标记中，就像Javascript代码可以编写在html文件的标记中一样。wxml文件中的每个标签都必须提供module属性，该属性用于指定当前wxs的模块名称，以便于在wxml中访问模块中的成员。。wxml:

{{m1。toupper（username）} }/将文本转换为大写zs-》zs module。出口。toupper = function（str）{ return str。toupper case（）} 5。定义outreach的wxs脚本也可以编写在带有后缀的文件中。wxs，就像javascript代码可以使用后缀一样。js。示例代码如下:

//tools.wxs文件函数lower（str）{ return str。to小写（）}模块。exports = { to low:to low } 6。当使用外部wxs脚本将外部wxs脚本引入wxml时，必须将模块和src属性添加到标签中，其中:

模块用于指定模块的名称。src用于指定要引入的脚本的路径，并且必须是相对路径。示例代码如下:

{{m2。to lower（country）} } 7。wxs的特点（1）不同于JavaScript为了降低wxs（微信脚本）的学习成本，WXS语言在设计时借鉴了大量JavaScript的语法。但本质上，wxs和JavaScript是完全不同的语言！（2）不能作为组件使用wxs的典型应用场景是“filter”，它通常与Mustache语法结合使用。但是，wxs中定义的函数不能用作组件的事件回调函数。（3）隔离隔离是指wxs的运行环境与其他JavaScript代码隔离。体现在以下两个方面:①wxs无法调用js中定义的函数；②wxs无法调用小程序提供的API④业绩良好；①小程序中的WXS将比iOS设备上的JavaScript代码快20倍；②在android设备上，它们的运行效率没有差异。

【相关学习推荐:小程序学习教程】

以上是微信小程序视图层的详细说明。更多资讯请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 手把手指导你在小程序中实现保存图片的功能（小程序申请保存图片到相册）
• 如何在小程序中创建页面二维码
• 小程序如何动态制作小程序码分析（如何在小程序中动态生成小程序二维码图片）
• 如何解决小程序中的重启跳转错误（小程序重启）
• 教你如何部署微信小程序并上线（如何在线部署小程序）

本文由主机参考刊发，转载请注明：微信小程序视图层详解（微信小程序界面图） https://zhujicankao.com/103796.html