微信小程序视图层详解（微信小程序视图层和逻辑层）

本文提供了微信小程序的相关知识。 我们主要介绍视图层相关的相关问题。 视图层在页面上显示逻辑层数据并发送视图层事件。 我们来看看逻辑层。 我希望这对你有帮助。

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

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

1、WXML1、数据绑定（一）简单绑定

数据绑定的基本原理： 1）用数据为页面定义数据：在页面对应的.js文件中的数据对象中定义数据。我会。

Page({ data:{ //字符串类型数据 info: 'init data ' , //数组类型数据 msgList: [{msg: 'hello'}, {msg: "world '}] } })

2）使用WXML中的数据：将data中的数据绑定到页面上，使用Mustache语法（双花括号）就足够了。 格式为：

{{绑定数据名称}}

Mustache语法的主要应用场景是： ① 将内容直接放在页面上显示属性 使用后端变量来设置属性。对于前端组件，请注意这些变量包含在双花括号中。变量必须用属性双引号引起来。 ③控制属性。 使用后端变量来控制前端组件的显示效果。 请注意，双花括号中的变量必须用属性双引号括起来。 ④关键词。 主要用于逻辑判断。

(2)运算

①三元运算。 三元运算可以在双花括号内执行。 对于 .js：

Page({ data: { randomNum:Math.random()*10 }})

对于 .wxml：

{{randomNum>=5？'大于5':'数字小于5'}}

②四次算术运算。 可以在双花括号内执行基本算术运算，并直接显示结果。 ③逻辑判断。 在双大括号内，可以进行逻辑运算，返回布尔值 true 或 false，可用于控制某些属性。 ④ 字符串操作。 在双花括号内，您可以执行字符串连接操作。 ⑤数据路径操作。 对于数组和 JSON 对象类型数据，可以通过双花括号内的索引来检索值。

（3）组合

①数组 ②对象

2.绘制列表 （1）wx:for

wx:for 根据指定的内容循环遍历重复组件结构即可。画。 数组，语法示例为： 在 .js 中：

Page({ data: { array:['a','b','c'] }})

在 .wxml 中：

索引为{{index}}，当前项为{{item}}

效果 默认情况下，当前循环项的索引用index表示。 当前循环项由 item 表示。

(2)手动指定当前循环项索引和变量名 *使用wx:for-index指定当前循环项索引的变量名。 使用 wx:for-item 指定当前项的变量名。 .wxml: 索引为 {{idx}}，当前项目为 {{itemName} }

效果如图。

(3) wx:key

与 Vue 列表渲染的 :key 类似，如果小程序实现了列表渲染，这也适用。 我们建议渲染具有唯一键值的列表项，这可以提高渲染效率。 示例代码如下。 .js:

Page({ data: { userList:[ {id:1,name:'冠军'}, {id:2,name:'亚军'}, { id:3,name:'第三名'} ] }})

.wxml:

{{item.name}}

效果如图。 wx:key 值以两种格式提供： 1）字符串。 表示 wx:for 循环中数组中项目的属性。 属性值必须是列表内唯一的字符串或数字，并且不能动态更改。 2) 保留关键字*this。 代表 wx:for 循环中的项目本身。 这种表示形式要求项目本身是唯一的字符串或数字。

3.条件渲染（1）wx:if

在小程序中，使用wx:if="{{condition}}"来判断一段代码是否应该渲染。 您还可以使用 wx:elif 和 wx:else 添加 else 测试。 一个例子是： 对于 .js：

Page({ data: { type:1 }})

对于 .wxml：

男女机密 (2) 组合 使用 wx:if

如果要控制一次显示和隐藏多个组件，可以使用 标签包裹多个组件，并使用 wx:if 的示例标记为：

view1 view2

注意：不是一个组件，它只是一个包装容器，不会对页面进行任何渲染

(3)隐藏

在小程序中，hidden=。 “{{ 健康）状况 }}" 直接显示和显示元素。隐藏：

true为隐藏，false为显示 (4)wx:if和hidden

1）不同的工作方式：wx:if Hidden 控制元素的动态创建和删除 Hidden 通过切换元素的样式来控制元素的可见性（显示： 2）推荐用法：如果控制条件比较复杂，建议使用wx:if搭配wx:elif，wx:else建议使用

4. 事件

事件是从视图层到逻辑层的通信方法。 用户的操作可以反馈到逻辑层进行处理。 事件通常绑定到组件。 当监控的事件集被触发时，视图层会向逻辑层发送包含ID、数据集、触摸等信息的事件对象。 此时框架在逻辑层执行相应的功能。 响应用户交互的事件处理功能。

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

冒泡事件：当组件上的事件被触发时，该事件被传递到父节点。 非冒泡事件：当组件上的事件被触发时，该事件不会传递到父节点。 （1）如何使用事件

.wxml：

Button

.js中定义的事件处理函数：

Page({ // 定义按钮的事件处理函数。 btnTapHandler(event){ console.log(event) }})

结果如图所示。 调试器控制台面板大致如下所示：

(2)事件分类

(3)事件绑定和冒泡 (4)事件捕获阶段 (5)事件对象

当组件触发事件时。 由逻辑层绑定到事件的处理函数接收事件对象。

（6）使用事件处理函数为data数据赋值。

通过调用this.setData(dataObject)方法，可以为页面上的data数据重新赋值。 一个例子是： 在.wxml中：

+1

.js中定义的事件处理函数：

Page( { data: { count: 0 }, //+1 按钮内容事件处理函数 countChange(){ this.setData({ count:this.data.count +1 }) }})

效果如图。

(7) 传递事件参数

事件参数的传递在小程序中比较特殊，绑定事件时不能向事件处理函数传递参数。 您可以为组件指定 data-* 自定义属性参数。 这里，*代表参数的名称。 示例代码如下。

在.wxml中：（info被解析为参数的名称，value 2被解析为参数的值）

+2

.js：（在事件处理函数中，某些参数为 event.target.dataset.parameter name.value）

页面（{ 数据： { count:0 }, //+2 binTap2(event){ this.setData({ count:this.data.count + events.target.dataset.info }) }})

效果如图数字 。

(8) BindingInput 语法形式

小程序中，文本框输入事件如下所示： 通过输入事件回答。 .wxml中：

.js中定义了事件处理函数：

Page({ //input输入框的事件处理函数 inputHandler(事件 ){ console.log(event.detail.value) }})

效果如下。

(9)实现文本框与数据之间的数据同步。

实现步骤：①定义数据。 ②渲染结构。 ③ 让你的风格变得漂亮。 ④ 绑定输入事件处理函数。

5. 模板 6. 引用

WXML 提供了两种引用文件的方式：导入和包含。 1) 导入可以使用文件内目标文件定义的模板。 import 有范围的概念。 即仅导入目标文件中定义的模板，而不导入目标文件导入的模板。 2）include可以引入目标文件除之外的全部代码。 这与复制到包含位置相同。

2.WXSS

WXSS（WeiXin Style Sheets）是一组用于对WXML组件进行精美样式设计的样式语言，类似于Web开发中的CSS。 WXSS 具有 CSS 的大部分功能。 同时，WXSS对CSS进行了扩展和修改，以适应微信小程序开发。 以下是 WXSS 扩展与 CSS 相比的特点：

rpx 尺寸单位 @import style import 1、尺寸单位

rpx（响应像素）是微信小程序特有的，用于解析屏幕适配单元的尺寸。 。 rpx的实现原理非常简单。 为了考虑各种设备屏幕尺寸的不同，实现屏幕自动适配，rpx将所有设备的屏幕按宽度（即当前屏幕的总宽度）划分为750等份。 屏幕转速为 750rpm）。

对于较小的设备，1rpx 表示的宽度会更小。 在较大的设备上，以 1rpx 表示的宽度会增加。

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

在iPhone6上，屏幕宽度为375像素，总共750个物理像素分为750个rpx。 在这种情况下：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 文件中定义的样式是部分样式，仅适用于当前页面。

注意：如果局部样式与全局样式冲突，则根据就近原则，局部样式会覆盖全局样式。 如果局部样式的权重大于或等于全局样式的权重，则全局样式将被覆盖。

3.WXS1。 概念

WXS（WeiXin Script）是一种独特的小程序脚本语言。 您可以通过将其与 WXML 结合来构建页面结构。

2. 应用场景

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

3.wxs 和 JavaScript 的关系

wxs 的语法与 JavaScript 类似，但是 wxs 和 JavaScript 是两种完全不同的语言： （1）wxs 有自己的数据类型：

数字类型字符串字符串类型 boolean 布尔类型 Object 对象类型 Function 函数类型 Array 数组类型 date 日期类型 regexp 正则

(2) wxs 不支持类似于 ES6 或更高版本的语法形式

不支持：let、const、结构化赋值、扩展运算符、箭头函数、对象属性缩写等...支持：变量、正则函数、ES5 var 定义其他类似

的语法 (3) wxs 遵循 CommonJS 规范

module object require() function module.exports object 4. 嵌入 wxs 脚本

wxs 代码为 ，可以写在 标签，就像 JavaScript 代码一样。 in 与 HTML 文件中的 标记内部相同。 wxml 文件中的每个 标记必须提供一个模块属性。 该属性用于指定当前wxs的模块名称，以方便访问wxml中的模块成员。 在.wxml中：

{{m1.toUpper(username)}} //将文本转换为大写 zs -> ZS module.toUpper 。 = function(str) { return str.toUpperCase() }5. 在 .js 中定义外部 wxs 脚本

JavaScript 代码 正如您可以在后缀为.wxs的文件中编写.wxs一样，您也可以在后缀为.js的文件中的.wxs中编写wxs代码。 示例代码如下。

//tools.wxs文件函数toLower(str) { return str.toLowerCase()}module.exports = { toLower: toLower}6.使用外部wxs脚本

时，在wxml中引入外部wxs脚本时，必须在标签中添加module和src属性。 。 其中：

module用于指定模块名称 src用于指定导入脚本的路径，必须是相对路径

示例代码如下：

{{m2.toLower(country)}}7。 WXS的特点

(1) 为了降低学习成本，wxs（微信脚本）与JavaScript不同，它的设计目的是大量使用JavaScript语法。 但本质上，wxs 和 JavaScript 是两种完全不同的语言。 (2) 不能用作组件事件回调。 wxs的一个典型应用场景是“过滤器”，常用于Mustache语法中。 但是wxs中定义的函数不能作为组件的事件回调函数。 （3）隔离 隔离是指将wxs执行环境与其他JavaScript代码分开。 这体现在两个方面： ① wxs无法调用js中定义的函数。 ② wxs无法调用小程序提供的API。 （4）性能优越 ① 在iOS设备上，小程序中的WXS比JavaScript代码快2-20倍。 ② 在Android设备上，两者运行效率没有差异。不同

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

下载微信应用

微信允许您通过手机网络发送和接收语音消息、视频、照片和文本。支持传输的移动通讯软件。 。 微信带来了全新的移动通信体验，您可以单独或群组聊天，还可以根据您的地理位置查找附近的人。 有需要的朋友，请快来保存您的下载体验吧！

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

• 微信小程序页面路由知识总结（微信小程序路由）
• 微信小程序云服务配置详解（微信小程序云服务器、云数据库需要费用吗？）
• 订阅号和小程序有什么区别（订阅号是关联小程序的）
• 微信小程序开发常用功能汇总（微信小程序开发功能介绍）
• 微信小程序全局配置和页面配置详解（微信小程序全局变量如何设置）

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