学习小程序开发一:基本的组件学习使用

文章目录

  • 01-小程序的宿主环境-组件
    • 一、小程序中组件的分类
    • 二、常用的视图容器类组件
    • 三、view组件的基本使用
          • 1、list.wxml代码实现
          • 2、list.wxss代码实现
    • 四、scroll-view组件的基本使用
          • 实现步骤:
          • 1、list.wxml代码实现
          • 2、list.wxss代码实现
    • 五、swiper 和 swiper-item组件的基本使用
          • 实现步骤:
          • 1、list.wxml代码实现
          • 2、list.wxss代码实现
    • 六、text组件 和 rich-text组件的使用
          • 1、简单的代码示例
    • 七、button组件的使用
          • 代码示例
    • 八、iamge 图片 组件的使用
          • 1、 代码示例

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


一、小程序中组件的分类

概述:

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

一共有 9 大类,分别是:

① 视图容器

② 基础容器

③ 表单组件

④ 导航组件

⑤媒体组件

⑥ map地图组件

⑦ canvas 画布组件

⑧ 开放能力

⑨无障碍访问

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

1、 view

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

2、scroll-view

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

3、swiper 和 swiper-item

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

三、view组件的基本使用

学习小程序开发一:基本的组件学习使用_第1张图片

问题:使用view组件完成上面的效果,想想怎么实现的呢?

1、list.wxml代码实现

<view class="container1">
	<view>Aview>
	<view>Bview>
	<view>Cview>
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大盒子设置宽高和样式
  • 宽度和高度取决于我们的横纵滚动方向强制天设置。

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

学习小程序开发一:基本的组件学习使用_第2张图片

1、list.wxml代码实现


<scroll-view class="container1" scroll-y>
	<view>Aview>
	<view>Bview>
	<view>Cview>
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 )

学习小程序开发一:基本的组件学习使用_第3张图片

1、list.wxml代码实现
<swiper class="swiper-container" autoplay indicator-dots indicator-active-color="#157658">
	
	<swiper-item>
		<view class="item">1view>
	swiper-item>

	
	<swiper-item>
		<view class="item">2view>
	swiper-item>

	
	<swiper-item>
		<view class="item">3view>
	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、简单的代码示例
 
<view>
	长按复制:
	<text selectable>13145209999text>
view>


<rich-text nodes=" style='color: hotpink;'>标题</h1>">rich-text>
  • 可以理解为 rich-text 就是用来渲染 h5 标签的

七、button组件的使用

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

学习小程序开发一:基本的组件学习使用_第4张图片

代码示例



<button type="primary">绿色按钮button>
<button type="default">白色按钮button>
<button type="warn">黄色按钮button>



<button type="primary" size="mini">sizebutton>
<button type="default" size="mini">sizebutton>
<button type="warn" size="mini">sizebutton>1


<button plain="true" type="primary">绿色按钮button>
<button plain="true" type="default">白色按钮button>
<button plain="true" type="warn">黄色按钮button>

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

八、iamge 图片 组件的使用

  • 注意:iamge组件默认宽度 约 300px ,高度 约 240px

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

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

学习小程序开发一:基本的组件学习使用_第5张图片

1、 代码示例



<image src="" mode=""/>


<image src="../images/01iamges.png" mode="aspectFill"/>

后续还会更新小程序开发知识点…

你可能感兴趣的:(微信小程序开发,微信小程序)