本文介绍通过 postmessage 机制，在 wix 自定义 html/js（如 html5-qrcode）中向 velo 代码发送扫描结果，并由 velo 安全执行 wixdata.insert() 等敏感操作，实现前后端解耦与权限隔离。
本文介绍通过 postmessage 机制，在 wix 自定义 html/js（如 html5-qrcode）中向 velo 代码发送扫描结果，并由 velo 安全执行 wixdata.insert() 等敏感操作，实现前后端解耦与权限隔离。
在 Wix 开发中，Velo（Wix 的后端/服务端运行环境）与自定义嵌入的纯前端 JavaScript（如通过「Custom Code」添加的 html5-qrcode）运行在完全隔离的上下文中：前者受 Wix 安全沙箱保护，可安全访问数据库；后者仅运行于浏览器客户端，无法直接调用 wix-data 或其他 Velo API。因此，不能将 wixData.insert() 写在 Custom Code 的 JS 中——这会因跨域/权限限制而报错或被拒绝。
✅ 正确方案是采用标准的跨上下文通信机制：postMessage + $w.htmlComponent.onmessage。
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
✅ 实现步骤
1. 在 Velo 页面代码中监听消息（推荐放在 backend/page.js 或页面级 public/js/my-page.js）
// 注意：必须绑定到一个已存在的 HTML Component（如名为 'qrReceiver' 的自定义 HTML 组件）
$w.onReady(function () {
// 确保该组件已添加且 ID 匹配（例如：HTML Component 的 ID 设为 'qrReceiver'）
$w('#qrReceiver').onMessage((event) => {
const { data } = event;
// ✅ 严格校验消息来源与结构（安全关键！）
if (data?.type === 'QR_SCAN_RESULT' && typeof data.url === 'string' && data.url.trim()) {
const url = data.url.trim();
// 执行数据库写入（自动继承当前用户权限，支持角色/规则校验）
wixData.insert('scanned_instructions', { URL: url })
.then((result) => {
console.log('✅ QR 数据已存入集合:', result._id);
})
.catch((err) => {
console.error('❌ 插入失败:', err);
});
}
});
});2. 在 Custom Code 的 HTML/JS 中触发 postMessage（确保目标为正确的 HTML Component）
<!-- 在 Wix 后台 → Settings → Advanced → Custom Code → Add Code to Site Header/Footer -->
<script>
// 等待 HTML Component 加载完成（推荐使用 MutationObserver 或延时确保 DOM 可用）
function sendQrResult(url) {
const targetEl = document.getElementById('qrReceiver'); // ID 必须与 Velo 中的组件 ID 一致
if (targetEl && targetEl.contentWindow) {
targetEl.contentWindow.postMessage(
{ type: 'QR_SCAN_RESULT', url },
'*' // ⚠️ 生产环境请替换为具体 origin，如 'https://your-site.wixsite.com'
);
}
}
// 示例：html5-qrcode 成功解码后的回调
function onScanSuccess(decodedText, decodedResult) {
console.log('Scanned:', decodedText);
sendQrResult(decodedText); // 触发 Velo 数据写入
}
// 初始化 QR 扫描器（略去 html5-qrcode 初始化细节）
// new Html5QrcodeScanner(...).render(onScanSuccess, ...);
</script>⚠️ 关键注意事项
- 安全第一：postMessage 的 targetOrigin 参数切勿使用 '*' 上线，应明确指定为你的 Wix 站点域名（如 'https://mysite.wixsite.com'），防止恶意站点伪造消息。
- 组件绑定：$w('#qrReceiver') 中的 qrReceiver 必须是你在编辑器中手动添加的「HTML Component」，并设置其 ID 为 qrReceiver（而非任意 div）。该组件本身可为空 <div></div>，仅作通信桥梁。
- 权限控制：所有数据库操作仍在 Velo 上下文中执行，天然受 Wix 数据库权限规则（如「仅登录用户可写」）约束，比前端直连更安全。
- 错误处理：务必在 Velo 中捕获 wixData.insert() 的异常，并记录日志；前端无需等待响应，但可监听 onMessage 的返回（需双向通信设计）。
✅ 总结
通过 postMessage 桥接自定义前端 JS 与 Velo，既满足了动态扫码录入需求，又严格遵循了 Wix 的安全模型——敏感逻辑留在受控后端，前端只负责采集与传递。这是 Wix 生态中调用 Velo 功能的标准、可靠且可扩展的方式。
