小程式內嵌 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 初始化配置。