【微信小程序】组件篇 -- 其它常用组件介绍 -- button & image（八）

• 💌 所属专栏：【微信小程序开发教程】

• 😀 作  者：我是夜阑的狗🐶

• 🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享 ，欢迎咨询！

• 💖 欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信 😘 😘 😘
  
  

您的点赞、关注、收藏、评论，是对我最大的激励和支持！！！🤩 🤩 🤩

---

前言

  大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第8篇文章;
  今天开始学习微信小程序的第四天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。
  专栏地址：【微信小程序开发教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。
  如果文章有什么需要改进的地方还请大佬不吝赐教👏👏，【源代码下载地址】。

---

一、基础内容组件

1、常用的基础内容组件

  比较常用组件有 button 、 image 和 navigator（后续讲解），其作用和使用场景如下所示：

组件	作用
button	按钮组件 功能比 HTML 中的 button 按钮丰富 通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）
image	图片组件 image 组件默认宽度约 300px、高度约 240px
navigator	页面导航组件 类似于 HTML 中的 a 链接

2、 button 组件的基本使用

  首先要找到对应的页面来使用 button 组件，这里以 cshPageButton 页面为例，在 cshPageButton.wxml 里写页面的结构，在 cshPageButton.wxss 里写页面的样式。下面是 button 组件常用的属性：

属性	类型	默认值	说明	最低版本
size	string	default	按钮的大小	1.0.0
type	string	default	按钮的样式类型	1.0.0
plain	boolean	false	按钮是否镂空，背景色透明	1.0.0
loading	boolean	false	名称前是否带 loading 图标	1.0.0

cshPageButton.wxml：

  通过 type、size属性可以改变按钮的样式.

<button>单抽一次试试</button>
<button type="primary">没出货？直接十连</button>
<button type="warn" loading>歪了？氪金</button>
<!-- 小尺寸按钮 -->
<button size="mini">单抽一次试试</button>
<button type="primary" size="mini">直接十连</button>
<button type="warn" loading size="mini">歪了？氪金</button>
<!-- 镂空按钮 -->
<button size="mini" plain>单抽一次试试</button>
<button type="primary" size="mini" plain>直接十连</button>
<button type="warn" loading size="mini" plain>歪了？氪金</button>

cshPageButton.wxss：

  对 button 标签进行样式选择。

button{
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}

  可以看一下多种按钮实现效果：

3、image 组件的基本使用

   如果想显示图片，就可以使用 image 组件，先来介绍 image 组件的常用属性吧。

属性	类型	默认值	说明	最低版本
src	string		图片资源地址	1.0.0
mode	string	scaleToFill	图片裁剪、缩放的模式	1.0.0

   其中 image 组件的 mode属性用来指定图片的裁剪和缩放模式，常用的 mode 属性值如下：

mode值	说明
scaleToFill	（默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说， 图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

cshPageButton.wxml：
  注意这里 style 后面要用单引号‘’，不能使用双引号，因为外面已经使用了。

<image></image>
<image src="/images/cshTest2.jpg" ></image>
<image src="/images/cshTest2.jpg" mode="aspectFit"></image>
<image src="/images/cshTest2.jpg" mode="aspectFill"></image>
<image src="/images/cshTest2.jpg" mode="widthFix"></image>
<image src="/images/cshTest2.jpg" mode="heightFix"></image>

cshPageButton.wxss：

  对标签进行样式选择。

button{
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}
image {
  border: 1px solid red;
}

  可以来看一下图片效果：

---

总结

  感谢观看，这里就是其它常用组件的介绍使用，如果觉得有帮助，请给文章点个赞吧，让更多的人看到。🌹 🌹 🌹

  也欢迎你，关注我。👍 👍 👍

  原创不易，还希望各位大佬支持一下，你们的点赞、收藏和留言对我真的很重要！！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。🎉

更多专栏订阅:

• 😀 【LeetCode题解（持续更新中）】
• 🌼 【鸿蒙系统】
• 👑 【Python脚本笔记】
• 🚝 【Java Web项目构建过程】
• 💛 【微信小程序开发教程】
• ⚽ 【JavaScript随手笔记】
• 🤩 【大数据学习笔记（华为云）】
• 🦄 【程序错误解决方法（建议收藏）】
• 🚀 【软件安装教程】

订阅更多，你们将会看到更多的优质内容！！