微信小程序开发基础-基本组件

🐳前言

微信小程序是一种无需下载安装即可使用的应用，并且小程序开发涉及账号申请、使用开发者工具、编写代码等多个步骤。

微信小程序的概念可以理解为一个轻量级的应用平台，它内嵌于微信生态中，用户可以直接在微信内部访问和使用这些应用，而无需通过传统的应用商店下载和安装。这种即用型的特性使得小程序非常适合快速、便捷的服务体验，如共享单车、订餐服务、电商购物等场景。技术上，小程序结合了原生应用的流畅性和Web应用的灵活性，通过微信加载，实现了接近原生app的体验。此外，它还支持品牌营销和商业活动，例如利用地理位置服务发现附近的商家和活动等。

微信小程序提供了一套完整的开发框架和工具，供开发者创建功能丰富的小程序。首先，开发者需要注册并管理小程序账号，这是开发的起点。接着，通过下载并使用微信开发者工具，开发者可以编写代码、预览效果并进行调试。小程序开发涉及的知识点包括页面结构设计、基本语法、事件处理、组件使用、API调用、生命周期管理等，这些都是构建一个功能性小程序所必需的技能。除此之外，为了提高开发效率，开发者也可以选择导入现成的Weui模板或其他资源来快速开始。

🐳环境准备

🐤项目创建

安装官网提供的微信小程序开发工具，在注册好的小程序号里面找到AppID，（前面这些步骤官网都有提供详细教程）填写到下图中，后端服务选择不使用云服务，模板选择JS基础

🐤新建小程序页面

在app.json -> pages中新增页面的存放路径，小程序开发者工具就会帮我们自动创建对应的页面文件，如下图所示。

🐤修改项目首页

项目会把pages数组中的页面路径中排在第一位的页面作为项目首页。我们把刚刚创建的新视图调整一下位置，然后保存，如下图所示。

🐳小程序组件

小程序中的组件是由宿主环境提供的，开发者可以基于组件快速搭建页面结构，小程序组件分为9大类，分别是：

1. 视图容器组件：这类组件用于页面布局，如view、scroll-view、swiper等，它们提供了基础的布局能力，类似于网页中的HTML标签。
2. 基础内容组件：包括文本、图标等展示信息的基础组件，例如text、icon等。
3. 表单组件：用于收集用户输入或进行交互，如button、input、checkbox等。
4. 导航组件：提供页面间跳转的功能，如navigator等。
5. 媒体组件：用于展示图片、播放音频和视频，如image、audio、video等。
6. 地图组件：提供地图展示和定位功能，如map。
7. 画布组件：提供绘图功能，如canvas。
8. 开放能力组件：这类组件提供了一些特殊的系统级功能，如支付、分享等API接口组件。
9. 无障碍访问组件：确保小程序对残障人士友好，提供无障碍访问的支持。

🐤视图容器组件

在微信小程序开发中，视图容器类组件是页面布局的基础，它们提供了不同功能的容器，以支持和容纳其他组件的展示。以下是一些常用的视图容器组件及其作用：

• View：这是最基础的容器组件，类似于HTML中的div标签，用于布局和容纳其它组件。它本身也可以有自己的样式，但主要功能是作为其他组件的载体。
• Scroll-view：当内容超出显示区域时，提供滚动功能。这个组件可以垂直或水平滚动，非常适合于显示大量内容的列表或长文本等场景。
• Swiper：实现滑动功能，通常用于轮播图效果。它可以包含多个swiper-item，每个swiper-item代表一个滑块页面。
• Swiper-item：配合swiper组件使用，代表一个单独的滑动页面，通常放在swiper内部，作为其子项。

🍀View组件

下面我们在wxml文件中创建一个包含三个子元素的容器，并通过wxss设置每个子元素都有不同的背景颜色。

list.wxml

<!-- 创建一个名为"container1"的容器，用于容纳其他子元素。 -->
<view class="container1">
<!-- 创建三个子元素，分别显示文本"A"、"B"和"C"。 -->
<view>A</view>
<view>B</view>
<view>C</view>
</view>

 list.wxss

/* 为容器中的所有子元素设置样式，包括宽度、高度、文本居中对齐等。 */
.container1 view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
/* 下面为容器中的第一、二、三个子元素设置背景颜色为浅蓝色。 */
.container1 view:nth-child(1){
  background-color: lightblue;
}
.container1 view:nth-child(2){
  background-color: yellow;
}
.container1 view:nth-child(3){
  background-color: pink;
}
/* 为容器本身设置样式，使用flex布局，并使子元素在水平方向上均匀分布 */
.container1{
  display: flex;
  justify-content: space-around;
}

🍀Scroll-view组件

我们基于上面的view组件例子进行改动，

<!-- scroll-x是横向滚动 scroll-y是纵向滚动-->
 <scroll-view class="container1" scroll-y>
<!-- 创建三个子元素，分别显示文本"A"、"B"和"C"。 -->
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>

为了效果明显，我们将wxss中的高度与宽度也调整一下,要注意的是，使用纵向滚动时，一定要设置一个高度，否则组件会自动伸缩边框，就达不到滚动的效果。

.container1 {
  /* 为元素添加一个红色的、宽度为1像素的实线边框。 */
  border: 1px solid red;
  /* 高度为150px， */
  height: 150px;
  /* 宽度为100px */
  width: 100px;
}

 🍀Swiper 与 Swiper-item 组件

在下面例子中，我们定义一个名为"swiper-container"的容器，其中包含了三个轮播项（swiper-item）。每个轮播项都有一个类名为"item"的子元素，用于显示具体的轮播内容。

 list.wxml

<swiper class="swiper-container" indicator-dots>
<!-- 第一个轮播图 -->
<swiper-item>
<view class="item">A</view>
</swiper-item>
<!-- 第二个轮播图 -->
<swiper-item>
<view class="item">B</view>
</swiper-item>
<!-- 第三个轮播图 -->
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>

在CSS样式中，为".swiper-container"添加了一个红色的实线边框，高度为150px。同时，为".item"设置了高度为100%，行高为150px，文本居中对齐。

list.wxss

.swiper-container {
  /* 为元素添加一个红色的、宽度为1像素的实线边框。 */
  border: 1px solid red;
  height: 150px;
}

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

/* 通过选择器分别设置了第一个、第二个和第三个轮播项的背景颜色。 */
swiper-item:nth-child(1) .item{
  background-color: lightblue;
}
swiper-item:nth-child(2) .item{
  background-color: yellow;
}
swiper-item:nth-child(3) .item{
  background-color: pink;
}

 在Swiper 组件中还有如下属性用于自定义我们的轮播图样式。

 🐤基础内容组件

🍀text组件

ext组件在小程序中有以下特点和用途：

1. 内容展示：用于展示文本内容，如标题、段落文字等。
2. 样式设置：可以通过设置class属性来对text组件应用样式，包括字体大小、颜色、粗细等。
3. 可复制性：默认情况下，text组件中的文字内容不可被用户选中复制，但通过添加selectable属性，可以使文本变得可复制。
4. 布局考量：虽然text组件和view（视图）组件在显示文本时可能看起来效果相似，但它们在布局上有所不同。text作为行内元素，适合用于文本排版，而view则是块级元素，更适合作为容器使用。

如下图所示，在标签中加上了selectable之后在真机调试时，就可以通过长按数字就行复制。

🍀rich-text组件

使用rich-text组件，可以通过nodes属性来绑定需要显示的HTML内容，在实际开发中，rich-text组件特别适合用于商品详情页等需要展示复杂文本格式的场景。通过后端返回的数据，可以在页面加载时动态设置rich-text的内容，从而实现丰富的界面展示效果。

如下图通过nodes属性绑定了一个HTML字符串，包含一个带有样式的标题元素。

🐤表单组件

🍀button组件

button组件是一个基础的交互组件，用于触发点击事件或执行特定的操作。以下是一些关于button组件的详细介绍：

1. 基本用法：Button组件可以创建不同的按钮样式，通过设置type属性来改变按钮的颜色和风格。默认情况下，不指定type时，按钮呈现为灰色的默认样式。
2. size属性：该属性用来控制按钮的大小。当设置为"mini"值时，按钮会显示为较小的尺寸。
3. type属性：通过设置type属性，可以改变按钮颜色。其中，"default"表示默认的灰色；"primary"表示绿色的主按钮；"warn"则表示警告的红色按钮。
4. plain属性：此属性能够设置按钮是否为镂空样式，即无背景色，使其看起来更为简洁。
5. loading属性：这个属性用于展示等待网络的标志，通常在需要等待数据加载时使用，此时按钮上会出现一个旋转的效果以告知用户正在等待。
6. open-type属性：这是button标签的开放能力属性，它定义了按钮的一些特殊行为，如获取手机号、分享等。
7. 自定义样式：除了使用button的默认样式和属性外，开发者也可以通过CSS去除默认样式，并自定义按钮的外观，以满足项目中的特殊需求。
8. 事件处理：Button组件通常与事件处理函数结合使用，比如@tap或@click来捕捉用户的点击事件，并在逻辑层进行相应的处理。

<text>-------------通过type指定按钮类型-------------</text>
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>

<text>-------------通过size指定按钮尺寸-------------</text>
<button size="mini">普通按钮</button>

<view>-------------plain镂空按钮-------------</view>
<button  plain type="primary">主色调按钮</button>

🍀image组件

 image组件提供了多种裁剪和缩放模式，通过设置mode属性可以控制图片如何适应其容器。scaleToFill模式会不保持纵横比地缩放图片以填满整个容器，可能导致图片变形；aspectFit模式则保持纵横比缩放图片，确保图片长边能完全显示，但图片可能会比容器小；aspectFill模式同样保持纵横比，但图片会被缩放至短边能够完全显示在容器中。