方案概述

• 功能：使用webview的方案，在App中實現視頻/直播的懸浮小窗播放效果，支持應用內小窗、系統小窗，在訂單頁小窗播放，回到直播間小窗消失
• 場景：適用於要在App中快速實現直播帶貨場景，或在App中需要點播視頻小窗播放的場景
• 支持環境：安卓、iOS、鴻蒙
• 前置條件：使用保利威的webview SDK Demo，對方案有任何疑問，可通過思否私信

一、安卓對接説明

1.1 集成簡介

1.1.1 項目架構圖

1.1.2 使用源碼項目集成

當前將提供的源碼包中的PolyvAndroidWebViewDemo、PLVWebViewSDK、PLVJsBridge、PLVFloatWindow四個項目放入到同一目錄下，然後使用編譯器打開PolyvAndroidWebViewDemo項目即可。

1.1.3 源碼集成注意事項

功能對接説明

參考 1.2 功能對接文檔

更換通信協議

如果需要更換web-native通信協議的情況時，可以參考提供的  1.3 更換web-native通信規則注意事項[](https://j9k9c2q2qc.feishu.cn/docx/U7D5dyO4NoXlSBxu0emchu5AnSD... "1.3 更換web-native通信規則注意事項")

1.2 功能對接文檔

1.2.1 功能設置

設置Url和 UA

在啓動PLVWebViewDemoActivity之前，我們需要設置加載的Url和添加上需要用到的Ua，這裏可以通過PLVWebViewConfig來進行設置，示例代碼如下：

PLVWebViewConfig config = new PLVWebViewConfig(); 
config.setUrl("需要加載的url") .setUa("需要添加的UA"); 
PLVWebViewDemoActivity.startWebViewDemoActivity(PLVURLInputActivity.this, config);

設置小窗邊框顏色

當前SDK支持設置小窗邊框顏色，通過PLVFloatWindowManager進行設置，示例代碼如下：

PLVFloatWindowManager.getInstance().setSolidColor(Color.RED);

1）設置小窗邊框厚度

當前SDK支持設置小窗邊框顏色，通過PLVFloatWindowManager進行設置，示例代碼如下：

PLVFloatWindowManager.getInstance().setSolidWidth(20);

2）設置自動開啓小窗功能

當進程退到後台時會自動喚出小窗(默認關閉)，通過PLVFloatWindowManager進行設置，示例代碼如下：

PLVWebViewConfig config = new PLVWebViewConfig(); 
config.setSupportAutoFloating(true); // 開啓自動開啓小窗功能 
PLVWebViewDemoActivity.startWebViewDemoActivity(PLVURLInputActivity.this, config);

3）使用系統/應用小窗

當前小窗支持系統小窗和應用窗(默認使用系統小窗)，如果開啓系統小窗需要請求小窗懸浮權限，而應用小窗不需要請求權限，注意應用小窗依賴於Activity，當Activity被銷燬時，應用小窗也會被關閉。

PLVWebViewConfig config = new PLVWebViewConfig(); 
config.isSystemFloatingWindow(true);// 為true時使用系統窗，false為使用應用小窗 
PLVWebViewDemoActivity.startWebViewDemoActivity(PLVURLInputActivity.this, config);

4）使用原生/web彈出請求權限窗

當前sdk支持通過原生或web端來彈出請求懸浮權限彈窗（默認使用原生彈窗方式）。

注意如果是選擇使用web端來彈窗請求懸浮權限彈窗，需要web端支持對應的事件。

PLVWebViewConfig config = new PLVWebViewConfig(); 
config.setUseWebRequestPermission(true);// 為true時web彈窗，false為使用原生彈窗 
PLVWebViewDemoActivity.startWebViewDemoActivity(PLVURLInputActivity.this, config);

1.2.2 監聽方法 js 事件

SDK內部已經定義了一部分與web端通信的js事件，這些通信事件可以在demo層中重寫某些方法進行監聽和攔截處理，這裏以監聽onShare事件進行為例：

public class PLVWebViewDemoActivity extends PLVWebViewBaseActivity { 
    @Override 
    public void onShare() { 
        // 監聽到onShare事件的處理 
        ... 
        super.onShare(); 
    } 
}

可以選擇需要監聽的js事件進行重寫實現對事件的監聽。

注意:這些js通信事件都是與webview關聯，開啓系統小窗後,即使Activity被銷燬依然能收到來自web端發送的消息，觸發這些方法，所以重寫這些方法時，儘量避免做與Activity生命週期關聯的操作

允許的監聽 js 事件

當前支持通過重寫方法來監聽事件；

有以下這些方法：

    /**
     * 點擊商品，將切換到小窗時會觸發該回調
     *
     * @param width   小窗的寬
     * @param height  小窗的高
     * @param newPage 是否打開新的一頁
     * @param link    打開新的一頁加載的url
     * @param data    其他更多數據，開發者可根據需要自定義實現邏輯，數據為json格式
     */
    void changeToWindowForProduct(int width, int height, boolean newPage, String link, String data);

    /**
     * 用户主動調用切換到小窗的方法，在切換前會觸發該回調
     *
     * @param width  小窗的寬
     * @param height 小窗的高
     */
    void changeToWindowForUser(int width, int height);

    /**
     * 點擊小窗區域，從小窗中恢復到頁面觸發該回調
     **/
    void changeToNormal();

    /**
     * 點擊小窗關閉按鈕，關閉小窗觸發該回調
     **/
    void closeWindow();

    /**
     * 點擊返回事件
     */
    void onGobackPressed();

    /**
     * 橫置屏幕事件
     */
    void onLandScreen();

    /**
     * 豎直屏幕事件
     */
    void onPortraitScreen();

    /**
     * 分享事件
     */
    void onShare();

    /**
     * 收藏事件
     */
    void onCollect();

    /**
     * 隱藏狀態欄，進入沉浸模式
     */
    void hideNavigationBar();

    /**
     * 顯示狀態欄，退出沉浸模式
     */
    void showNavigationBar();

    /**
     * 打開懸浮窗權限頁面
     */
    void requestFloatWindowPermissionByWeb();

    /**
     * 發送當前小窗的打開狀態給前端
     */
    void getFloatWindowStatus();

    /**
     * 獲取當前的網路狀態
     */
    void getCurrentNetworkStatus();

    /**
     * 設置是否開啓自動懸浮窗權限
     * @param enable true為打開，false為甘比
     */
    void setEnableBackground(boolean enable);

    /**
     * 獲取是否開啓了自動懸浮窗的權限
     */
    void getEnableBackground();

    /**
     * 處理其他event
     */
    void handleOtherEvent(String event);

1.2.3 註冊新的 js 通信事件

SDK支持註冊自定義js事件，可以通過下面的方式來註冊自定義js事件，示例代碼如下：

@Override
protected void initHandleForDemo() {
    //監聽來自web端發送事件
   floatableLayout.getWebView().registerHandler("監聽事件", new BridgeHandler() {
        @Override
        public void handler(String s, CallBackFunction callBackFunction) {}
    });
    
    //向web端發送對應事件和消息
   floatableLayout.getWebView().callHandler("發送事件", "發送消息", new CallBackFunction() {
        @Override
        public void onCallBack(String s
        }
    });
}

注意：註冊新的js事件時不僅需要原生端做相應的操作，還需要web端有註冊對應的事件，否則是原生端是不會接收到對應的事件消息

1.3 更換web-native通信規則注意事項

1.3.1 説明

當前SDK內部是通過Jsbridge該庫來實現web端與原生端的通信，Jsbridge中定義了web端與原生的通信規則，如果集成項目是沒有制定指定的web-native通信規則，那麼可以直接使用SDK的通信規則即可，無需其餘改動。

如果集成項目中有定製指定的web-native通信規則，可以參考下面的方式進行修改。

無論是使用哪一種通信規則，關鍵在於原生端發送/接收web端消息，web端發送/接收原生端消息，所以當需要更換SDK內部的web-native通信規則僅關注上述的兩點即可。

1.3.2 更換native端通信規則

因為sdk內部是依賴於jsbridge該模塊實現web-native通信，當需要更換通信規則時，可以選擇不依賴該模塊。

1.3.3 更改PLVBaseWebView繼承類

public class PLVBaseWebView extends BridgeWebView {
    ....
}

可將PLVBaseWebView繼承的BridgeWebView更換為集成項目中指定通信規則的webview。

1.3.4 更改WebViewClient

WebViewClient是實現原生端接收web端消息的關鍵，也是定製修改webview的核心部份，所以在更換通信規則時也需要更換WebViewClient

//替換自己需要用到的WebViewClient 
webView.setWebViewClient(webviewClient);

可以通過setWebViewClient(new WebViewClient() 方法為webview設置指定WebViewclient。

1.3.5 更改原生端發送/接收web端消息的方法

1. 更換髮送消息方式

<!---->

public void callMessage(String type, String message) {
    //當使用的新的web-native規則時，可以將下面的代碼修改為webview使用新規則發送消息時的代碼
    webview.callHandler(type, message, new CallBackFunction() {
        @Override
        public void onCallBack(String s) {
          ...
        }
    });
}

當前SDK內部時通過webview.callHandler()方法來實現消息的發送，當更換新的通信規則時，可以將這個webview.callHandler()方法替換為新規則中對應原生端發送消息的方法。

2. 更換接收web端消息

<!---->

webview.registerHandler("xxx", new BridgeHandler() {
    @Override
    public void handler(String s, CallBackFunction callBackFunction) {
        ...    
    }
});

當前SDK內部是通過 webview.registerHandler()方法來監聽web端發送的消息，當更換新的通信規則時，可以將這個webview.registerHandler()方法替換為新規則中對應原生端接收web消息的方法。

1.3.6 更換web端通信規則

web-native通信規則是由web端和原生端兩端定製的，所以當更換web-native通信規則不僅需要原生端更換，web端也需要進行更換。

注意事項

當前需要通信的 web頁面 與 更換通信規則後的原生端 所使用的通信規則是否是對應，如果是對應的情況下無需做其他更替。

如果需要通信的web頁面與 更換通信規則後的原生端 所使用的不對應，那麼就需要去更替web端的通信規則。

如web端頁面需要使用保利威的web頁面（當前保利威web頁面與sdk內部所使用的通信規則一致，當原生端切換通信規則，那麼web端頁面也需要更換對應通信規則）

1.3.7 更換web端發送/接收方法

1.更改web端發送消息方式

 window.bridge.callHandler(
                'callAppEvent', message,
                function(responseData) {
                   //發送消息
                    ....
                }
            );

當前SDK內部與Web端對應的通信規則是通過bridge.callHandler()方法來進行發送消息，當替換新的通信規則後，可以使用新的發送方式來取代這個bridge.callHandler()方法

2.更改web端接收消息方式

// 監聽來自xxx事件的消息
bridge.registerHandler("xxx", function(data, responseCallback) {
                document.getElementById("show").innerHTML = (data);
});

當前SDK內部與Web端對應的通信規則是通過bridge.registerHandler()方法來接收消息，當替換新的通信規則後，可以使用新的發送方式來取代這個bridge.registerHandler()方法

二、iOS對接説明

2.1 集成簡介

2.1.1 項目架構圖

2.1.2 運行環境要求

2.1.3 API文檔

詳細接口文檔請參見 API文檔

2.2 快速集成

2.2.1 項目配置

配置支持系統版本

打開項目的 PROJECT - Deployment Target - iOS Deployment Target 改為 9.0 或更高。

打開項目的 TARGETS - General - Deployment Info，把 iOS 系統改為 9.0 或更高。

2.2.2 配置 App Transport Security (ATS)

打開項目的 info.plist 文件，添加如下內容：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSAllowsArbitraryLoadsInWebContent</key>
    <true/>
</dict>

2.2.3 配置設備旋轉

播放器支持全屏播放，需要在 TARGETS - General - Deployment Info 中，勾選支持的橫屏旋轉方向。

2.2.4 配置後台播放和畫中畫

打開項目的 TARGETS - Signings & Capabilities，點擊 + Capability，選擇 Background Modes，勾選 ‘Audio, AirPlay, and Picture in Picture’。

2.3 集成 SDK

2.3.1 Pod方式集成

集成PLVWebViewSDK

在 Podfile 文件中，添加以下內容：

pod 'PLVWebViewSDK', '~> 1.0.0'

在終端執行 pod install

集成系統小窗

如果需要使用系統小窗功能，則需要在 Podfile 文件中另外添加以下內容

# 包含系統畫中畫 -- 如果不使用系統小窗 則不需要下面配置
pod 'PLVAliHttpDNS', '~>1.10.0'
pod 'PLVFoundationSDK', '1.10.6', :subspecs => ['BaseUtils', 'NetworkUtils', 'ErrorCode', 'LogReporter', 'ConsoleLogger', 'Reachability', 'SafeModel', 'ProgressHUD']
pod 'PLVBusinessSDK', '1.10.4', :subspecs => ['BaseBSH']
pod 'PLVLiveScenesSDK', '1.10.6', :subspecs => ['Base', 'LogReporter', 'ConsoleLogger', 'ErrorManager', 'Network', 'Player', 'BasePlayer', 'LivePlayer', 'LivePlaybackPlayer', 'PictureInPicture']

並在終端執行 pod install，並且將對應的 PLVLiveScenesSDK、PLVBusinessSDK 進行替換。

2.3.2 離線包方式集成

集成PLVWebViewSDK

將 PLVWebViewSDK.framework 庫添加到自己的項目中。如果是使用源碼的方式集成，則需要將 PLVWebViewSDK 文件整個添加到自己的項目即可。

集成系統小窗

1.如果項目使用系統小窗功能則需要將以下庫添加到項目中

PLVAliHttpDNS、PLVBusinessSDK、PLVFoundationSDK、PLVIJKPlayer、PLVLiveScenesSDK

2.在General => Frameworks，Libraries，and Embedded Content中移除已添加的 PLVFoundationSDK.framework、PLVLiveScenesSDK.framework、PLVBusinessSDK.framework 庫，並添加系統庫 libresolv.tbd。

3.設置PLVIJKPlayer為Embed & Sign

4.Build Settings，Other Linker Flags中添加 -ObjC，如果項目已配置有，則不需要重複添加

5.運行報錯

如果模擬器運行報錯需要在Build Settings 中設置Excluded Architecture => Any iOS Simulator SDK 為 arm64

如果運行報錯

Building for iOS Simulator, but the linked and embedded framework '***' was built for iOS + tvOS Simulator

可在Build Settings 中 設置 VALIDATE\_WORKSPACE 為 YES即可。

2.4 WebView接入

創建想要展示 WebView 的控制器頁面 DemoViewController 繼承於PLVWebViewBaseViewController，並通過初始化方法 -initWithConfig:創建控制器頁面。示例代碼如下：

// PLVWebViewDemoViewController.h

#import <PLVWebViewSDK/PLVWebViewSDK.h>

@interface PLVWebViewDemoViewController : PLVWebViewBaseViewController

@end

初始化時可通過重寫 initHandleForDemo 進行自定義配置，同時可以對Bridge事件進行自定義處理。示例代碼如下：

// PLVWebViewDemoViewController.m
    
@implementation PLVWebViewDemoViewController

#pragma mark - [ Override ]

- (void)viewDidLoad {
    [super viewDidLoad];
 
}

/// 初始化時，可以進行的自定義配置
//- (void)initHandleForDemo {
//
//}

#pragma mark - [ Delegate ]
#pragma mark PLVFloatableWebViewBridgeDelegate
/// 如需要監聽 js 回調事件，可以通過Delegate事件進行相應的處理，例如webviewBridgeShare消息
//- (void)webviewBridgeShare:(PLVFloatableWebViewBridge *)bridge {
//
//}

@end

創建、配置、打開直播頁面控制器

PLVWebViewConfig *config = [[PLVWebViewConfig alloc] init];
config.urlString = urlString;
config.allowFloatingWindow = YES;
config.isSystemFloatingWindow = NO;
config.userAgent = self.uaTextView.text;
config.enableAutoFloatWindow = YES;
    
PLVWebViewDemoViewController *webVC = [[PLVWebViewDemoViewController alloc] initWithConfig:config];
[self.navigationController pushViewController:webVC animated:YES];

2.5 高級功能

2.5.1 WebView 配置

創建 PLVWebViewBaseViewController 時需要根據 PLVWebViewConfig 配置來進行初始化。

PLVWebViewConfig *config = [[PLVWebViewConfig alloc] init];
config.urlString = @"";
config.allowFloatingWindow = YES;
config.isSystemFloatingWindow = NO;
config.userAgent = @"";
config.enableAutoFloatWindow = YES;    
PLVWebViewDemoViewController *floatingWebVC = [[PLVWebViewDemoViewController alloc] initWithConfig:config];

• allowFloatingWindow 是否允許使用浮窗的功能
• isSystemFloatingWindow 使用系統小窗或者應用內小窗
• userAgent 瀏覽器的UA，可自行修改
• enableAutoFloatWindow 開啓自動浮窗，開啓後 在退出頁面或者退到後台時會自動開啓小窗

2.5.2 應用內小窗配置

我們還可以對浮窗的大小、默認位置、以及樣式進行配置修改：

// 配置浮窗大小
[[PLVFloatWindowManager sharedManager] setFloatingWindowSize:size];
// 配置浮窗初始位置
[[PLVFloatWindowManager sharedManager] setFloatingWindowLocation:point];
// 應用內小窗樣式修改
UIView *appWindowView = [PLVFloatWindowManager sharedManager].floatingWindow;
appWindowView.layer.cornerRadius = 8.0f;
appWindowView.layer.masksToBounds = YES;

其中，調用 -moveContentViewToWindow:size: 方法主動喚起的浮窗，默認寬度為屏幕的0.3倍，寬高比16:9。通過保利威的網頁喚起浮窗，浮窗大小由網頁告知。初始位置是指浮窗右下角距離屏幕右下角的相對位置，默認為(-10, -100)， 表示懸浮窗右邊沿距離屏幕右邊沿10pt，下邊沿距離屏幕下邊沿100pt。

2.5.3 畫中畫配置

1. 如果要使用畫中畫功能，首先需要在 Podfile 文件中 添加支持畫中畫的SDK，然後執行 pod install；

   # 包含系統畫中畫 -- 如果不使用系統小窗 則不需要下面配置
   pod 'PLVAliHttpDNS', '~>1.10.0'
   pod 'PLVFoundationSDK', '1.10.6', :subspecs => ['BaseUtils', 'NetworkUtils', 'ErrorCode', 'LogReporter', 'ConsoleLogger', 'Reachability', 'SafeModel', 'ProgressHUD']
   pod 'PLVBusinessSDK', '1.10.4', :subspecs => ['BaseBSH']
   pod 'PLVLiveScenesSDK', '1.10.6', :subspecs => ['Base', 'LogReporter', 'ConsoleLogger', 'ErrorManager', 'Network', 'Player', 'BasePlayer', 'LivePlayer', 'LivePlaybackPlayer', 'PictureInPicture']
   
   

2. 替換對應的離線包

用提供的離線包PLVLiveScenesSDK、PLVBusinessSDK 將 Pods 文件夾下對應的SDK進行替換。

2.5.4 UA 和白名單配置

當開啓了 enabelWhiteList 後，只有添加了域名白名單的鏈接才會支持原生與前端的通信，才支持小窗的功能。

[PLVUAConfigManager sharedManager].enabelWhiteList = YES;
[[PLVUAConfigManager sharedManager] addHostWhitelist:@[@"live.polyv.cn"]];

同時支持 自定義配置 UA

[[PLVUAConfigManager sharedManager] addCustomUserAgent:@""];

2.5.5 監聽方法 js 事件

在SDK內部已經對一些事件進行了處理，如果想要自定義處理某些事件可以在demo中進行監聽攔截處理。示例如下：

#pragma mark - [ Delegate ]
#pragma mark PLVFloatableWebViewBridgeDelegate
/// 如需要監聽 js 回調事件，可以通過Delegate事件進行相應的處理，例如webviewBridgeShare消息
- (void)webviewBridgeShare:(PLVFloatableWebViewBridge *)bridge {

}

2.5.6 註冊和調用自定 js 事件

可以通過Demo層註冊和調用自定義事件，示例代碼如下：

- (void)initHandleForDemo {
    [self.contentAreaView.mainWebView.bridge registerHandler:@"" handler:^(id  _Nonnull data, PLVWVJBResponseCallback  _Nonnull responseCallback) {
            
    }];
    [self.contentAreaView.mainWebView.bridge callHandler:@"" data:nil responseCallback:^(id  _Nonnull responseData) {
        
    }];
}

2 .6 更換web-native通信規則注意事項

本項目中使用的是開源庫 WebViewJavascriptBridge 來實現web 和 native之間的通信。如果接入的項目中沒有用到web-native通信，則不需要做任何調整。如果接入的項目中也用到web-native通信，則可以參考下面的方式進行修改。

2.6.1 更換native端通信規則

SDK中使用的 WebViewJavascriptBridge 來實現通信的，在 PLVFloatableWebViewBridge 中對其進行了封裝處理，如果需要更換native端通信規則只需要修改 PLVFloatableWebViewBridge 這個類即可

更換註冊消息方式:

- (void)registerHandler:(NSString*)handlerName handler:(WVJBHandler)handler {
      //當使用的新的web-native規則時，可以將下面的代碼修改為webview使用新規則註冊消息時的代碼
    [self.bridge registerHandler:handlerName handler:handler];
}

更換髮送web端消息

- (void)callHandler:(NSString*)handlerName data:(id _Nullable)data responseCallback:(WVJBResponseCallback _Nullable)responseCallback {
      //當使用的新的web-native規則時，可以將下面的代碼修改為webview使用新規則發送消息時的代碼
    [self.bridge callHandler:handlerName data:data responseCallback:responseCallback];
}

2.6.2 更換web端通信規則

當native端通信規則改變時，web端則要根據是否與原來的通信方式原理相同來判斷是否需要修改。

當前web端註冊消息方式

bridge.registerHandler("testJavascriptHandler",
          function (data, responseCallback) {
            console.log(data);
            responseCallback(data);
          }
 );

當前web端發送消息方式

bridge.callHandler("callAppEvent", { },
          function responseCallback(responseData) {
            console.log(responseData);
          }
);

當前web-native的通信是通過 bridge 這種方式來發送和接收消息的，如果需要調整可用集成項目web端接收、發送消息的方式來進行替換。

2.7 iOS 系統版本使用系統小窗功能説明

iOS因為系統限制想實現系統小窗只能通過畫中畫的功能，同時這個功能會有版本限制，在iOS14+開始支持iPhone的畫中畫功能。同時直播如果使用系統播放器 AVPlayer 會有14s+的高延遲，IJKPlayer可以實現低延遲，但是iOS15以上畫中畫才支持SampleBufferLayer，因此如果直播低延遲的話需要iOS15+。

• 回放視頻系統小窗支持iOS14+
• 直播視頻系統小窗支持iOS15+

三、鴻蒙next

3.1 簡介

PLVWebSDK 項目從屬於易方信息科技股份有限公司，對保利威雲直播、雲點播系列產品的直播、回放觀看做了良好的適配，極大優化了用户的觀看體驗，並支持浮窗播放等擴展功能，也可作為其他網頁的展示容器。

本項目包含功能如下：

• 支持基礎Web功能
• 支持應用內浮窗播放
• 支持系統級浮窗播放
• 支持懸浮窗手勢拖動
• 支持視頻全屏播放

3.2 下載安裝

ohpm install plvwebsdk

OpenHarmony ohpm 環境配置等更多內容，請參考如何安裝 OpenHarmony ohpm 包

3.3 需要權限

ohos.permission.INTERNET
ohos.permission.GET_NETWORK_INFO

3.4 使用示例

3.4.1 綁定WindowStage

首先需要在Ability中為PLVWebViewWindowManager綁定用到windowStage

 onWindowStageCreate(windowStage: window.WindowStage): void {// Main window is created, set main page for this abilityPLVLogger.info(TAG, 'Ability onWindowStageCreate');// demo核心代碼PLVWebViewWindowManager.setWindowStage(windowStage)
    windowStage.loadContent(CONTENT, new LocalStorage(), (err, data) => {if (err.code) {PLVLogger.info(TAG, 'Failed to load the content. Cause: ' + JSON.stringify(err) ?? '');
        return;
      }PLVLogger.info(TAG, 'Succeeded in loading the content. Data: ' + JSON.stringify(data) ?? '');
    });
  }

3.4.2 使用PLVWeb組件

@Entry@Component
struct PLVWebPage {@StorageLink('inputWebConfig') config: PLVWebViewConfig = new PLVWebViewConfig().setUrl("")@State controller: PLVWebController = new PLVWebController({ config: this.config!! })
  aboutToAppear(): void {this.controller.registerHandler("自定義事件", (data: string) => {// 監聽自定義事件的處理
    })this.controller.callHandle("發送原生事件", "xxx", () => {//發送原生事件
    })this.controller.registerCustomerContainEvent({
      onShare: () => {// 監聽到onShare事件時的操作return true // return true表示攔截掉分享事件 false就繼續由sdk往下執行
      }
    })
  }
  build() {
    Column() {
      PLVWeb({ controller: this.controller })
    }
    .width(PLVCommonConstants.FULL_PERCENT)
  }
  onBackPress(): boolean | void {if (this.controller.accessBackward()) {this.controller.backward()return true
    }return false
  }
}

注意該組件需要放在一個單獨的pages頁面中，因為創建的Web窗口需要一個單獨page頁面

3.4.3 Demo使用

@Entry(storage)
@Component
struct PLVInputPage {
  inputUrl: string = 'https://www.polyv.net'
  config: PLVWebViewConfig = new PLVWebViewConfig().setUa("Android" + PLVUAConfig.defaultUA)
    .setUrl(this.inputUrl)
    .setAllowFloatingWindow(true)

  build() {
    Stack({ alignContent: Alignment.Top }) {
        ...
        Button("打開Web")
          .margin(24)
          .onClick(() => {
            if (!PLVWebViewWindowManager?.getWebViewWindow()) {
              this.config.setUrl(this.inputUrl)AppStorage.setOrCreate('inputWebConfig', this.config);
              // 為webWindow綁定一個page頁面，用於窗口的顯示// true表示初始化後立刻打開webWindow
              PLVWebViewWindowManager?.initWindow(true, "pages/PLVWebPage")
              return
            }
          })
      }
        ....
  }
}

為PLVWebViewWindowManager綁定了WindowStage後，可以通過PLVWebViewWindowManager?.initWindow(true, "pages/PLVWebPage") 來進行初始化化，如果傳入參數true時，當初始化後立刻展示WebWindow，也可以選擇傳入false，初始化後不立刻展示WebWindow 再通過PLVWebViewWindowManager.showWebViewWindow()來進行展示

3.5 功能説明

3.5.1 PLVWebViewConfig

1.設置UA

當前可以通過下面的方式來設置需要的UA

PLVWebViewConfig().setUa("Android" + PLVUAConfig.defaultUA)

注意：如果需要到Saas頁面的小窗功能的情況，必須在UA中帶上Android和PLVUAConfig.defaultUA字段

2.設置url

可以通過下面的方式來設置需要加載的url

PLVWebViewConfig().setUrl("需要加載的url")

3.設置是否允許小窗懸浮

可以通過下面的方式來設置是否允許開啓小窗功能，默認是開啓的，如不需要可以設置為false

PLVWebViewConfig().setAllowFloatingWindow(true)

3.5.2 自定義註冊事件

當前SDK內部已經註冊好與前端頁面通信的事件，當接入sdk後就能直接使用這些事件。

SDK也支持註冊自定義事件，可以通過下面的方式來進行註冊

this.controller.registerHandler("自定義事件", (data: string) => {// 監聽自定義事件的處理
})
this.controller.callHandle("發送原生事件", "xxx", () => {//發送原生事件
})

如果需要監聽/攔截SDK內部已經實現了的事件，可以通過下面的方式繼續監聽/攔截，這裏以onShare事件為例子，如果需要監聽/攔截其他事件可以仿照這裏來完成

this.controller.registerCustomerContainEvent({
  onShare: () => {// 監聽到onShare事件時的操作return true // return true表示攔截掉分享事件 false就繼續由sdk往下執行
  }
})

四、自定義事件

// 小窗播放事件
webviewBridage?.sendData('clickProduct', webviewData);

// 沒有小窗播放的情況： 監聽自定義事件
webviewBridage?.sendData('clickProductCustom', webviewData);

// 數據格式
const webviewData = {
        width: plvWebviewDataSize.width,
        height: plvWebviewDataSize.height,
        newPage: true,
        link:  “跳轉的自定義 url”,
        data: {
                type : out | inner | stock
                link : “跳轉的自定義 url” ( 同上 link )
                market : ‘5053’,
                code : 789465,
                name : 名稱
        },
}

out 外部
inner 內部
stock 基金 

clickProduct事件 和 clickProductCustom自定義 webviewData ---> data 下面根據 type 和 其他參數完成 app 內鏈接跳轉功能