【微信小程序】一文解决button、input、image组件

🍒观众老爷们好，这里是前端小刘不怕牛牛的博客，上文我们讲解了小程序的视图容器组件和基础内容组件，而小程序还有一类常用的组件，就是表单组件。 🍒那么今天，就让牛牛带大家走进表单组件吧(˵◕ω◕˵)。

一，button组件

1. type属性，用来设置按钮的样式类型，目前有三个值，primary绿色，default白色，warn红色，我们可以从它们的值的意思理解它们表示什么，绿色是重要的，红色是警告，这两种颜色会给用户提示的效果，默认样式为白色 效果如下：

tip： 有的小伙伴可能会看到的样式有一些差别，这可能是你没有设置最新样式的版本，这时候我们需要到app.json文件进行设置

"style": "v2"

这样就是声明以最新样式显示

2. size属性，用来设置按钮的大小，默认为default，也就是正常大小，我们还可以选择迷你按钮，将size设置为mini 效果如下：
3. plain属性，是否镂空，背景色透明，默认值是default，但我们改为true时 效果如下：
4. loading属性，是否设置名称前带loading图标，一般会设置在用户发生点击事件后或者页面还在加载时，用JS对loading的属性值进行数据绑定并操作。 效果如下：
5. form-type属性，无默认值，该属性是用于form组件中，点击触发form组件的submit eset事件，当我们将属性值设置为submit触发提交表单事件，而reset则是重置表单事件。

二，input组件

第二个要讲的是input组件，内容表述为输入框，该组件大致与HTML中的input标签相同，为原生组件，不过我们还是要注意该组件的用法

1. value属性，这个属性我们很熟悉，这里不多做阐述，就是来设置输入框的初始内容，一般对用户作为一个默认值，用户可能可以直接用，如性别，默认为男，需要注意的是，该属性在小程序中是必填属性
2. type属性，输入键盘的类型，当我们使用小程序表单提交东西时，会发现它弹出的键盘是不一样的，如正常的文字输入键盘，还有特殊的密码输入键盘，这些就是靠该属性实现的。属性值及说明如下表

3. password属性，是否是密码类型，当我们设置为true，输入的密码就会自动用小黑点显示 效果如下：
4. placeholder属性，当输入框为空时作为占位符，里面的文字一般是担任提示用户的角色

三，image组件

首先需要说一下image组件是有默认大小的，宽为300px，高为240px，这意味着即使你里面没有放图片，空图片，在没有改变其宽高的情况下，空图片是会占据一个宽300px高240px的空间的，如下所示。

<!-- html -->
<image></image>
<!-- css -->
image{
 	border: solid lightcoral 2px;
}

1. src属性，这个不用多说，与img标签的一样，指图片资源地址。
2. mode属性，这个是比较重要的属性，它设置了图片的裁剪、缩放模式，默认值是scaleToFill，称为缩放模式，也就是不保持纵横比缩放，将原图片的宽高拉伸到能完全填满image元素，该属性值容易出现图片变形，其他属性值如下。

四，API三大类

最后我们再讲一下API的三大类，API可以分为事件监听API、同步API、异步API

4.1 事件监听API

顾名思义，该类API就是用来监听某些事件的触发，而事件就是渲染层到逻辑层的通讯方式，我们通过事件监听获取用户在渲染层的行为，从而在逻辑层进行响应、业务处理。

4.2 同步API

以Sync结尾，执行的结果可以通过函数返回值直接获取，但执行错误时，直接返回异常 如wx.setStorageSync(key, value)，向本地存储中写入内容

4.3 异步API

通过success、false、conplete接收调用的结果 如wx.request()，发起网络请求，可以通过success回调函数接收数据

本次先对API的分类做简单的阐述，后面再用实例来运用这些API

这里牛牛推荐一个功能强大的刷题软件，牛客网。里面有各大厂的面试题，还有模拟面试，让你身临其境感受面试，不仅如此，还要很多大佬的面试经验，看完硕果累累。甚至可以在里面投递简历，🍓🍓感兴趣的点此进入

债见~~