微信小程序开发（第一期）：小程序的宿主环境 && 组件化开发 && 基本的组件使用 && 上手小程序开发基本思路

01-小程序的宿主环境-组件

---

一、小程序中组件的分类

概述：

• 小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。

一共有 9 大类，分别是：

① 视图容器

② 基础容器

③ 表单组件

④ 导航组件

⑤媒体组件

⑥ map地图组件

⑦ canvas 画布组件

⑧ 开放能力

⑨无障碍访问

二、常用的视图容器类组件

1、 view

• 普通视图区域
• 类似于HTML中的div，是一个块级元素
• 通常用来页面的布局效果

2、scroll-view

• 可滚动的视图区域
• 常用来实现滚动列表效果

3、swiper 和 swiper-item

• 轮播图的容器组件 和 轮播图 item 组件

三、view组件的基本使用

问题：使用view组件完成上面的效果，想想怎么实现的呢？

1、list.wxml代码实现

<!-- pages/list/list.wxml -->
<view class="container1">
	<view>A</view>
	<view>B</view>
	<view>C</view>
</view>

2、list.wxss代码实现

/* pages/list/list.wxss */

/* 这是三个 view盒子的样式 */
.container1 view {
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
}

/* 每个view盒子的样式 */
.container1 view:nth-child(1) {
	background-color: hotpink;
}

.container1 view:nth-child(2) {
	background-color: lightgreen;
}

.container1 view:nth-child(3) {
	background-color: lightskyblue;
}


/* 开启flex布局 */
.container1 {
	display: flex;
	justify-content: space-around;
}

四、scroll-view组件的基本使用

学习目的：如何实现如图的纵向滚动效果呢？

实现步骤：

  目标：实现纵向滚动的效果
  	1、 使用scroll-view组件
  	2、 给scroll-view组件添加上scroll-y属性（表示纵向）
  	3、 给我们scroll-view大盒子设置宽高和样式

• 宽度和高度取决于我们的横纵滚动方向强制天设置。

原理就是，当我们的宽或者高度无法容纳下所有的小盒子，那么该组价就会实现覆盖滚动效果啦！

1、list.wxml代码实现

<!-- pages/list/list.wxml -->

<scroll-view class="container1" scroll-y>
	<view>A</view>
	<view>B</view>
	<view>C</view>
</scroll-view>

2、list.wxss代码实现

/* pages/list/list.wxss */

/* 这是三个 view盒子的样式 */
.container1 view {
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
}

/* 每个view盒子的样式 */
.container1 view:nth-child(1) {
	background-color: hotpink;
}

.container1 view:nth-child(2) {
	background-color: lightgreen;
}

.container1 view:nth-child(3) {
	background-color: lightskyblue;
}


/* 设置包裹性的盒子样式 ，实现滚动效果*/
.container1 {
	border: 1px solid red;
	width: 100px;
	height: 120px;
}

• 需要注意的是，一定要给组件添加scroll-y 或者x 属性 否者不生效哦！

五、swiper 和 swiper-item组件的基本使用

目标：实现如图所示的轮播图效果

实现步骤：

轮播图的实现:

1、 使用 swiper组件

2、 在 swiper 组件中 使用 swiper-item子组件（相当于轮播图里面的每一项）

3、 在 swipe-item 子组价中 放图片即可（这里知识测试）

4、 然后提供对应的结构样式即可

5、 swiper组件也有很多的属性（例如：增加小圆点指示 indicator-dots 、自动播放 autoplay 、改变激活小圆点颜色 indicator-active-color="#157658 ）

1、list.wxml代码实现

<swiper class="swiper-container" autoplay indicator-dots indicator-active-color="#157658">
	<!-- 第一个轮播图图片 -->
	<swiper-item>
		<view class="item">1</view>
	</swiper-item>

	<!-- 第二个轮播图图片 -->
	<swiper-item>
		<view class="item">2</view>
	</swiper-item>

	<!-- 第三个轮播图图片 -->
	<swiper-item>
		<view class="item">3</view>
	</swiper-item>
</swiper>

2、list.wxss代码实现

/* 轮播图样式 */
.swiper-container {
	height: 150px;
}

swiper-item .item {
	height: 100%;
	line-height: 150px;
	text-align: center;
}

/* 给swiper里面的每一个 swiper-item设置单独的style 便于区分*/
swiper-item:nth-child(1) {
	background-color: lightskyblue;
}

swiper-item:nth-child(2) {
	background-color: hotpink;
}

swiper-item:nth-child(3) {
	background-color: lightgreen;
}

六、text组件 和 rich-text组件的使用

text 和 rich-text 组件到底有什么用呢？

请看下面：

小程序中的 text 组件和 rich-text 组件都是用于显示文本内容的组件，但它们有不同的用途。

1. text 组件用于显示简单的纯文本内容，支持基本的文字样式设置，例如字体大小、颜色、对齐方式等。它适用于展示不需要复杂格式的文本内容，如标题、段落、标签等。
2. rich-text 组件用于显示富文本内容，支持更丰富的文本格式和样式，包括字体样式、字号、颜色、背景色、超链接、图片、表格、换行符等。通过使用富文本的标签语法，可以在 rich-text 中实现更多样式丰富、复杂的文本展示需求。

因此，如果你只需要展示简单的文本信息，可以使用 text 组件；如果你需要展示复杂的富文本内容，包括文字、图片、链接等，则应该选择 rich-text 组件。

例如实现如下图片中的效果就可以使用这两个组件：

1、简单的代码示例

 <!-- text 组件的使用  selectable是text组件中的属性（用来长按显示菜单工具） -->
<view>
	长按复制：
	<text selectable>13145209999</text>
</view>

<!-- rich-text 组件的使用 nodes属性的值是用来渲染的内容 -->
<rich-text nodes="<h1 style='color: hotpink;'>标题</h1>"></rich-text>

• 可以理解为 rich-text 就是用来渲染 h5 标签的

七、button组件的使用

使用button组件实现下图效果：

代码示例

<!-- button 组组件的使用 -->

<!-- button 组件中的类型 type属性 -->
<button type="primary">绿色按钮</button>
<button type="default">白色按钮</button>
<button type="warn">黄色按钮</button>


<!-- button 组件 尺寸  size="default"(默认)-->
<button type="primary" size="mini">size</button>
<button type="default" size="mini">size</button>
<button type="warn" size="mini">size</button>1

<!-- button 组件 背景色透明 plain 属性-->
<button plain="true" type="primary">绿色按钮</button>
<button plain="true" type="default">白色按钮</button>
<button plain="true" type="warn">黄色按钮</button>

• 还有其他的属性设置，可以参考官方文档。

八、iamge 图片 组件的使用

• 注意：iamge组件默认宽度 约 300px ，高度 约 240px

并且image组件上也提供了很多属性，下面会举例子，最好自己阅读官方文档在，

mode属性的属性值不同，图片的显示方式和比例也不同，至于到底怎么使用，根据开发需求选择（查阅官网文档即可）

1、 代码示例

<!-- iamge 图片组件 -->

<!-- image 组件的默认大小，这里使用了边框线作了对比 -->
<image src="" mode=""/>

<!-- 下面是我插入的一张图片 ，并且使用了mode属性的 aspectFill属性值-->
<image src="../images/01iamges.png" mode="aspectFill"/>

下一期：微信小程序开发第二期
后续还会更新小程序开发知识点…