微信小程序中长按识别二维码

Posted 2023-04-09 猫老板的豆

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序中长按识别二维码相关的知识，希望对你有一定的参考价值。

小程序中的图片已支持长按识别了，总结一下几种情况下：

一、image标签 + show-menu-by-longpress=“true”

<image src="qrcode" mode="widthFix" show-menu-by-longpress="true"></image>

属性	类型	默认值	必填	说明
`show-menu-by-longpress`	boolean	false	否	长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。

支持长按识别的码

✅ 小程序码
✅ 微信个人码
✅ 企业微信个人码
✅ 普通群码（指仅包含微信用户的群）
✅ 互通群码（指既有微信用户也有企业微信用户的群）
✅ 公众号二维码

image标签

二、wx.previewImage

wx.previewImage(
  current: '', // 当前显示图片的 http 链接
  urls: [] // 需要预览的图片 http 链接列表
)

支持长按识别的码

✅ 小程序码
✅ 微信个人码（不支持小游戏）
✅ 企业微信个人码（不支持小游戏）
✅ 普通群码（指仅包含微信用户的群，不支持小游戏）
✅ 互通群码（指既有微信用户也有企业微信用户的群，不支持小游戏）
✅ 公众号二维码（不支持小游戏）

wx.previewImage

三、 web-view

支持长按识别的码

✅ 识别小程序码
✅ 跳转小程序
✅ 识别群二维码
✅ 跳转到加群页面
✅ 识别名片二维码
✅ 跳转到加好友页面
❌ 识别小程序二维码

web-view

注：最低版本为2.18.0

Jquery生成二维码(微信中长按图片识别二维码功能)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
        <script src="//cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
        <script type="text/javascript">
            $(function () {  
                var text ="${strrest}";
                 var qrcode= $(‘#divOne‘).qrcode(utf16to8(text)).hide(); 
                 console.info(qrcode);
                    var canvas=qrcode.find(‘canvas‘).get(0);  
                    console.info(canvas);
                    $(‘#imgOne‘).attr(‘src‘,canvas.toDataURL(‘image/jpg‘));
                    })                    
                    function utf16to8(str) { //转码  
                        var out, i, len, c;  
                        out = "";  
                        len = str.length;  
                        for (i = 0; i < len; i++) {  
                            c = str.charCodeAt(i);  
                            if ((c >= 0x0001) && (c <= 0x007F)) {  
                                out += str.charAt(i);  
                            } else if (c > 0x07FF) {  
                                out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  
                                out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));  
                                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));  
                            } else {  
                                out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));  
                                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));  
                            }  
                        }  
                        return out;  
                    }
        </script>
    </head>
    <body>
        <div id="divOne"></div> 
         <img id=‘imgOne‘ /> 
    </body>
</html>

解决项目中在微信端生成的图片长按具有识别二维码选项的功能。

以上是关于微信小程序中长按识别二维码的主要内容，如果未能解决你的问题，请参考以下文章

微信小程序里长按识别二维码

小程序中内嵌的H5页面上的二维码可以长按识别吗？