720全景怎么嵌入官网、公众号和小程序？3种部署方式对比

全景拍完只是开始，真正决定它有没有用的，是「放在哪里、怎么放」。这篇把三种主流部署方式讲清楚，包括可以直接复制使用的代码。

一、方式一：iframe 嵌入官网

适合已有官网、想在企业展厅或产品页里直接展示全景的场景。优点是不用跳转、体验连贯；缺点是移动端需要单独适配高度。

基础写法：

<iframe
  src="https://dofvr.cn/panorama/your-project/"
  title="企业展厅 VR 全景"
  width="100%"
  height="600"
  style="border:0;border-radius:8px;"
  loading="lazy"
  allowfullscreen>
</iframe>

移动端建议用 CSS 按比例撑开，避免固定 600px 在手机上过高：

<div style="position:relative;width:100%;padding-top:62.5%;">
  <iframe src="https://dofvr.cn/panorama/your-project/"
    style="position:absolute;inset:0;width:100%;height:100%;border:0;"
    loading="lazy" allowfullscreen>
  </iframe>
</div>

62.5% 是 16:10 的比例，可按需改成 56.25%（16:9）或 75%（4:3）。

用 iframe 要注意的三件事

1. SEO：iframe 里的内容不会被计入当前页面的收录。如果这个全景本身是重要落地页，请另做一个独立页面（方式三），从官网内链过去。
2. HTTPS：主站是 https 时，iframe 源也必须是 https，否则浏览器会拦截。
3. 加载性能：加 loading="lazy" 让全景在滚动到可见区域时才加载，避免拖慢首页首屏。

二、方式二：独立页面 + 公众号跳转

这是公众号场景唯一可行的方式。微信内置浏览器不支持在图文里嵌 iframe，只能给一个链接让用户点进去。

三种挂法

• 自定义菜单：公众号后台 → 自定义菜单 → 跳转网页 → 填入全景链接。适合作为常驻入口。
• 图文内链接：在文章里插入「阅读原文」或文字超链接。适合每次推文配合活动使用。
• 关键词自动回复：设置关键词「看房」「全景」，自动回复带链接的图文。适合销售一对一发送。

独立页面对 SEO 的价值

独立页有独立 URL、独立 TDK，可以被百度收录，也能被 AI 搜索引用。我们给客户交付的项目页通常自带标题、描述与结构化数据，正是为了这一点。相较之下 iframe 版对搜索几乎零贡献。

三、方式三：小程序 web-view

已有小程序、希望把全景放进自有流量池的场景。需要用 web-view 组件承载 H5 链接。

<!-- pages/panorama/index.wxml -->
<web-view src="https://dofvr.cn/panorama/your-project/"></web-view>

配置要点：

1. 小程序后台 → 开发管理 → 开发设置 → 业务域名，添加全景所在域名。
2. 把微信提供的校验文件放到该域名根目录（我们可代为部署，通常 10 分钟内完成）。
3. web-view 只能打开已配置业务域名的页面，且个人主体小程序不支持 web-view。
4. 页面上不要放诱导分享、外部支付等违规内容，否则会被拦截。

四、三种方式对比

对比项	iframe 嵌官网	独立页 + 公众号	小程序 web-view
适用场景	企业官网、产品页	公众号、销售发送、线下物料	自有小程序流量池
开发成本	复制一段代码即可	无需开发	需配置业务域名
对 SEO 的帮助	几乎没有	有，可被收录与引用	无（小程序独立生态）
移动端体验	需按比例适配	原生 H5，体验最好	接近原生，返回键需处理
微信内打开	可以	可以	仅小程序内
适合谁	有官网的企业	大多数客户	已有小程序的品牌

实践中最多人用的是组合：官网嵌 iframe 做门面，独立页做 SEO 与公众号入口，二维码印在物料上。三者共用同一套成片，不需要重复制作。

五、加载速度怎么优化

全景图体积大，加载慢是常见抱怨。可用的手段有四个，我们在交付时默认已做前三项：

• 分级加载：先加载低清图让用户立即能拖动，再在后台加载高清图。
• WebP 格式：同等画质下体积比 JPG 小 25%~35%。
• CDN 分发：全景文件走 CDN，就近节点返回，首屏时间可压到 2 秒内。
• 懒加载：非首场景的全景图在用户点击切换时才请求。

六、常见问题

全景链接会过期吗？

不会。交付的链接长期有效，只要域名与服务器正常续费。若部署在客户自有服务器，需自行保证服务器与域名有效。

可以换成我们自己的域名吗？

可以。源代码交付后可在自有服务器部署，绑定自己的域名。国内服务器需完成 ICP 备案。

iframe 高度自适应有更省事的办法吗？

可以用 postMessage 让全景页把自己的高度传给父页面，父页面动态设置 iframe 高度。这个方案我们会在交付文档里一并提供。

公众号里点开是空白页怎么办？

多数是域名未备案被微信拦截，或链接是 http 而非 https。把链接改成 https 并在微信里重新打开即可验证。