微信小程序开发基础（二）基本组件

本帖开始介绍小程序中的一些基本组件~ 

微信小程序是一种轻量、快速、跨平台的应用程序，是微信公众号的重要组成部分。随着微信小程序的普及，越来越多的开发者和企业开始使用微信小程序来搭建自己的应用，但是对于初次接触微信小程序的开发者来说，可能不太清楚微信小程序支持哪些基础组件。本文将为大家介绍微信小程序支持的基本组件，希望对大家有所帮助。

1. 视图容器（View）

微信小程序中，视图容器是最基本的组件之一，用于展示界面元素。视图容器可以嵌套其他组件，包括文本、图片、按钮等。视图容器也可以设置不同的样式，包括背景颜色、边框、圆角等。通过使用视图容器组件，我们可以实现各种简单和复杂的界面布局。

2. 文本（Text）

文本组件是我们常用的界面元素之一，用于展示文字信息。文本组件支持显示单行或多行文本，同时也支持设置字体颜色、大小、对齐方式等样式属性。在微信小程序中，文本组件可以和视图容器组件嵌套使用，从而实现更加丰富的布局效果。

3. 轮播（swiper）

轮播组件用于实现轮播效果，比如展示多张图片。微信小程序中，轮播组件支持设置轮播间隔、是否自动轮播以及展示图片的方式（横向/纵向）。通过使用轮播组件，我们可以实现各种展示效果，比如广告轮播、图片展示等。

4 页面滚动（scroll-view）

scroll-view组件用于在微信小程序页面中，可以实现滚动效果，展示大量的内容。通过设置scroll-view组件的宽度、高度等样式属性，以及使用scroll-view组件的滚动和触摸事件，可以实现复杂的滚动效果。

一.宿主环境

一些理论性的东西，分享几个重点的PPT截图~

 

 

 二.视图容器类组件

横屏滚动的图片就时swiper子目录之下的item组件。

1.View组件的基本使用 

又称视图组件，最核心的组件，一些理论讲解如下所示：

如上的效果实现的原理有以下几个步骤：

1.首先在最外层嵌套一个view，再在内部嵌套数个view，即可保证出现在同一行

2.其他的样式主要再Wxss中实现，语法和Css基本一致 

wxml文件：

  JSL
  ZSF
  LP

wxss文件：

.container1 view 
{
  width: 200rpx;
  height: 200rpx;
  text-align: center;
  line-height: 200rpx;
  color: antiquewhite;
}
.container1 view:nth-child(1)
{
  /* 吃一堑 长一智：view后面不能有空格 */
  background-color: blue;
  margin-right: 30rpx;
}
.container1 view:nth-child(2)
{
  background-color:red;
  margin-right: 30rpx;
}
.container1 view:nth-child(3)
{
  background-color:orange;
}
.container1
{
  display: flex;
  /* 横向布局 */
  margin: 20rpx;
  justify-content: space-around;
}

 不过还是有一些区别的，如下：

.container1 view:nth-child(1)

该选择器作用的元素是：.container1内部的第1个子元素~

2.scroll-view组件 

本质上就是滚动图：

• scroll -y   纵向滚动
• scroll -x   横向滚动 

wxml文件：

  first
  second
  third

 wxss文件：

.container2
{
  width: 700rpx;
  margin: 30rpx;
  height: 200rpx;
  /* 如果不加高度，则无法实现纵向滚动 */
}

.container2 view 
{
  width: 700rpx;
  height: 200rpx;
  font-size:x-large;
  color:darkblue;
  text-align: center;
  line-height: 200rpx;
  background-color:aquamarine;
  border: bisque;
}

上述用到了一次后代选择器，别忘了Css的基础呀~ 

3.swiper-view和swiper组件 

顾名思义，本质上就是轮播图，swiper是轮播图的框体，而swiper-view是内部的元素项~

wxml文件： 

  A


  B


  C

 wxss文件：

.swiper
{
  height: 200rpx;
}
.item1
{
  font-size: xx-large;
  height: 200rpx;
  text-align: center;
  line-height: 200rpx;
}

swiper-item:nth-child(1)
{
  background-color: lightblue;
}
swiper-item:nth-child(2)
{
  background-color:lightcoral
}
swiper-item:nth-child(3)
{
  background-color:lightseagreen
}

博主做出的效果如下：