移动端页面在微信中实现识别二维码

为客户写一个简单的移动端页面并要在微信浏览器中运行来达到引流效果 , 但在使用时发现页面无法在微信内自动识别二维码

1589946394(1).png

在微信内置的浏览器中二维码无法长按识别 , 网上看了很多解决办法 ,最后解决了,记录一下.

1.首先微信自带支持识别图片中的二维码,无论是外部的页面还是微信自己的公众号,订阅号等

2. 绑定标签

<!--允许用户选中文本-->
-webkit-user-select:text;
-moz-user-select:text;
-ms-user-select:text;
 user-select:text;

3. 使用正确的标签格式

例如:

<div class="bg_pic3">
        <img style="width: 100%;" src="../img/p7.png" >
</div> 

本来用的是这样的方式 , 微信无法识别,引以为戒

 .bg_pic3 {
            background: url(../img/p7.png) no-repeat;
            background-size: 100% 100%;
            width: 10rem;
            height: 10rem;
            margin: 0 auto;
            margin-top: 1%;

        }

<div class="bg_pic3">
</div>