小程式內嵌 SaaS 觀看頁使用邀請海報對接指南

1. 適用場景

本文適用於接入方將微信小程式透過 <web-view> 方式內嵌保利威 SaaS 觀看頁，並希望在觀看頁內使用邀請海報完成分享與溯源的場景。

典型訴求包括：

• 觀看頁觀眾在接入方小程式內觀看保利威 SaaS 直播觀看頁。
• 分享發起觀眾點擊分享後，可以產生帶小程式碼的邀請海報。
• 掃碼訪客掃描海報中的小程式碼後，進入接入方小程式頁面。
• 接入方希望透過小程式碼參數識別分享來源，例如頻道、邀請海報、分享人等。

需要注意的是，小程式碼必須由接入方的小程式服務端產生。保利威無法使用接入方小程式的 appid 和 secret 代為產生小程式碼。

2. 解決方案一：SaaS 輸出邀請海報，接入方提供小程式碼介面

2.1 實現方式

此方式下，邀請海報頁面由保利威 SaaS 觀看頁輸出，接入方只需提供一個取得小程式碼的介面。

實現邏輯：

• 接入方在保利威後台設定「取得小程式碼介面」。
• 分享發起觀眾在 SaaS 觀看頁點擊分享或產生邀請海報。
• 保利威呼叫接入方設定的介面。
• 接入方服務端根據參數產生帶參小程式碼。
• 接入方介面回傳小程式碼圖片位址。
• 保利威將該小程式碼渲染到 SaaS 邀請海報中。

保利威負責：

• 輸出 SaaS 原生邀請海報頁面。
• 呼叫接入方設定的小程式碼介面。
• 將接入方回傳的小程式碼圖片展示到邀請海報中。

接入方負責：

• 準備微信小程式產生碼能力。
• 提供取得小程式碼介面。
• 根據保利威傳入的參數產生對應的小程式碼。
• 確保掃碼訪客掃碼後能進入接入方小程式指定頁面。

優勢：

• 接入方無需單獨開發邀請海報 UI。
• 邀請海報體驗與 SaaS 觀看頁保持一致。
• 接入方開發範圍集中在小程式碼介面。

注意事項：

• 小程式碼產生邏輯仍由接入方服務端負責。
• 接入方需要保證介面穩定可用。
• 小程式碼參數需要與接入方小程式落地頁解析邏輯保持一致。

2.2 對接流程

graph TD
    A["分享发起观众点击分享"] --> B["SaaS 观看页生成邀请海报"]
    B --> C["保利威调用接入方小程序码接口"]
    C --> D["接入方服务端生成小程序码"]
    D --> E["返回小程序码图片地址"]
    E --> F["SaaS 邀请海报展示小程序码"]
    F --> G["扫码访问者扫码进入接入方小程序"]

1. 接入方確認小程式掃碼後的落地頁。
2. 接入方服務端接入微信小程式碼產生能力。
3. 接入方開發「取得小程式碼介面」，介面回傳小程式碼圖片位址。
4. 接入方在保利威後台設定該介面位址。
5. 分享發起觀眾在 SaaS 觀看頁點擊分享並產生邀請海報。
6. 保利威呼叫接入方介面取得小程式碼。
7. 接入方介面根據參數產生小程式碼並回傳圖片位址。
8. 保利威將小程式碼展示到邀請海報中。
9. 掃碼訪客掃碼進入接入方小程式。

接入方需要完成：

• 準備小程式 appid 和 secret。
• 準備服務端產生小程式碼的能力。
• 提供可被保利威呼叫的小程式碼介面。
• 明確小程式碼中需要攜帶的溯源參數。
• 在小程式落地頁解析參數並完成後續業務處理。

3. 解決方案二：接入方在小程式原生層自行開發分享頁

3.1 實現方式

此方式下，接入方在小程式 WebView 外層自行實現分享按鈕、分享彈窗、邀請海報和小程式碼展示。

實現邏輯：

• SaaS 觀看頁作為 H5 頁面執行在小程式 <web-view> 內。
• 接入方在 WebView 外層疊加小程式原生元件。
• 分享發起觀眾點擊接入方開發的分享入口。
• 接入方小程式呼叫接入方服務端產生小程式碼。
• 接入方小程式自行展示邀請海報或分享彈窗。

保利威負責：

• 提供 SaaS 觀看頁內容。
• 不參與接入方原生分享頁的 UI 和小程式碼產生鏈路。

接入方負責：

• 設計並開發小程式原生分享入口。
• 設計並開發邀請海報 UI。
• 呼叫接入方服務端產生小程式碼。
• 展示海報、儲存海報或觸發小程式分享能力。
• 維護分享鏈路中的業務邏輯和溯源邏輯。

優勢：

• 分享頁 UI 和互動完全由接入方控制。
• 可結合接入方自有業務能力，例如會員、優惠券、活動、分銷等。
• 與 SaaS 邀請海報展示邏輯解耦。

注意事項：

• 接入方需要自行維護完整分享體系。
• 開發和測試成本較高。
• 分享體驗是否與 SaaS 觀看頁一致，由接入方自行控制。

3.2 對接流程

graph TD
    A["分享发起观众点击接入方原生分享入口"] --> B["接入方小程序请求服务端生成小程序码"]
    B --> C["接入方服务端返回小程序码"]
    C --> D["接入方小程序展示自定义邀请海报"]
    D --> E["扫码访问者扫码进入接入方小程序"]

1. 接入方在小程式中透過 <web-view> 開啟 SaaS 觀看頁。
2. 接入方在 WebView 外層開發原生分享入口。
3. 分享發起觀眾點擊接入方原生分享入口。
4. 接入方小程式呼叫接入方服務端產生小程式碼。
5. 接入方小程式展示自訂邀請海報或分享彈窗。
6. 掃碼訪客掃碼進入接入方小程式。
7. 接入方小程式解析參數並完成溯源。

接入方需要完成：

• 設計小程式原生分享入口和分享頁。
• 開發邀請海報產生或展示能力。
• 準備服務端小程式碼產生能力。
• 設計掃碼落地頁和參數解析邏輯。
• 維護分享、儲存、掃碼回流和溯源鏈路。

4. 方案對比