在这里插入图片描述

前言

对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？
为此我特意开设此专栏，在我学习的同时也将其分享给大家！

本文主要给大家介绍一下 button 和 image 组件，接下里我将逐一进行讲解！

如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！

一、button 组件

button和我们HTML中的类似，我们先总结一下然后详细讲解。

button 是一种按钮组件
类似于 HTML 里面的 button，但是添加很多功能
功能的实现通过 open-type 属性进行功能的调用（转发、客服、获取用户信息等等）

1.1 指定按钮（属性值：type ）

如果我们想要指定按钮的类型，我们需要借助 type 属性去实现功能

在 .wxml 里面构建 button 组件
```
<button>默认按钮</button>
```
效果展示

将 type 设置为 primary

<button type="primary">主色调按钮</button>

效果展示

将 type 设置为 warn

 <button type="warn">警告按钮</button>

效果展示

1.2 改变按钮尺寸（属性值：size）

如果我们想要改变按钮的大小，我们需要借助 size 属性去实现功能

构建按钮，设置不同 size

 <button type="primary">主色调按钮</button>

 <button  size="mini">主色调按钮</button>
 <button type="primary" size="mini">主色调按钮</button>
 <button type="warn" size="mini">主色调按钮</button>

 <button type="primary" size="default">主色调按钮</button>

效果展示
分析

1.默认 size 的值是 default，我们通过第一个按钮和最后一个一致即可得到结论
2. 默认我们的 default 按钮是居中，而我们构建的三个 mini 则是在一行，后续我们详细介绍

1.3 使按钮镂空（属性值：plain）

如果我们想要使按钮变成镂空的样式，我们需要借助 plain 属性去实现功能

构建镂空按钮

 <button type="primary">主色调按钮</button>

 <button type="primary" plain>主色调按钮</button>

效果展示

1.4 补充

诸位知否记得之前我们讲解app.json的时候，讲过一个版本控制（ “style”: “v2”,），当我们添加这一行代码的时候意味着我们小程序使用的样式都是最新版本，如果我们将其删除的话会出现什么呢？

删除 app.json 内的 “style”: “v2”,
效果展示
分析

1. 上图为旧版本样式
2. 下图为新版本样式

二、 image 组件

image 和我们HTML中的类似，默认宽度不一样。

image 是一种图片组件
image 在微信小程序中默认宽度为 300px，高度为240px

2.1 构建图片控件（image）

在 wxml 内添加 image

 <image></image>

 <image src="/pages/1.jpeg"></image>

效果展示
分析

1. 创建的第一个 image 内部不放入内容，但是会占据一定位置，我们看到界面效果上半部分为空的
2. 第二个 image 组件放入图片，利用相对路径的方式将图片位置告诉属性值 src

2.2 指定图片缩放模式（mode）

首先我来介绍一下我们mode属性都有哪些取值

mode 属性值	功能
scaleToFill	默认缩放模式，填充整个 image 元素
aspectFit	保持横纵比，使图像能完整显现出来
aspectFill	保持横纵比，是短边能完全显示出来
widthFix	保持宽度不变，高度自动变化
heightFix	保持高度不变，宽度自动变化

话不多说，接下来直接实际操作！

scaleToFill 属性值（默认值）

<image src="/pages/1.jpeg"  ></image>

<image src="/pages/1.jpeg" mode="scaleToFill" ></image>

效果展示

我们可以看到默认的缩放模式就是 scaleToFill，但是这种方式容易造成图像失真

aspectFit （完全图显）

 <image src="/pages/1.jpeg"  ></image>

 <image src="/pages/1.jpeg" mode="aspectFit" ></image>

效果展示

我们发现下方的图片没有出现失真现象，完整的展现在页面中

aspectFill （短边显示）

 <image src="/pages/1.jpeg"  ></image>

 <image src="/pages/1.jpeg" mode="aspectFill" ></image>

效果展示

不难看出，我们下图是进行短边实现，长边就是自动变化，所以最终导致长边失真，不能完全显示

widthFix（宽度不变）

 <image src="/pages/1.jpeg"  ></image>

 <image src="/pages/1.jpeg" mode="widthFix" ></image>

效果展示

上图是我们默认的 image，我们发现下图的宽度和上图一致，高度则按照横纵比自动调整

heightFix（高度不变）

<image src="/pages/1.jpeg"  ></image>

<image src="/pages/1.jpeg" mode="heightFix" ></image>

效果展示

上图我们发现下图的高度和默认一致，保持横纵比所以宽度自动调整

总结

大家每天都要开开心心的喔，让我们一起快乐的学习吧！