03. WXML与WXSS

WXML（WeiXin Markup Language）和 WXSS（WeiXin Style Sheets）是小程序的标记语言和样式语言。

一、WXML 基础

数据绑定

<view>{{message}}</view>

Page({
    data: {
        message: "Hello, 小程序!"
    }
});

列表渲染

<view wx:for="{{list}}" wx:key="index">
    {{index}}: {{item.name}}
</view>

Page({
    data: {
        list: [
            { name: "张三" },
            { name: "李四" }
        ]
    }
});

条件渲染

<view wx:if="{{condition}}">条件为真时显示</view>
<view wx:else>条件为假时显示</view>

模板

<!-- 定义模板 -->
<template name="user">
    <view>{{name}} - {{age}}</view>
</template>

<!-- 使用模板 -->
<template is="user" data="{{...user}}" />

---

二、WXSS 常用属性

基础样式

.container {
    padding: 30rpx; /* rpx 是小程序的单位 */
    background-color: #f0f0f0;
}

.text {
    font-size: 32rpx;
    color: #333;
}

Flex 布局

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

---

总结

WXML 和 WXSS 类似 HTML 和 CSS，但有一些特殊的语法和单位需要掌握。