分享链接带用户ID需用history.replaceState或后端302跳转防参数丢失；佣金接口须JWT鉴权、返回脱敏数据；分享卡片需SSR写死og标签且图片符合平台要求；提示音必须在用户手势中直接调用play()。
分享链接怎么带用户ID参数又不被浏览器拦截
直接拼 window.location.href + ?ref=123 很容易被某些安卓浏览器或微信内置浏览器自动剥离参数，尤其在唤起外部App或跳转到新页面时。根本原因是部分环境对URL长度、特殊字符或重定向链敏感。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
history.replaceState()替换当前URL，避免刷新导致参数丢失； - 优先走后端跳转：把分享按钮绑定为
POST提交到一个中转页（如/share?uid=123），由服务端 302 跳转到目标页并带上ref； - 避免在
href属性里硬写带参URL，改用onclick触发window.open()或location.assign()，并确保参数已 encodeURIComponent； - 微信内必须用
JS-SDK的updateAppMessageShareData和updateTimelineShareData重置分享配置，否则转发后链接不带参。
佣金数据怎么实时显示又不暴露后端接口
前端直接调 /api/user/commission 拿数据，等于把鉴权逻辑和接口地址全摊开，爬虫或恶意用户能伪造请求刷佣金。更糟的是，如果返回值含用户真实手机号、银行卡尾号等，还可能违反隐私规范。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有佣金相关接口必须校验
Authorizationheader 中的 JWT，且 token 有效期 ≤ 2 小时； - 前端只展示脱敏后数据：比如余额显示
¥1,289.40，但接口返回字段是{ display_balance: "¥1,289.40", raw_cents: 128940 }，真正计算用raw_cents，渲染用display_balance； - 避免在 HTML 源码里预埋 JSON 数据（如
data-commission='{"total":128940}'），改用 JS 异步 fetch，并设置credentials: 'include'复用 Cookie 鉴权； - 关键动作（如提现申请）必须二次确认 + 图形验证码，防止 XSS 注入后自动提交。
分享卡片在微信/钉钉里点开空白或样式错乱
不是代码写错了，而是这些平台会预抓取页面 <meta> 标签生成卡片，如果 og:title、og:image 缺失或路径不对，或者 JS 渲染太慢，卡片就 fallback 成纯 URL，甚至白屏。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
og:image必须是绝对 HTTPS 地址，尺寸建议 1200×630px，大小 ≤ 5MB，且服务器需允许跨域（Access-Control-Allow-Origin: *）； - 不要依赖 React/Vue 等框架动态注入
og:标签，服务端渲染（SSR）或静态生成时就要写死； - 微信调试用
https://developers.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/info查看实际抓取结果； - 钉钉要求额外加
<meta name="dingtalk-agent" content="web">，否则不识别分享协议。
用户点击分享按钮没反应或报错 NotAllowedError: play() can only be initiated by user gesture
这是新版 Chrome 和 Safari 对自动播放音频/视频的限制——哪怕你只是想在分享成功后播个提示音，也必须由真实的 click/tap 触发，不能靠 setTimeout 或异步回调触发。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把提示音初始化放在分享按钮的
onclick里，例如：const audio = new Audio('/sound/share.mp3'); audio.play().catch(e => console.log('muted'));； - 别在
fetch成功回调里再调audio.play()，此时已脱离用户手势上下文； - 真要异步反馈，改用震动 API：
navigator.vibrate?.([100])（仅移动端），或 CSS 动画高亮按钮； - 微信内若用
weixin://协议唤起分享，注意 iOS 上必须先调一次WXJSSDK.ready()，否则shareAppMessage会静默失败。
佣金页面最麻烦的从来不是“怎么画出来”，而是“怎么不让别人绕过规则拿钱”。参数传递、接口防护、分享链路、用户行为上下文——每个环节断掉一环，整个分佣模型就可能被批量薅。别迷信前端校验，该后端拦的必须拦住，该服务端签名校验的不能图省事放前端算。
