Web 态概述

Web 态是百度小程序包在后台自动转化得到的一个 H5 版本的小程序，其功能与展示形式与小程序一致。Web 态目前有两个核心使用场景：

1. 『搜索 Web 态』场景：

百度智能小程序为开发者提供了 对接百度搜索生态的能力。 由于智能小程序运行在宿主 App 中，无法被爬虫感知，所以需要对智能小程序进行 Web 态的处理。 搜索场景的 Web 态使得小程序能够接入自然搜索流量，关于如何接入自然搜索流量请阅读 接入自然搜索结果。

2. 『分享 Web 态』场景：

由于将小程序内容分享至百度 APP 端外后，用户在回流页只能看到通用回流引导，无法查看分享的具体内容，获取分享信息的路径较长且回流折损高。因此，百度智能小程序为开发者提供了分享 Web 态功能，可以将小程序自动转化成 web 版本，其功能和内容展示与小程序基本一致，能在端外的回流页直接展现用户分享的小程序内容，为用户提供优质的闭环体验，提升用户回流率及转化率，也能更好的刺激用户分享。

关于端外分享场景的体验及接入流程详见 如何在端外场景提供优质的小程序闭环体验

Web 态对小程序开发者来说是透明的，开发者几乎不用做额外的适配即可完成转换（由于 H5 与客户端天然存在的差异，针对 Web 态的场景，我们仍有一些 开发建议 希望开发者能够关注）。

一、域名配置

预览 Web 态前，请确保已经配置了以下合法域名，否则可能会由于请求失败而导致页面白屏。

  1. 用于发起页面请求的 『服务器域名』
  2. 用于调用 Webview 组件所打开网页的 『业务域名』（如果使用了 Webview 组件）

注意：出于浏览器的安全策略，不允许在 web-view 组件中访问 http 协议的链接，请配置 https 安全链接。

配置方式：小程序开发者平台 → 设置 → 开发设置 → 服务器域名、业务域名

Web 态概述 - 图1

二、Web 态页面地址

图片

  • 每个小程序都有唯一的子域名，查看方式详见本文档的『 三、Web 态预览 3.获取 Web 态地址』；
  • URL 中 path 和 query 部分和小程序页面中的 path 和 query 一致。比如：上例对应的小程序页面在百度 APP 中的打开路径即为 /pages/detail/index?id=1；
  • 如 URL 未指定 path 和 query，默认跳转首页。

1. 搜索 Web 态页面地址

对于搜索场景，Web 态的 URL 即上述通用地址：

https://xx.smartapp.cn/pages/detail/index?id=1

在测试环节，需添加 _swebfr=0 的 query 参数以指定该场景，用来回归 setPageInfo 等功能。

2. 分享 Web 态页面地址

对于分享场景，Web 态的 URL 中会增加 _swebfr=1 的 query 参数用以区分该场景，对于上述的 Web 态地址所对应的分享地址为：

https://xx.smartapp.cn/pages/detail/index?id=1&_swebfr=1

三、Web 态预览

1. 搜索 Web 态预览

  • 在登录状态下，点击 『预览』 按钮，弹出窗中切换到 『WEB 预览』 Tab，可以使用手机浏览器扫描该二维码，查看真机浏览器下的 Web 态效果。
  • 也可以点击弹窗中的 『在浏览器中调试』，通过 PC 端的浏览器查看和调试 Web 态页面。

2. 分享 Web 态预览

  • 对于开通了 Web 态分享的小程序，在登录状态下，点击 『预览』 按钮，弹出窗中可切换到 『分享WEB化』 Tab，可以使用手机浏览器扫描该二维码，查看真机浏览器下的分享 Web 态效果。
  • 也可以点击弹窗中的 『在浏览器中预览』，通过 PC 端的浏览器查看和调试 Web 态页面。

图片

3. 获取 Web 态地址

使用上述的『在浏览器中调试』/『在浏览器中预览』可以查看相应的 Web 态地址。用浏览器中打开后，该 URL 的域名即是该小程序的 Web 态真实域名。
预览环境的 URL 后有 appKey 参数，正式线上环境下没有该 appKey 参数。
『分享 Web 态』场景有_swebfr=1参数。

图片

四、分享 Web 态调试

在 3.16.1 及以上版本的开发者工具中，对于开通了分享 Web 态的小程序，增加了 『分享 Web 态调试』 的功能。
点击菜单栏的 『分享 Web 态调试』 即可弹出 Chrome 调试窗口，在工具中编辑源码后，调试窗口会实时更新，开发者可以像调试普通 H5 网页一样调试分享场景的 Web 态小程序。

img

更多开发注意事项请阅读 Web 态开发建议。