长按图片识别二维码？分享 1 段优质 小程序 代码片段！

本内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！

大家好，我是大澈！

本文约 700+ 字，整篇阅读约需 1 分钟。

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

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！

<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，高度不变，宽度自动变化，保持原图宽高比不变。