🚀前言

在微信小程序的开发中，WXML（WeiXin Markup Language）和WXSS（WeiXin Style Sheets）是两个至关重要的技术，它们分别负责小程序的结构与样式设计。WXML作为微信小程序的标记语言，类似于HTML，帮助开发者定义页面的布局和结构；而WXSS则是其样式表语言，提供了丰富的样式设置功能，使得小程序的界面更加美观和用户友好。

随着小程序的迅速普及，掌握WXML与WXSS的使用技巧，已成为每位开发者必备的技能。本篇文章将深入探讨WXML和WXSS的基本语法、常用组件及其实际应用案例，帮助你更好地理解这两者如何协同工作，提升小程序的开发效率和用户体验。

无论你是小程序开发的新手，还是希望进一步提升技能的开发者，这篇文章都将为你提供实用的指导和灵感。让我们一起探索WXML与WXSS的奥秘，打造出更加出色的小程序应用吧！

🚀一、WXML与WXSS

WXML 全称 WeiXin Markup language，用于描述页面的框架结构。WXSS 全称 WeiXin StyleSheet，用于描述页面的样式。对于拥有用户交互页面的小程序来说，WXML和WXSS是开发中不可或缺的部分。

🔎1.WXML 简介

WXML 是小程序开发框架中的标签语言，类似于 HTML，用来构建页面的结构。WXML 主要用于定义页面的布局与内容，通过标签展示页面中的元素。每个页面上的元素实际上都是独立的组件，通过数据绑定将内容与页面组件结合，最终展示给用户。

🦋1.1 数据绑定

在 WXML 中，可以通过双大括号 {{}} 来进行数据绑定。双大括号内部的内容可以是 JavaScript 表达式，这些表达式通常引用当前页面组件 JS 文件中定义的变量或数据。

示例：

<text>{{nickName}}</text>

其中，nickName 是 JS 文件中定义的一个数据，WXML 会将其动态显示在页面上。

页面数据示例：

Page({
  data: {
    nickName: "Hello! 月小程序"
  }
});

小程序框架采用响应式数据绑定机制，页面组件的数据发生变化时，页面会自动刷新，开发者无需手动处理页面的更新。

🦋1.2 列表渲染

在小程序中，列表展示常常用到数据的遍历。通过 wx:for 指令，可以实现对数组数据的循环渲染。

示例：

假设在 JS 文件中有以下数据：

Page({
  data: {
    list: [1, 2, 3, 4]
  }
});

在 WXML 文件中，使用 wx:for 指令来渲染列表数据：

<text wx:for="{{list}}" wx:for-item="title">{{title}}</text>

• wx:for 指定要遍历的列表数据。
• wx:for-item 用来指定当前遍历项的变量名，可以在组件中直接使用这个变量。

获取当前遍历的位置：

如果需要获取当前项的索引（下标），可以使用 wx:for-index 来指定下标变量的名字：

<text wx:for="{{list}}" wx:for-item="title" wx:for-index="index">
  {{index}}: {{title}}
</text>

注意，遍历时下标是从 0 开始的。

🦋1.3 条件渲染

WXML 也支持条件渲染，可以通过 wx:if 指令控制组件是否渲染。当 wx:if 指定的条件为 true 时，当前组件会被渲染；如果为 false，组件会被隐藏。

示例：

<text wx:if="{{show}}">Hello World</text>

在这个例子中，show 是在 JS 文件中定义的逻辑控制字段。如果 show 为 true，则显示 Hello World，否则不显示。

🦋1.4 多分支条件渲染

WXML 还支持类似 JavaScript 中的 if-else 逻辑控制，使用 wx:elif 和 wx:else 来处理不同的条件分支。

示例：

<view wx:if="{{mark >= 90}}">优秀</view>
<view wx:elif="{{mark >= 70}}">良好</view>
<view wx:else>一般</view>

在这个例子中，根据 mark 的值不同，展示不同的文本：

• 如果 mark >= 90，显示 “优秀”；
• 如果 mark >= 70，显示 “良好”；
• 否则，显示 “一般”。

🔎2.WXSS 简介

WXSS（Weixin Style Sheets）是小程序用来描述组件样式的语言，它与 CSS 基本相同，但在 CSS 的基础上做了一些补充和优化。即使您对 CSS 不太熟悉，也不必担心，因为互联网上有大量关于 CSS 样式的资料可以参考，样式的设置也很简单，基本的语法和 CSS 一致。

🦋2.1 WXSS 基本语法

在 WXSS 中，样式通过选择器来定义，可以设置各种样式属性，如字体、颜色、边框等。基本的设置方式与 CSS 相同。

示例：

假设在页面中有一个 View 组件，如下所示：

<view class="container">
  <view class="test">测试</view>
</view>

上面的代码中，<view class="test"> 为文本 “测试” 设置了一个 test 类。接下来，在 index.wxss 文件中定义该类的样式：

.test {
  font-size: 20px;
  color: red;
  border: 2px black solid;
  padding: 5px;
  text-decoration: underline;
}

此代码设置了文字的大小、颜色、边框、内边距和下划线效果。页面上渲染出来的文本将显示为 20px 大小、红色、有边框并带有下划线的样式。

🦋2.2 WXSS 的优化：尺寸单位与样式导入

与传统的 CSS 相比，WXSS 有两个主要的优化：

1. 尺寸单位：引入了 rpx（响应式像素）单位，解决了不同设备屏幕尺寸之间的适配问题。
2. 样式导入：支持样式文件的导入方式，方便管理和复用样式。

🦋2.3 尺寸单位：rpx 和 px

在前端开发中，常用的尺寸单位有 px 和 pt，但这些单位在移动端开发中显得不够灵活。小程序在 WXSS 中引入了 rpx 单位，这是一种响应式的像素单位。

• rpx：全称是 Responsive Pixel（可响应的像素），它会根据屏幕的宽度做适当的调整。以 375px 宽度的屏幕为基准，1rpx 等于 1px。
• 设备适配：当设备分辨率较高时（如 2 倍屏），1px 通常会对应 2 个物理像素，而 1rpx 会相应地调整为 0.5px。比如，在 iPhone 6 等设备上，1rpx 等于 0.5px。

rpx 适配规则：

• 在物理宽度为 375px 的屏幕上，1rpx = 1px。
• 在 2 倍屏（如 iPhone 6）上，1rpx = 0.5px。

🦋2.4 页面布局与适配

在小程序中，组件的位置和大小主要通过 WXSS 控制。传统的 px 单位在不同设备上可能会出现适配问题，而 rpx 单位可以根据屏幕宽度进行自适应调整，从而确保在不同尺寸的设备上展示效果一致。

示例：

假设在 JS 文件中有一个简单的布局：

Page({
  data: {}
});

在 WXSS 文件中，使用 rpx 来定义组件的大小和位置：

.container {
  width: 100rpx;
  height: 100rpx;
  background-color: #ff0000;
}

这种方式在不同分辨率的屏幕上会自动适配，确保在各设备上的显示效果相对一致。

🦋2.5 设计标准与适配策略

通常，在设计小程序页面时，开发者会以 iPhone 6（屏幕宽度 375px）作为标准进行设计，这样可以确保在其他设备上渲染效果更接近。对于不同的设备尺寸，开发者可以通过 rpx 来进行自适应布局。如果有特殊的设备需求，也可以通过媒体查询或条件判断进行特殊处理。