本文为您带来了微信applet的相关知识，主要介绍了视图层的相关问题。视图层负责在页面上显示逻辑层的数据，并将视图层的事件发送到逻辑层。让我们看看。我希望它能对你有所帮助。

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

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

数据绑定的基本原则：
1）在 data 定义页面数据：页面对应 .js 将数据定义到文件中 data 可以在对象中。

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

2）在 WXML 使用数据：将data中的数据绑定到页面渲染，使用 Mustache 语法(双括号)可以包裹变量。语法格式如下:

<view>{{要绑定的数据名称}}</view>

Mustache 语法的主要应用场景如下：
①内容。数据内容直接显示在页面上。
②组件属性。用后端变量设置前端部件的属性，注意双括号所包含的变量需要在属性的双引号中。
③控制属性。用后端变量控制前端组件的显示效果，注意双括号所包含的变量需要在属性的双引号中。
④关键词。主要用于逻辑判断。

①三元运算。三元运算可以在双括号内进行。
.js中：

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

.wxml中：

<view>{{randomNum&gt;=5.数字大于等于5:"数字小于5"}</view>

②算术操作。基本算术操作可以在双括号内进行，运算后的结果可以直接显示。
③逻辑判断。在双大括号中，可以进行逻辑操作，返回boolean类型的true或false，可用于控制某些属性。
④字符串操作。字符串的拼接操作可以在双括号内进行。
⑤数据路径操作。对于数组和JSON对象类型的数据，索引可以在双括号中取其值。

①数组
②对象

通过 wx:for 重复的组件结构可根据指定的数组进行循环渲染。语法示例如下：
.js中：

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

.wxml中：

<view>
?索引是：{{index}}，当前项是：{{item}}
</view>

效果如图：

在默认情况下，使用当前循环项的索引 index 表示；使用当前循环项 item 表示。

• 使用 wx:for-index 可指定当前循环项索引的变量名
• 使用 wx:for-item 可以指定当前项目的变量名
  .wxml中：

<view>
?索引是：{{idx}}，当前项是：{{itemName}}
</view>

效果如图：

类似于 Vue 列表渲染 :key，在实现列表渲染时，还建议将唯一的列表项指定为渲染列表项 key 为了提高渲染效率，示例代码如下：
.js中：

Page({
??data:?{
????userList:[
??????{id:1,name:"冠军"，
??????{id:2,name:"亚军"，
??????{id:3,name:'季军'}
????]
??}
})

.wxml中：

<view>{{item.name}}</view>

效果如图：

wx:以下两种形式提供key值：
1)字符串。代表wx:for循环数组中某个属性的值需要是列表中唯一的字符串或数字，不能动态更改。
2)保留关键字*this。代表在wx:for循环中的某个项目本身，这意味着这个项目本身需要一个唯一的字符串或数字。

在小程序中，使用 wx:if="{{condition}}" 判断是否需要渲染代码块，也可以使用 wx:elif 和 wx:else 来添加 else 判断。例子如下：
.js中：

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

.wxml中：

<view>男</view><view>女</view><view>保密</view>

如果要一次控制多个组件的显示和隐藏，可以使用一个 将多个组件包装在标签中 标签上使用 wx:if 例如，控制属性如下：

<block>
?<view>view1</view>
?<view>view2</view></block>

注意： 它不是一个组件，它只是一个包装容器，不会在页面上渲染任何东西。

直接使用小程序 hidden="{{ condition }}" 它还可以控制元素的显示和隐藏：

<view>true隐藏，false显示</view>

1)不同的操作方式:
wx:if 控制元素的显示和隐藏，以动态创建和删除元素。
hidden 切换样式（display: none/block;），显示和隐藏控制元素。
2)使用建议：
建议在频繁切换时使用 hidden。
当控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 切换显示和隐藏。

事件是从视图层到逻辑层的通信方式，可以将用户的行为反馈给逻辑层。事件通常绑定在组件上。当设置监控事件被触发时，视图层将携带id、dataset、touches等信息的事件对象发送到逻辑层，此时框架将执行到逻辑层
相应的事件处理函数，以响应用户的操作。

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

• 泡沫事件：当一个组件上的事件被触发时，事件就会传递给父节点。
• 非冒泡事件:当一个组件上的事件被触发时，事件不会传递给父节点。

.wxml中：

<button>按钮</button>

.js定义事件处理函数：

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

效果如图：

调试器Console面板的输出信息大致如下：

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

通过调用 this.setData(dataObject) 方法，可以给页面 data 重新赋值中的数据。例如：
.wxml中：

<button> 1</button>

.js定义事件处理函数：

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

效果如图：

小程序中的事件传输参数比较特殊，事件处理函数传输参数不能同时绑定事件。它可以为组件提供 data-* 自定义属性传参，其中 * 代表参数名称，示例代码如下：

.wxml中：（ info 它将被分析为参数的名称和数值 2 它将被分析为参数值。)

<button> 2</button>

.js中：(通过事件处理函数 event.target.dataset.参数名 具体参数的值可以获得)

Page({
??data:?{
????count:0
??},
??
??// 2?
??bintap2(event){
????this.setData({
??????count:this.data.count? ?event.target.dataset.info
????})
??}
})

效果如图：

通过小程序 input 响应文本框的输入事件。
.wxml中：

<input>

.js 定义事件处理函数：

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

效果如图：

实现步骤：①定义数据；②渲染结构；③美化样式；④绑定 input 事件处理函数。

WXML提供两种文件引用方式：import 和 include
1）import 目标文件定义的模板可用于本文件。import 有效域的概念，即只导入目标文件中定义的模板，而不导入目标文件导入的模板。
2）include 除目标文件外，还可以引入外部代码相当于复制 include 位置。

WXSS (WeiXin Style Sheets)它是一套用于美化的风格语言 WXML 组件样式类似于网页开发 CSS。WXSS 具有 CSS 同时，大多数特征，WXSS 还对 CSS 为了适应微信小程序的开发，进行了扩展和修改。
与 CSS 相比，WXSS 扩展的特点有：

• rpx 尺寸单位
• @import 样式导入

rpx（responsive pixel）它是微信小程序独有的，用于解决屏幕适应的尺寸单元。
rpx 实现原理很简单：鉴于不同设备的屏幕尺寸不同，为实现屏幕的自动适应，rpx 将所有设备的屏幕等同于宽度 750 (即:当前屏幕的总宽度为 750rpx）。

• 在较小的设备上，1rpx 代表的宽度较小
• 1rpx在较大的设备上 代表宽度较大

当小程序在不同的设备上运行时，它会自动移动 rpx 将样式单元转换为相应的像素单元进行渲染，从而实现屏幕适应。

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

使用 WXSS 提供的 @import 语法，可以导入外联风格表。
@import 使用后跟需要导入的外联风格表的相对路径 ; 表示句子结束。

内联风格支持框架组件的使用 style、class 控制组件样式的属性。
1）style：用于接收动态样式，在运行过程中进行分析。
2）class：用于指定样式规则。其值是样式规则中选择器名(样式类名)的集合。静态样式一般写在相应样式类名的定义上。多种样式的类名用空间分隔。

与CSS一样，WXSS也需要使用选择器来确定风格的对象。

1)全局样式:定义 app.wxss 作用于每个页面的中间样式为全局样式。
2)局部风格:页面 .wxss 文件中定义的样式是局部样式，只作用于当前页面。

注意：
当局部风格与全局风格发生冲突时，按照就近原则，局部风格将覆盖全局风格。
只有当局部风格的权重大于或等于全局风格的权重时，才能覆盖全局风格。

WXS（WeiXin Script）是小程序独特的脚本语言，结合 WXML，页面结构可以构建。

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

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

• number 数值类型
• string 字符串类型
• boolean 布尔类型
• object 对象类型
• function函数类型
• array 数组类型
• date 日期类型
• regexp 正则

（2）wxs 类似的不支持 ES6 以上语法形式

• 不支持：let、const、解构赋值，扩展计算符，箭头函数，对象属性简写，etc…
• 支持：var 定义变量，普通 类似于function函数 ES5 的语法

（3）wxs 遵循 CommonJS 规范

• module 对象
• require() 函数
• module.exports 对象

wxs 可以在代码上编写 wxml 文件中的 在标签里，就像 Javascript 可以在代码上编写 html 文件中的 <script> 标签内部相同。<br/> wxml 文件中的每一个 <wxs></script> 必须提供标签 module 属性，用来指定当前 wxs 模块名称，方便 wxml 访问模块中的成员。
.wxml中：

<view>{{m1.toUpper(username)}}</view><wxs>
??////将文本转化为大写zs形式?-&gt;?ZS
??module.exports.toUpper?=?function(str)?{
????return?str.toUpperCase()
??}
</wxs>

wxs 以上还可以编写代码 .wxs 在后缀名的文件中，就像 javascript 以上可以编写代码 .js 文件中的后缀名相同。示例代码如下：

//tools.wxs文件
function?toLower(str)?{
??return?str.toLowerCase()
}

module.exports?=?{
??toLower:?toLower
}

在 wxml 将外联引入中 wxs 脚本时，一定要做 标签添加 module 和 src 属性，其中：

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

示例代码如下：

<!--在m2模块中调用方法-->
<viewr>{{m2.toLower(country)}}

<!--引用外联tols引用tols.wxs脚本，并命名为wxs脚本 m2-->
<wxs></wxs></viewr>

（1）与 JavaScript 不同
为了降低 wxs（WeiXin Script）学习成本， wxs 在设计语言时借了很多鉴 JavaScript 语法。但本质上，wxs 和 JavaScript 两种语言完全不同！
(2)不能作为组件的事件回调
wxs 典型的应用场景是“过滤器” Mustache 使用语法。但是，在 wxs 定义的函数不能作为组件的事件回调函数。
（3）隔离性
隔离是指 wxs 运行环境等 JavaScript 代码是隔离的。体现在以下两个方面：
①wxs 不能调用 js 函数的定义
②wxs 小程序提供的不能调用 API
（4）性能好
①在 iOS 在设备上，小程序内 WXS 会比 JavaScript 代码快 2 ~ 20 倍
②在 android 在设备上，两者的运行效率没有差异

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

以上是微信小程序视图层的详细内容，请关注其他相关文章！