VicdorLin
VicdorLin

微信小程序教学系列（2）

第二章：小程序开发基础

1. 小程序页面布局与样式

在小程序开发中，我们可以使用 WXML（WeiXin Markup Language）和 WXSS（WeiXin Style Sheet）来定义页面的布局和样式。

1.1 WXML基础

WXML 是一种类似于 HTML 的标记语言，用于描述小程序的结构。以下是一些常用的 WXML 标签：

  • ：用于替代 HTML 中的
    标签，表示一个视图容器。
  • ：用于显示文本内容。
  • ：用于显示图片。
  • ：用于创建输入框。

下面是一个简单的 WXML 示例：


  欢迎来到小程序

1.2 WXSS基础

WXSS 是一种类似于 CSS 的样式语言，用于修饰小程序的样式。以下是一些常用的 WXSS 样式属性：

  • font-size：设置字体大小。
  • color：设置字体颜色。
  • background-color：设置背景颜色。
  • width、height：设置元素的宽度和高度。
  • margin、padding：设置元素的外边距和内边距。
  • border：设置元素的边框样式。

下面是一个简单的 WXSS 示例：

.view {
  width: 200rpx;
  height: 200rpx;
  background-color: #f1f1f1;
  margin: 20rpx;
  padding: 10rpx;
  border: 1rpx solid #ccc;
}

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

.image {
  width: 100rpx;
  height: 100rpx;
}

1.3 小程序页面布局与样式实例

接下来，我们通过一个实例来演示小程序的页面布局与样式。

首先，创建一个名为 index 的页面，使用 来作为根容器，然后在其中添加一些文本和图片：


  欢迎来到小程序

然后，创建名为 index.wxss 的样式文件，在 index.wxss 文件中，我们为容器和文本添加样式：

.container {
  width: 300rpx;
  height: 300rpx;
  background-color: #f1f1f1;
  margin: 20rpx;
  padding: 10rpx;
  border: 1rpx solid #ccc;
}

.title {
  font-size: 20rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.logo {
  width: 200rpx;
  height: 200rpx;
}

以上就是小程序页面布局与样式的基础知识。通过使用 WXML 和 WXSS，我们可以灵活地创建出自己想要的页面布局和样式。

2. 小程序组件的使用

在小程序开发中，组件是构建页面的基本单元。小程序提供了丰富的组件库，包括基础组件和扩展组件，可以满足各种页面需求。

2.1 基础组件

小程序的基础组件包括常用的视图组件、表单组件、导航组件等。以下是一些常用的基础组件示例：

  • ：视图容器，用于包裹其他组件。
  • ：用于显示文本内容。
  • ：输入框组件，用于用户输入。
  • ：图片组件，用于显示图片。
  • ：轮播组件，用于展示图片轮播。
  • ：可滚动视图区域组件。

2.2 扩展组件

除了基础组件，小程序还提供了一些扩展组件，用于满足更复杂的页面需求。以下是一些常用的扩展组件示例：

  • ：图标组件，用于显示图标。
  • ：进度条组件，用于展示进度。
  • ：选择器组件，用于选择数据。
  • ：滚动选择器组件，用于滚动选择数据。
  • ：滑动条组件，用于选择范围。