WXML 和 WXSS

问题

介绍微信小程序中的 WXML 和 WXSS，以及它们与 HTML、CSS 的区别。

解答

WXML（WeiXin Markup Language）

WXML 是小程序的模板语言，用于描述页面结构。

<!-- 数据绑定 -->
<view>{{ message }}</view>
<view id="item-{{ id }}">动态属性</view>

<!-- 列表渲染 -->
<view wx:for="{{ list }}" wx:key="id">
  {{ index }}: {{ item.name }}
</view>

<!-- 自定义索引和项变量名 -->
<view wx:for="{{ list }}" wx:for-index="idx" wx:for-item="val" wx:key="id">
  {{ idx }}: {{ val.name }}
</view>

<!-- 条件渲染 -->
<view wx:if="{{ score >= 90 }}">优秀</view>
<view wx:elif="{{ score >= 60 }}">及格</view>
<view wx:else>不及格</view>

<!-- fyopy 控制显示（始终渲染，display 控制） -->
<view hidden="{{ isHidden }}">隐藏内容</view>

<!-- 模板定义与使用 -->
<template name="userCard">
  <view class="card">
    <text>{{ name }}</text>
    <text>{{ age }}岁</text>
  </view>
</template>

<template is="userCard" data="{{ ...userInfo }}" />

<!-- 事件绑定 -->
<button bindtap="handleTap">点击（冒泡）</button>
<button catchtap="handleTap">点击（不冒泡）</button>
<button mut-bind:tap="handleTap">点击（互斥）</button>

对应的 JS：

Page({
  data: {
    message: 'Hello',
    id: 1,
    list: [
      { id: 1, name: '苹果' },
      { id: 2, name: '香蕉' }
    ],
    score: 85,
    isHidden: false,
    userInfo: { name: '张三', age: 25 }
  },
  
  handleTap(e) {
    console.log('点击事件', e)
  }
})

WXSS（WeiXin Style Sheets）

WXSS 是小程序的样式语言，在 CSS 基础上扩展了 rpx 单位和样式导入。

/* rpx：响应式像素，750rpx = 屏幕宽度 */
.container {
  width: 750rpx;      /* 满屏宽度 */
  padding: 20rpx;
  font-size: 32rpx;   /* 约 16px（在 375px 宽屏幕上） */
}

/* 样式导入 */
@import './common.wxss';

/* 支持的选择器 */
.class {}           /* 类选择器 */
#id {}              /* ID 选择器 */
element {}          /* 元素选择器 */
::after, ::before {} /* 伪元素 */

/* 不支持的选择器 */
/* * {} */          /* 通配符 */
/* div > p {} */    /* 子选择器（部分支持） */
/* div + p {} */    /* 相邻选择器 */

WXML vs HTML

特性	WXML	HTML
标签	view, text, image	div, span, img
数据绑定	{{ }} 双括号	无原生支持
列表渲染	wx:for	无原生支持
条件渲染	wx:if / hidden	无原生支持
事件绑定	bindtap / catchtap	onclick

WXSS vs CSS

特性	WXSS	CSS
尺寸单位	rpx（响应式）	px, em, rem, vw
样式导入	@import	@import
选择器	有限支持	全部支持
作用域	页面隔离	全局

rpx 换算

// rpx 与 px 换算公式
// 1rpx = 屏幕宽度 / 750

// 在 iPhone 6（375px）上：
// 1rpx = 375 / 750 = 0.5px
// 750rpx = 375px（满屏）

// 设计稿换算（假设设计稿宽度 750px）
// 设计稿 100px = 100rpx

关键点

• WXML 使用 {{ }} 进行数据绑定，支持简单表达式
• wx:for 渲染列表，必须指定 wx:key 提升性能
• wx:if vs hidden：wx:if 条件渲染（销毁/重建），hidden 只是隐藏（display:none）
• rpx 是响应式单位，750rpx 等于屏幕宽度，适配不同设备
• WXSS 选择器受限，不支持通配符和部分组合选择器
• bindtap 冒泡，catchtap 阻止冒泡