小程序内嵌 SaaS 观看页商品跳转小程序对接指南

最近更新时间：2026年5月21日

适用场景

本文适用于接入方通过微信小程序 <web-view> 内嵌保利威 SaaS 观看页，并希望观看页内的商品点击后跳转到接入方小程序指定页面的场景。

典型诉求包括：

• 观看页观众在接入方小程序内观看保利威 SaaS 直播观看页。
• 观看页内展示商品库配置的商品。
• 观众点击商品后，需要跳转到接入方小程序指定页面。
• 接入方希望复用保利威 SaaS 观看页能力，或在自己的小程序体系内完成商品承接。

需要注意的是，当前保利威 SaaS 观看页的商品跳转实现，需要先完成微信 JS-SDK 初始化，再调用小程序跳转接口。不同观看页域名和承接方式，对应的配置项不同。

解决方案一：直接内嵌保利威 SaaS 观看页完成商品跳转

实现方式

这种方式适用于接入方直接将保利威默认 SaaS 观看页嵌入小程序 <web-view>，不使用接入方自定义观看页域名，也不配置接入方自定义公众号的场景。

实现逻辑：

• 接入方小程序通过 <web-view> 打开保利威默认 SaaS 观看页。
• SaaS 观看页加载商品库配置的商品。
• 观众在 SaaS 观看页内点击商品。
• SaaS 观看页使用保利威默认观看页对应的微信 JS-SDK 配置完成初始化。
• SaaS 观看页调用小程序跳转接口。
• 观众进入接入方小程序指定页面。

保利威负责：

• 提供默认 SaaS 观看页。
• 在 SaaS 观看页内展示商品。
• 根据商品库配置触发小程序跳转逻辑。
• 维护默认观看页域名对应的微信 JS-SDK 配置。

接入方负责：

• 在微信小程序后台配置保利威默认观看页域名为业务域名。路径：微信小程序后台 → 开发管理 → 开发设置 → 业务域名。
• 在商品库中配置商品点击后的小程序路径和参数。
• 确保接入方小程序可以识别商品跳转路径和参数。

优势：

• 接入成本较低。
• 不需要接入方配置观看页自定义域名。
• 不需要接入方配置自定义公众号。
• 适合希望快速复用 SaaS 观看页商品跳转能力的场景。

注意事项：

• 接入方小程序后台仍然需要配置保利威默认观看页域名为业务域名，否则小程序可能无法打开观看页。
• 该方案使用保利威默认观看页域名和默认微信 JS-SDK 配置，通常不需要接入方额外配置自定义公众号。
• 商品跳转的小程序路径和参数仍需由接入方确认并测试。
• 如果接入方对外必须展示自己的观看页域名，需要选择自定义观看页域名方案。

对接流程

graph TD
    A["观众进入接入方小程序"] --> B["小程序 web-view 打开保利威默认 SaaS 观看页"]
    B --> C["SaaS 观看页加载商品"]
    C --> D["观众点击商品"]
    D --> E["SaaS 观看页发起小程序跳转"]
    E --> F["跳转接入方小程序指定页面"]

解决方案二：配置自定义域名和公众号后由 SaaS 观看页完成商品跳转

实现方式

这种方式适用于接入方希望观众通过自己的域名访问 SaaS 观看页，并复用 SaaS 观看页内置商品跳转能力的场景。观众点击商品后，由 SaaS 观看页发起小程序跳转。

实现逻辑：

• 接入方小程序通过 <web-view> 打开接入方自定义域名下的 SaaS 观看页。
• SaaS 观看页加载商品库配置的商品。
• 观众在 SaaS 观看页内点击商品。
• SaaS 观看页根据接入方配置的自定义公众号完成微信 JS-SDK 初始化。
• SaaS 观看页调用小程序跳转接口。
• 观众进入接入方小程序指定页面。

保利威负责：

• 支持接入方使用自定义观看页域名访问 SaaS 观看页。
• 在 SaaS 观看页内展示商品。
• 根据商品库配置触发小程序跳转逻辑。
• 支持使用接入方配置的自定义公众号信息完成微信 JS-SDK 初始化。

接入方负责：

• 完成观看页自定义域名配置。如果使用 CNAME 方式，需要在接入方 DNS 服务商处将自定义域名指向保利威提供的目标地址。
• 在微信小程序后台配置自定义观看页域名为业务域名。路径：微信小程序后台 → 开发管理 → 开发设置 → 业务域名。
• 在微信公众号后台配置自定义观看页域名为 JS 接口安全域名。路径：微信公众号后台 → 设置与开发 → 公众号设置 → 功能设置 → JS 接口安全域名。
• 准备自定义公众号信息。路径：微信公众号后台 → 设置与开发 → 基本配置，获取公众号 AppID 和 AppSecret。
• 按微信公众号后台要求下载域名校验文件，并保证该文件可通过自定义观看页域名根路径访问。
• 在保利威侧配置自定义公众号信息。配置入口通常为保利威后台的自定义公众号或微信授权配置入口；如果当前账号无对应入口，需要联系服务支持协助配置。
• 在商品库中配置商品点击后的小程序路径和参数。

优势：

• 观众看到的是接入方自己的观看页域名。
• 可复用 SaaS 观看页内置商品展示和跳转能力。
• 接入方不需要单独开发商品点击承接页。

注意事项：

• 如果接入方使用自定义观看页域名，保利威默认公众号通常无法覆盖该自定义域名的 JS-SDK 配置。
• 接入方需要使用自己的公众号或自定义公众号完成微信 JS-SDK 初始化。
• 小程序 <web-view> 业务域名和公众号 JS 接口安全域名需要分别配置。前者决定小程序能否打开观看页，后者决定观看页内能否完成微信 JS-SDK 初始化。
• 如果微信 JS-SDK 初始化失败，商品点击可能表现为无反应。

对接流程

graph TD
    A["观众进入接入方小程序"] --> B["小程序 web-view 打开自定义域名 SaaS 观看页"]
    B --> C["SaaS 观看页加载商品"]
    C --> D["观众点击商品"]
    D --> E["SaaS 观看页使用自定义公众号完成微信 JS-SDK 初始化"]
    E --> F["SaaS 观看页发起小程序跳转"]
    F --> G["跳转接入方小程序指定页面"]

解决方案三：由接入方 H5 承接商品点击并跳转小程序

实现方式

这种方式适用于接入方希望自行控制商品点击后的跳转链路，或希望在自己的 H5 页面中完成微信 JS-SDK 初始化和小程序跳转的场景。

实现逻辑：

• 接入方小程序通过 <web-view> 打开接入方 H5 页面。
• 接入方 H5 页面完成微信 JS-SDK 初始化。
• 接入方 H5 页面通过 iframe 或其他方式承载 SaaS 观看页。
• 观众在 SaaS 观看页内点击商品。
• SaaS 观看页通过 window.parent.postMessage 将商品点击信息传递给接入方 H5 页面。
• 接入方 H5 页面调用 wx.miniProgram.navigateTo 跳转小程序页面。

保利威负责：

• 提供 SaaS 观看页和商品点击能力。
• 支持抛出商品列表中商品 item 的点击事件。
• 在 iframe 承载场景下，通过 window.parent.postMessage 向接入方 H5 页面传递商品点击信息。

接入方负责：

• 开发自己的 H5 承接页。
• 在微信小程序后台配置 H5 承接页所属域名为业务域名。路径：微信小程序后台 → 开发管理 → 开发设置 → 业务域名。
• 在微信公众号后台配置 H5 承接页所属域名为 JS 接口安全域名。路径：微信公众号后台 → 设置与开发 → 公众号设置 → 功能设置 → JS 接口安全域名。
• 在 H5 承接页完成微信 JS-SDK 初始化。
• 监听并校验 SaaS 观看页通过 postMessage 传出的商品点击信息。
• 调用 wx.miniProgram.navigateTo 完成小程序跳转。
• 维护商品路径、参数解析和跳转异常处理。

优势：

• 跳转逻辑由接入方自行控制。
• 可结合接入方自己的商品、会员、订单等业务流程。
• 接入方可以统一处理商品点击后的鉴权、埋点和异常提示。

注意事项：

• 接入方需要自行维护 H5 承接页和小程序跳转逻辑。
• 接入方需要处理 H5 页面与 SaaS 观看页之间的 postMessage 消息通信。
• SaaS 观看页内部的 Vue emit 事件不能被 iframe 外部页面直接监听；如果接入方通过 iframe 承载 SaaS 观看页，需要由 SaaS 观看页显式调用 window.parent.postMessage 将商品点击信息传递给接入方 H5 页面。
• 接入方仍然需要保证业务域名、JS 接口安全域名、公众号和小程序路径等配置正确。
• 开发和测试成本高于直接使用 SaaS 观看页跳转能力。

对接流程

graph TD
    A["观众进入接入方小程序"] --> B["web-view 打开接入方 H5 页面"]
    B --> C["接入方 H5 完成微信 JS-SDK 初始化"]
    C --> D["接入方 H5 承载 SaaS 观看页"]
    D --> E["观众点击商品"]
    E --> F["SaaS 观看页 postMessage 商品点击信息"]
    F --> G["接入方 H5 调用 wx.miniProgram.navigateTo"]
    G --> H["跳转接入方小程序指定页面"]

方案对比

补充说明

观看页自定义域名

观看页自定义域名是指接入方使用自己的域名访问保利威 SaaS 观看页，例如将默认观看页地址替换为接入方自己的业务域名。

常见接入方式是 CNAME 方式：

• 接入方准备自己的域名，例如 live.example.com。
• 保利威提供一个 CNAME 目标地址。
• 接入方在自己的 DNS 服务商处，将 live.example.com 的 CNAME 指向保利威提供的目标地址。
• 域名解析生效后，观众访问 live.example.com 时，实际访问的是保利威承载的 SaaS 观看页。

可以理解为，CNAME 不是把页面复制到接入方服务器，而是让接入方域名指向保利威的观看页服务。接入方对外展示自己的域名，观看页内容仍由保利威提供。

小程序业务域名与公众号 JS 接口安全域名

小程序 <web-view> 业务域名和公众号 JS 接口安全域名是两个不同配置，分别控制不同能力。

因此，接入方小程序可以正常打开 SaaS 观看页，并不代表观看页内的商品跳转一定正常。商品跳转还需要当前 H5 页面具备可用的微信 JS-SDK 初始化配置。