长按图片识别二维码?分享 1 段优质 小程序 代码片段!
2024-08-15 15:17 阅读(256)

今天分享一段优质 小程序 代码片段,最常规且最常用的长按图片识别二维码的打开方式。

<image src="../../images/wxCode.jpg" mode="widthFix" show-menu-by-longpress="{{true}}"/>

分享原因

这段代码是典型的微信小程序图片组件的用法,很简单却十分常用,有必要记录分享一下。

通过 mode 和 show-menu-by-longpress 属性的设置,呈现了小程序中对图片显示方式和图片交互方式的精细简单控制。

代码解析

1. show-menu-by-longpress="{{true}}"

show-menu-by-longpress 属性,用于控制当用户长按图片时是否显示菜单,默认是false。

在项目中,如果有长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序(若图片中包含对应二维码或小程序码)的需求时,可以直接去使用该属性。

{{true}} 是数据绑定的表达式,表示该属性��值为真,即允许长按显示菜单。

2. mode="widthFix"

mode属性用于控制图片的缩放模式。

这里放几个比较常用的属性值:

scaleToFill,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素。

aspectFit,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。

aspectFill,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。

widthFix,宽度不变,高度自动变化,保持原图宽高比不变。

heightFix,高度不变,宽度自动变化,保持原图宽高比不变。