☹ 背景

今天，做的小程序项目要求，个人中心的客服图片在用户长按时可以识别其二维码
在百度无果，参考小程序官方文档后，发现：

1.文档中有一句提示："image组件中二维码/小程序码图片不支持长按识别,仅在 wx.previewImage 中支持长按识别"
2.即便实现了 “wx.previewImage” 效果，但依旧是不支持二维码识别的

附录文档位置：小程序图片长按识别

▽ 代码设计

好在这也是一个不错的知识点，在此进行一番实现流程的记录，欢迎指摘.

①. wxml 页面元素设计

作为引导界面，只需放置一张图片即可，以我的代码为例

//# 使用简单的实现方式，直接赋值一个图片链接得了
<image src="https://img.fetow.com/Public/Index/images/shewm.jpg" mode="widthFix"  data-src="https://img.fetow.com/Public/Index/images/shewm.jpg" bindtap="previewImage"></image>

②. js 文件实现 “previewImage”方法

在对应的 js 文件中，添加了如下的方法

  /***  图片预览方法*  此处注意的一点就是，调用 "wx.previewImage"时，第二个参数要求为数组形式哦*  当然，做过图片上传功能的应该会注意到，如果涉及到多张图片预览，图片链接数组集合即为参数 urls！*/ previewImage: function(e) {var current = e.target.dataset.src;wx.previewImage({current: current,urls: [current]})},

▽. 实现效果

①. 普通二维码长按效果

可以发现，下图（左）中是没有“识别图中二维码”的选项

【注】：

上图（左）：中的二维码，其实就是一些普通的二维码啦 【小程序中的打开效果】

上图（右）：如果发送给了好友或者自行保存后，在微信中打开的并长按的效果 【此图是作为对比效果的】

②. 小程序码长按效果

与上面普通二维码有所区别的是，小程序中是可以长按识别小程序码的

微信小程序图片长按识别功能笔记相关推荐

小程序图片长按识别功能的实现
背景今天,做的小程序项目要求,个人中心的客服图片在用户长按时可以识别其二维码在百度无果,参考小程序官方文档后,发现: 1.文档中有一句提示:"image组件中二维码/小程序码图片不支持长 ...
h5嵌入微信小程序webView长按识别二维码
1.h5页面用于渲染图片 <div id="app"><div class="priview-img"><imgv-for=&qu ...
【愚公系列】2022年09月微信小程序-图片懒加载功能实现
文章目录前言一.官方图片的懒加载 1.wxml 2.js 3.css 4.效果二.第三方包实现图片的懒加载 1.安装第三方包 2.组件引用 3.wxml 4.js 5.css 6.效果前言大 ...
微信小程序长按图片不出现菜单_微信小程序实现长按删除图片的示例
说明最近在学小程序,遇到长按图片删除的问题,特此记录,记录自己的成长轨迹需求: 长按删除指定图片需要解决的问题长按事件如何表示出来? 如何获取当前长按元素的下标? 如何删除元素? 解决办法长 ...
微信小程序图片自动播放功能
小程序图片自动轮换滚动功能在看小程序源码时,发现该小程序用内置组件"swiper"实现图片滚动功能.经过测试效果很不错,因此记录下实现方法. 使用小程序组件swiper实现滑块视 ...
微信小程序图片裁剪插件image-cropper
image-cropper 一款高性能的微信小程序图片裁剪插件,支持旋转.设置尺寸功能亮点 1.支持旋转支持旋转支持旋转. 2.性能超高超流畅,大图毫无卡顿感. 3.可以设置导出图片尺寸. 4.自由 ...
怎么实现微信小程序云开发拼团功能？
[微信云开发教程]怎么实现微信小程序云开发拼团功能? 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录 [微 ...
微信小程序实现长文本分段播放
微信小程序实现长文本分段播放接上篇微信小程序实现语音合成功能解决腾讯智能语音插件中文最大支持100个汉字的问题场景:需要合成100汉字以上的文本进行语音播报注意:本文示例代码是在上篇基础上进 ...
微信小程序集成实时音视频通话功能
微信小程序集成实时音视频通话功能背景在项目的开发当中,很多时候,我们会有音频.视频通话的需求,但是一般都不会自己来写,所以我们就需要借助第三方来实现.尤其是这次的项目开发当中,需要在微信小程序当中 ...
微信小程序账号长时间未登录冻结解封
微信小程序账号长时间未登录冻结解封 1.账号找回链接[官方]:http://mp.weixin.qq.com/acct/findacct?action=scan 2.按照官方指引的三个操作步骤进操作, ...

微信小程序图片长按识别功能笔记

☹ 背景

▽ 代码设计

①. wxml 页面元素设计

②. js 文件实现 “previewImage”方法

▽. 实现效果

①. 普通二维码长按效果

②. 小程序码长按效果

微信小程序图片长按识别功能笔记相关推荐

最新文章

热门文章

微信小程序 图片长按识别功能 笔记

☹ 背景

▽ 代码设计

①. wxml 页面元素设计

②. js 文件实现 “previewImage”方法

▽. 实现效果

①. 普通二维码长按效果

②. 小程序码长按效果

微信小程序 图片长按识别功能 笔记相关推荐

最新文章

热门文章

微信小程序图片长按识别功能笔记

微信小程序图片长按识别功能笔记相关推荐