手机扫码功能实现示例 - 前端代码详解 - 常规

以下是一个前端页面调用手机扫码功能的示例：

<!DOCTYPE html>
<html>
<head>
    <title>手机扫码功能示例</title>
    <script src='https://cdn.jsdelivr.net/npm/qrcode-generator/qrcode.min.js'></script>
</head>
<body>
    <h1>手机扫码示例</h1>
    <div id='qrcode'></div>

    <script>
        // 生成二维码
        var qr = qrcode(0, 'L');
        qr.addData('https://www.example.com'); // 在这里替换成你要生成二维码的内容
        qr.make();

        // 在页面上显示二维码
        var qrcodeElement = document.getElementById('qrcode');
        qrcodeElement.innerHTML = qr.createImgTag();

        // 检查是否在移动设备上
        var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

        // 如果在移动设备上，显示扫码提示
        if (isMobile) {
            var scanPrompt = document.createElement('p');
            scanPrompt.innerText = '请使用手机扫描二维码';
            document.body.appendChild(scanPrompt);
        }
    </script>
</body>
</html>

在上面的示例中，我们使用了 qrcode-generator 库来生成二维码，并将其显示在页面上。然后，我们使用 navigator.userAgent 检测当前设备是否为移动设备，如果是，就显示一个提示用户使用手机扫描二维码的提示文本。

你需要将 'https://www.example.com' 替换成你要生成二维码的内容。