微信小程序视图层详解(微信小程序逻辑层视图层的功能)

这篇文章给大家带来了一些关于微信小程序的知识，主要介绍了一些关于视图层的问题。视图层负责在页面上显示逻辑层的数据，并将视图层的事件发送给逻辑层。下面就一起来看看吧，希望对你有帮助。

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

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

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

Page({ data:{ // string类型数据信息: # 39；初始化数据 # 39；，//数组类型msgList的数据:默认情况下，当前循环项的索引用index表示；当前循环项由item表示。

(2)手动指定当前项的索引和变量名*使用wx:for-index指定当前循环项的索引的变量名。使用wx:for-item指定当前项的变量名。在wxml中:< view wx:for = ；{ { array } } wx:for -index = ；idx wx:for -item = ；项目名称 gt索引为:{{idx}}，当前项目为:{ { itemname } } </view gt；如图所示:

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

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

3.条件渲染(1)wx:if在applet中，使用wx:if = ；{ { condition } } 确定代码块是否需要渲染，否则可以用wx:elif和wx:else添加。例子如下:在。js:

页面({ data: {type:1 }})。wxml:

ltview wx:if = ；{ { type = = = 1 } } gt男性</view gt； ltview wx:elif = ；{ { type = = = 2 } } gt女性</view gt； lt查看wx:else gt；机密

ltblock wx:if = ；{ { true } } gt lt视图 gtview1 lt/view gt； lt视图 gtview2 lt/view gt； lt/block gt；注意:< block gt它不是一个组件，只是一个包装好的容器，不会在页面中做任何渲染。

(3)隐藏在小程序中，使用hidden = 直接。{ { condition } } 您还可以控制元素的显示和隐藏:

lt视图隐藏= { { flag } } gt真，假显示</view gt；(4)wx:if与hidden1)操作方式不同:wx:if通过动态创建和移除元素来控制元素的显示和隐藏。隐藏在切换风格的方式(显示:无/块；)来控制元素的显示和隐藏。2)使用建议:频繁切换建议隐藏。当控制条件复杂时，建议使用wx:if配合wx:elif和wx:else在显示和隐藏之间切换。

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

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

气泡事件:当组件上的事件被触发时，它将被传递到父节点。非冒泡事件:当组件上的事件被触发时，该事件不会被传递到父节点。(1)如何利用事件。在wxml中:

lt按钮类型= 主要 bindtap = btnTapHandler gt纽扣

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

(2)事件的分类

(3)事件的绑定和冒泡；(4)捕捉事件的阶段；(5)组件触发事件时的事件对象。逻辑绑定该事件的处理程序将接收一个事件对象。

(6)在事件处理函数中为数据中的数据赋值。通过调用this.setData(dataObject)方法，可以为页面数据中的数据重新赋值。例子如下:在。wxml:

lt按钮类型= 主要 bindtap = countChange gt+1 lt；/button gt；事件处理函数在。js:

page ({data: {count: 0}，//+1按钮的事件处理函数，count change(){ this . setdata({ count:this . data . count+1 } } })的效果如图:

(7)事件传递参数小程序中的事件传递参数比较特殊，在绑定事件的同时无法为事件处理程序传递参数。您可以为组件提供data-*自定义属性参数，其中*表示参数的名称，示例代码如下:

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

lt按钮类型= 主要 bindtap = binTap2 data -info = ；{ { 2 } } gt+2 lt；/button gt；英寸js:(在事件处理函数中，具体参数的值可以通过event.target.dataset的参数名获得)

page ({data: {count: 0}，//+2 bintap 2(event){ this . setdata({ count:this . data . count+event . target . dataset . info } })的效果如图:1

(8)8)bind input的语法格式在applet中，输入事件用于响应文本框的输入事件。英寸wxml:

lt输入bindinput = inputHandler gt lt/input gt；事件处理函数在。js:

输入输入框的page({//事件处理程序(event){ console . log(event . detail . value)})效果如图:1

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

5.模板6。引用WXML提供了两种文件引用方式:导入和包含1)导入可以在这个文件中使用目标文件定义的模板。导入有范围的概念，即只导入目标文件中定义的模板，而不导入目标文件导入的模板。2)include可以包括目标文件，除了

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

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

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

在iPhone6上，屏幕宽度为375px，有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.中定义的函数。页面的js不能在wxml中调用，但是wxs中定义的函数可以在wxml中调用。所以wxs在小程序中的典型应用场景是“滤镜”。

3.wxs和JavaScript的关系虽然wxs的语法和JavaScript类似，但是WXS和JavaScript是完全不同的语言:(1)wxs有自己的数据类型:

数字类型字符串字符串类型布尔类型对象类型函数函数类型数组数组类型日期类型regexp regular (2)wxs不支持与ES6及更高版本类似的语法

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

对象模块require()函数module.exports对象4。嵌入式wxs脚本wxs代码可以写在< wxs gt标签，就像Javascript代码可以用html编写一样

lt视图 gt{{m1.toUpper(用户名)} } lt/view gt； ltwxs module = m1 gt//将文本转换成大写的ZS->；ZS module . exports . toupper = function(str){ return str . toupper case()} lt；/wxs gt；5.定义外展wxs代码的wxs脚本也可以用。wxs后缀，就像javascript代码可以用。js后缀。示例代码如下:

//tools.wxs文件函数to lower(str){ return str . to lower case()} module . exports = { to lower:to lower } 6 .当使用外部wxs脚本将外部wxs脚本引入wxml时，必须向标记添加模块和src属性，其中:

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

lt！m2模块中的--调用方法-3 >: lt；viewr gt{ { m2 . to lower(country)} } lt；/view gt； lt！--引用外部tools.wxs脚本，命名为M2-->； ltwxs src = ../../utils/tools . wxs ；module = m2 gt lt/wxs gt；7.wxs (1)不同于JavaScript的特点。为了降低wxs(微信文字)的学习成本，WXS语言在设计时借鉴了大量的JavaScript语法。但本质上，wxs和JavaScript是完全不同的语言！(2)不能作为组件使用的事件回调wxs。典型的应用场景是“filter”，它经常与Mustache语法一起使用。但是，wxs中定义的函数不能用作组件的事件回调函数。(3)隔离隔离是指wxs的运行环境与其他JavaScript代码隔离。体现在以下两个方面:①wxs无法调用js中定义的函数②wxs无法调用小程序提供的API)性能良好①在iOS设备上，小程序中的wxs会比JavaScript代码快2 ~ 20倍②在android设备上，两者运行效率没有区别。

【相关学习推荐:小程序学习教程】以上是微信小程序视图层的详细内容。请多关注主机参考其他相关文章！

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

• 微信小程序翻译功能上线：现已支持18种语言
• 如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
• 微信小程序无法获取位置信息怎么办？（微信小程序无法获取位置信息）
• 微信小程序如何实现九宫格跳（如何在小程序中配置九宫格抽奖）
• 如何调节微信小程序的亮度？

本文由主机参考刊发，转载请注明：微信小程序视图层详解(微信小程序逻辑层视图层的功能) https://zhujicankao.com/73483.html