草庐IT

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

一碗黄豆酱 2023-04-24 原文

目录

前言

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

本文主要给大家介绍一下 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>
    
  • 效果展示

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


总结

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

有关【微信小程序入门到精通】— button 和 image 超详细讲解的更多相关文章

  1. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  2. LC滤波器设计学习笔记(一)滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》,侵权删。前言最近需要学习放大电路和滤波电路,但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放,所以也是相当从零开始学习了。滤波电路科普主要分类滤波器:主要是从不同频率的成分中提取出特定频率的信号。有源滤波器:由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波,最普通易于采用的无源滤波器结构是将电感与电容串联,可对主要次谐波(3、5、7)构成低阻抗旁路。无源滤波器:无源滤波器,又称

  3. 在VMware16虚拟机安装Ubuntu详细教程 - 2

    在VMware16.2.4安装Ubuntu一、安装VMware1.打开VMwareWorkstationPro官网,点击即可进入。2.进入后向下滑动找到Workstation16ProforWindows,点击立即下载。3.下载完成,文件大小615MB,如下图:4.鼠标右击,以管理员身份运行。5.点击下一步6.勾选条款,点击下一步7.先勾选,再点击下一步8.去掉勾选,点击下一步9.点击下一步10.点击安装11.点击许可证12.在百度上搜索VM16许可证,复制填入,然后点击输入即可,亲测有效。13.点击完成14.重启系统,点击是15.双击VMwareWorkstationPro图标,进入虚拟机主

  4. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  5. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  6. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  7. 【Java入门】使用Java实现文件夹的遍历 - 2

    遍历文件夹我们通常是使用递归进行操作,这种方式比较简单,也比较容易理解。本文为大家介绍另一种不使用递归的方式,由于没有使用递归,只用到了循环和集合,所以效率更高一些!一、使用递归遍历文件夹整体思路1、使用File封装初始目录,2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组,取出每个File对象4-1、如果File是否是一个文件,打印4-2、否则就是一个目录,递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg

  8. ES基础入门 - 2

    ES一、简介1、ElasticStackES技术栈:ElasticSearch:存数据+搜索;QL;Kibana:Web可视化平台,分析。LogStash:日志收集,Log4j:产生日志;log.info(xxx)。。。。使用场景:metrics:指标监控…2、基本概念Index(索引)动词:保存(插入)名词:类似MySQL数据库,给数据Type(类型)已废弃,以前类似MySQL的表现在用索引对数据分类Document(文档)真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear

  9. ruby-on-rails - rails 上的 ruby : radio buttons for collection select - 2

    我有一个集合选择:此方法的单选按钮是什么?谢谢 最佳答案 Rails3中没有这样的助手。在Rails4中,它是collection_radio_buttons. 关于ruby-on-rails-rails上的ruby:radiobuttonsforcollectionselect,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/18525986/

  10. ruby-on-rails - Rails - Carrierwave 进程抛出 ArgumentError : no images in this image list - 2

    在尝试实现应用auto_orient的过程之后!对于我的图片,我收到此错误:ArgumentError(noimagesinthisimagelist):app/uploaders/image_uploader.rb:36:in`fix_exif_rotation'app/controllers/posts_controller.rb:12:in`create'Carrierwave在没有进程的情况下工作正常,但在添加进程后尝试上传图像时抛出错误。流程如下:process:fix_exif_rotationdeffix_exif_rotationmanipulate!do|image|

随机推荐