第2天课程：WXML和WXSS基础

第2天课程：WXML和WXSS基础

1. 学习WXML（微信小程序的HTML）的基本结构和语法

WXML是微信小程序中用于描述页面结构的标记语言，其语法类似于HTML。在微信小程序中，一个页面通常由WXML、WXSS、JS和JSON四个文件组成。

WXML的基本结构如下：

<view>
  <text>Hello, World!</text>
</view>

WXML中的标签称为组件，微信小程序提供了丰富的内置组件，如view、text、image等。

2. 学习常用的WXML标签及属性

以下是一些常用的WXML组件：

• view：相当于HTML中的div，用于布局和容纳其他组件。
• text：用于显示文本内容。
• image：用于展示图片。
• button：按钮组件。
• input：输入框组件。
• form：表单组件。
• navigator：页面导航组件。

您可以访问以下链接查看更多组件及其详细说明：

https://developers.weixin.qq.com/miniprogram/dev/component/

3. 学习WXSS（微信小程序的CSS）的基本语法与规则

WXSS是微信小程序的样式表语言，用于描述页面的外观样式。它的语法与CSS非常相似，但有一些微信特有的扩展。

WXSS支持选择器、样式规则、单位、样式导入等特性。其中，尺寸单位除了支持常见的px，还引入了rpx（responsive pixel）这一相对单位，以实现在不同屏幕尺寸下的自适应。

4. 掌握布局、定位、字体样式、颜色等基本样式设置

您需要学习以下几个方面的WXSS样式设置：

• 布局：使用display、flex等属性控制页面布局。
• 定位：使用position、top、left等属性控制组件位置。
• 字体样式：设置字体大小、颜色、加粗等。
• 背景与边框：设置背景颜色、图片、边框样式等。
• 间距：使用margin、padding等属性调整组件间距。

今天的任务是学习WXML和WXSS的基本知识，熟悉微信小程序中的页面结构和样式设置。建议您阅读官方文档并尝试编写一些简单的示例代码，以便更好地掌握这些知识。如果遇到问题，请随时向我提问，我会竭诚为您解答。祝您学习愉快！