如何从原生JS调用Wix Velo函数存储扫码结果至集合？

步骤1：在Velo页面代码中封装并暴露存储函数 #

打开Wix编辑器，进入对应扫码页面的代码面板，编写以下代码：

import wixData from 'wix-data';

// 封装存储扫码值的函数
export function saveScannedQRCode(url) {
    return wixData.insert('scanned_instructions', {
        URL: url
    })
    .then(() => {
        console.log("扫码值存储成功");
        return { success: true };
    })
    .catch((err) => {
        console.error("存储失败:", err);
        return { success: false, error: err };
    });
}

// 将函数挂载到全局window对象，让自定义代码可调用
$w.onReady(function () {
    window.saveScannedQRCode = saveScannedQRCode;
});

步骤2：在自定义代码中调用存储函数 #

进入Wix后台对应页面的自定义代码面板，将代码添加到页面底部，修改扫码逻辑如下：

<script src="https://unpkg.com/html5-qrcode@2.3.8/dist/html5-qrcode.min.js"></script>
<div id="reader" style="width: 300px;"></div>
<script>
    const html5QrCode = new Html5Qrcode("reader");
    const qrCodeSuccessCallback = (decodedText) => {
        // 解码成功后调用Velo暴露的存储函数
        if (window.saveScannedQRCode) {
            window.saveScannedQRCode(decodedText)
                .then(result => {
                    if (result.success) {
                        alert("扫码内容已保存");
                        // 可选：扫码成功后停止扫描
                        html5QrCode.stop();
                    } else {
                        alert("保存失败，请重试");
                    }
                });
        } else {
            console.error("存储函数未加载，请检查Velo代码");
        }
    };
    const config = { fps: 10, qrbox: { width: 250, height: 250 } };
    
    // 启动扫码
    html5QrCode.start(
        { facingMode: "environment" },
        config,
        qrCodeSuccessCallback
    );
</script>

替代方案：用postMessage通信（更安全） #

如果不想挂载全局函数，可通过消息传递实现：

Velo代码部分 #

import wixData from 'wix-data';
import wixWindow from 'wix-window';

$w.onReady(function () {
    // 监听自定义代码发送的保存请求
    wixWindow.onMessage((event) => {
        if (event.type === "saveQRCode") {
            const url = event.data;
            wixData.insert('scanned_instructions', { URL: url })
                .then(() => {
                    wixWindow.postMessage({ type: "saveStatus", success: true });
                })
                .catch(err => {
                    wixWindow.postMessage({ type: "saveStatus", success: false, error: err.message });
                });
        }
    });
});

自定义代码部分 #

<script src="https://unpkg.com/html5-qrcode@2.3.8/dist/html5-qrcode.min.js"></script>
<div id="reader" style="width: 300px;"></div>
<script>
    const html5QrCode = new Html5Qrcode("reader");
    const qrCodeSuccessCallback = (decodedText) => {
        // 发送保存请求到Velo
        window.parent.postMessage({ type: "saveQRCode", data: decodedText }, "*");
        // 监听保存结果
        window.addEventListener("message", (event) => {
            if (event.data.type === "saveStatus") {
                if (event.data.success) {
                    alert("扫码内容已保存");
                    html5QrCode.stop();
                } else {
                    alert(`保存失败：${event.data.error}`);
                }
            }
        }, { once: true });
    };
    const config = { fps: 10, qrbox: { width: 250, height: 250 } };
    
    html5QrCode.start(
        { facingMode: "environment" },
        config,
        qrCodeSuccessCallback
    );
</script>

关键注意事项 #

• 确认scanned_instructions集合已创建，且包含URL字段（字段类型匹配文本/URL）。
• 检查数据库权限：在Wix数据库的「权限」设置中，允许目标用户组执行插入操作。
• 自定义代码建议放在页面底部，避免Velo函数未加载完成就调用。

内容的提问来源于stack exchange，提问作者Ethan1701