自定义网页容器界面

协作中台SDK支持自定义网页容器界面，可以通过设置网页容器界面视图控制器的页面代理并实现相关协议方法来完成网页容器界面的自定义，自定义协议定义在 KIMWebViewControllerDelegate 中。

接口定义

KIMWebViewControllerDelegate：

方法	参数	返回值	说明
webViewController(_:configTitleView:)	• controller: KIMWebViewController 网页容器视图控制器。 • titleView: KIMNavigationTitleView 标题视图。	Void	配置网页容器导航栏标题视图。可实现该方法，通过 titleView 参数获取导航栏标题视图控件，对标题视图控件进行配置，如修改标题样式、添加左右侧按钮等。
webViewController(_:updateTitleView:)	• controller: KIMWebViewController 网页容器视图控制器。 • titleView: KIMNavigationTitleView 标题视图。	Void	更新导航栏标题视图。SDK内部有相关修改标题视图的逻辑，如更新标题展示等，当标题视图发生更新时会调用该代理方法，可通过实现该方法对 titleView 内部变化进行监听，以便对 titleView 进行必要的二次处理。
webViewController(_:updateWebPopupMenus:)	• controller: KIMWebViewController 网页容器页面视图控制器。 • menus: [KIMWebViewMenuItem] 默认展示的菜单按钮。	Void	通过实现此方法，您可以自定义网页底部的菜单项。当网页菜单项显示时，该方法会被动态调用，允许您根据当前网页的 URL 返回需要展示的菜单项。返回的菜单项 ID 必须具有唯一性。 您可以使用 KIMWebViewMenuItem 中的常量 ID 来判断当前默认的菜单项目类型。
webViewController(_:onClickedWebMenuItem:)	• controller: KIMWebViewController 网页容器页面视图控制器。 • item: KIMWebViewMenuItem 点击的菜单项。 • defaultHandler: @escaping () -> Void 默认实现，调用者可自行处理是否调用。	[KIMWebViewMenuItem] 要展示的菜单按钮。	通过实现此方法，您可以自定义处理网页菜单项的点击事件。 当点击网页菜单项时，该方法会被调用，允许您根据点击的菜单项执行相应的操作。如果需要执行SDK内部默认点击行为，可以调用 defaultHandler 闭包实现。
webViewController(_:didSetUpWebView:)	• controller: KIMWebViewController 网页容器页面视图控制器。 • webView: WKWebView 当前显示的webView。	Void	完成设置webView。当webview设置完成后会调用该代理方法，你可以实现该方法来对webview进行额外的自定义配置，如注入ScriptMessageHandler等。

自定义示例

自定义标题栏

网页容器标题栏默认展示了标题及右侧按钮。可通过实现KIMWebViewControllerDelegate的 configTitleView 协议方法来自定义标题栏的展示及点击事件。

效果展示

默认	自定义

代码示例

Swift

// 1. 继承自网页容器视图控制器。
class CustomWebViewController: KIMWebViewController {
    // 2. 重写初始化方法，设置页面自定义协议代理。
    required init(urlString: String) {
        super.init(urlString: urlString)
        self.delegate = self
    }
}

// 3.实现 KIMWebViewControllerDelegate 相关协议方法。
extension CustomWebViewController: KIMWebViewControllerDelegate {
    func webViewController(_: KIMWebViewController, configTitleView titleView: KIMNavigationTitleView) {
        // 自定义标题
        titleView.setTitle("自定义标题栏") 
        /// 配置导航栏
        titleView.setRightItems([rightButton1, rightButton2])
    }

    func webViewController(_: KIMWebViewController, updateTitleView titleView: KIMNavigationTitleView) {
        /// 拦截导航栏更新，SDK内部默认行为可能会导致标题栏更新，可以通过拦截覆盖默认行为。
        titleView.setTitle("自定义标题栏") 
     }
}

配置WebView

可通过实现KIMWebViewControllerDelegate 的didSetUpWebView协议方法来配置WebView，如注入自定义JSAPI。

代码示例

Swift

// 1. 继承自网页容器视图控制器。
class CustomWebViewController: KIMWebViewController { 

    // 2. 重写初始化方法，设置页面自定义协议代理。
    required init(urlString: String) {
        super.init(urlString: urlString)
        self.delegate = self
    }
}
 // 3.实现 KIMWebViewControllerDelegate 相关协议方法。
extension CustomWebViewController: KIMWebViewControllerDelegate {
    // webView 设置完成
    func webViewController(_ controller: KIMWebViewController, didSetUpWebView webView: WKWebView) {
        webView.configuration.userContentController.add(scriptHandler, name: "your_jsapi")
    }
}

自定义底部弹出按钮

网页容器底部菜单默认展示了一系列操作按钮，可通过实现KIMWebViewControllerDelegate的updateWebPopupMenus等协议方法来自定义菜单项的展示及点击事件。

效果展示

默认	自定义

代码示例

Swift

// 1. 继承自网页容器视图控制器。
class CustomWebViewController: KIMWebViewController {
     // 2. 重写初始化方法，设置页面自定义协议代理。
    required init(urlString: String) {
        super.init(urlString: urlString)
        self.delegate = self
    }
}

// 3.实现 KIMWebViewControllerDelegate 相关协议方法。
extension CustomWebViewController: KIMWebViewControllerDelegate {
    var customMenuItemID: String { "CustomMenuItemID" }

    func webViewController(_: KIMWebViewController, updateWebPopupMenus menus: [KIMWebViewMenuItem]) -> [KIMWebViewMenuItem] {
        var menus = menus
        menus.removeAll(where: { $0.id == KIMWebViewMenuItem.refresh })
        menus.insert(
            .init(id: customMenuItemID, icon: UIImage(named: "demo_custom_button"), label: I18n.custom("")), // 自定义
            at: 0
        )
        return menus
    }

    func webViewController(_ controller: KIMWebViewController, onClickedWebMenuItem item: KIMWebViewMenuItem, defaultHandler: @escaping () -> Void) {
        if item.id == KIMWebViewMenuItem.refresh {
            // 自定义刷新按钮处理
        } else if item.id == customMenuItemID {
            // 自定义按钮处理
            controller.toast(text: I18n.customButtonClicked) // 自定义按钮被点击
        } else {
            defaultHandler()
        }
    }
}

全局替换视图控制器

如果子类化网页容器视图控制器后，希望SDK内部入口在初始化网页容器页面时都使用子类类型，可以通过设置网页容器视图控制器的子类类型webViewControllerType来达到效果。

代码示例

Swift

KIM.workSpaceModule.webViewControllerType = CustomWebViewController.self