简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
前端 - 微信网页中长按二维码图片能弹出菜单是怎么实现的？
PHP中文网
PHP中文网 2017-04-17 11:43:23
0
4
612

微信网页中长按二维码图片能弹出收藏、保存、识别图中二维码的菜单是怎么实现的?
为什么同样的图片一个加了绝对定位就没菜单弹出，另一个什么都不加就能弹出？

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<meta name="viewport" content="width=640,target-densitydpi=device-dpi,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
</head>
<body>
<p><img src="img/qr.jpg" alt="二维码图片" /></p>
<p style="position:absolute; top:660px; left:225px; z-index:1000;"><img src="img/qr.jpg" alt="二维码图片" /></p>
</body>
</html>
PHP中文网
PHP中文网

认证0级讲师

reply all(4)
黄舟
黄舟2017-04-17 11:45:23 4 floor

对于微信内置浏览器而言，就是实现一个contextMenu,判断一下context.MediaType,贴一个chrome扩展里右键图片菜单的代码，你可以当做微信实现的伪代码来看

chrome.contextMenus.create
        title: "Send to chat"
        contexts: ['image']
        onclick: send2chat
chrome.contextMenus.create
        title: "Save to phone"
        contexts: ['image']
        onclick: save2phone
...

至于为什么知道他是二维码，当你长按图片的时候，你回发现前三个菜单选项是先弹出来的，扫描二维码是最后停顿了大约1s之后再弹出来的，这段时间就是微信内置浏览器通过算法判断这个图片是否是二维码，若是，则在长按菜单中追加一个“扫描二维码”的选项，当然，如果你想知道具体的“如何判断一张图片是否包含二维码？”，那就得从二维码的定位点，纠错机制去讲了，这里略过不表，你可以自行google，送你一把小梯子。

关于为什么绝对定位时没有弹出来，应该是样式的问题，导致这个图片没有高度，没有触发他的longPress事件，具体你可以看一下，有问题再留言

Like +0
Add Reply
伊谢尔伦
伊谢尔伦2017-04-17 11:45:23 3 floor

40多天前，我也遇到这个问题，
发现 只要这个图片的left,top 较body 的0,0位置 大于150像素后 长按图片就没反应，

无论我怎么套p ，怎么设置postion 都不行，

无奈我当时的项目，为了解决问题我把那个 二维码 做成一张 大的透明png 以body 左上角开始，这样测试OK

但是现在另外一个项目，有遇到这个问题，但是这次无法这样来解决了，哎 ，

不过这次网上看到很多同样的问题。不过也都没有解决！

Like +0
Add Reply
大家讲道理
大家讲道理2017-04-17 11:45:23 2 floor

iOS 下的微信客户端在长按识别二维码的时候有bug，具体可以见这里 http://devework.com/weixin-qrcode-bug2.html

Like +0
Add Reply
巴扎黑
巴扎黑2017-04-17 11:45:23 1 floor

<meta name="viewport" content="width=640,target-densitydpi=device-dpi,user-scalable=no" />这个写错了，不能用这种，要用<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />，不然识别的时候还是按照我下面那个识别的，不信你可以把手机在屏幕四处随便长按就能发现了

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！