【微信小程序入门到精通】— button 超详细讲解

对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？
为此我特意开设此专栏，在我学习的同时也将其分享给大家！
本文主要给大家介绍一下 button 和 image 组件，接下里我将逐一进行讲解！
1
如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！

一、button 组件

button和我们HTML中的类似，我们先总结一下然后详细讲解。
button 是一种按钮组件
类似于 HTML 里面的 button，但是添加很多功能
功能的实现通过 open-type 属性进行功能的调用（转发、客服、获取用户信息等等）
1.1 指定按钮（属性值：type ）

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

在 .wxml 里面构建 button 组件

<button>默认按钮</button>
1
效果展示

将 type 设置为 primary

<button type="primary">主色调按钮</button>
1
效果展示

将 type 设置为 warn

<button type="warn">警告按钮</button>
1
效果展示

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
2
3
4
5
6
7
效果展示

分析

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

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

构建镂空按钮

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

<button type="primary" plain>主色调按钮</button>
1
2
3
效果展示

1.4 补充

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

效果展示

分析

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

原文链接：https://blog.csdn.net/fsadagds/article/details/127033061