小程序图片长按识别功能的实现

背景

  • 今天,做的小程序项目要求,个人中心的客服图片在用户长按时可以识别其二维码
  • 在百度无果,参考小程序官方文档后,发现:
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]
    })
  },

③. 实现效果

  • 可以发现,下图中是没有“识别图中二维码”的选项
  • 如果发送给了好友或者自行保存后,在微信中打开的并长按的效果如下:

怎么说呢?我也好无奈啊 ...

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

在浏览器里使用SAPGUI里的SE80

(1). 在后台找到Fiori catalog page ID: SAP_FIORI_EXTENSIBILITY

35450
来自专栏Coding迪斯尼

java开发操作系统:不锁死控制台的加载用户进程

13920
来自专栏守望轩

Visual Studio 2008 每日提示(二十一)

#201、在vs里运行外部工具 原文链接:You can run external tools within Visual Studio 操作步骤: 菜单:...

38350
来自专栏Java成神之路

eclipse提交项目到github

3.右击"Test"->Team->share project...  ->select a repository type:Git

8310
来自专栏互联网开发者交流社区

SpringBoot配置文件的加载位置

21320
来自专栏编程

手把手教 Vue-环境搭建

1 教程简介 1、阅读对象 本篇教程适合新手阅读,老手直接略过 2、教程难度 初级,本人水平有限,文章内容难免会出现问题,如果有问题欢迎指出,谢谢 3、Demo...

44150
来自专栏向前进

vue-cli脚手架npm相关文件解读(6)build.js

系列文章传送门: 1、build/webpack.base.conf.js 2、build/webpack.prod.conf.js 3、build/webp...

42880
来自专栏ml

JavaScript基础知识(1)

表单的确认 :       客户端确认         --减少服务器负载         --缩短用户等待时间         --兼容性难       服务...

29330
来自专栏黄Java的地盘

如何实现一个脚手架进阶版(Vue-cli v2.9学习篇)

在之前一篇博客介绍了关于Node脚手架的一些基础的知识,这篇博客是在之前的基础上针对在Node中开发脚手架中遇到的问题,如:

19710
来自专栏韩伟的专栏

Linux的GUI程序在Windows上使用

一,在linux机上安装xorg-x11-xauth 如果没装,启动GUI程序会提示Canno open display。 方法: yum install x...

33750

扫码关注云+社区

领取腾讯云代金券