自定义应用容器界面

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

接口定义

KIMWebAppViewControllerDelegate

方法	参数	返回值	说明
webAppViewController(_: configTitleView:)	• controller: KIMWebAppViewController 应用容器视图控制器。 • titleView: KIMNavigationTitleView 标题视图。	Void	配置应用容器导航栏标题视图。可实现该方法，通过 titleView 参数获取导航栏标题视图控件，对标题视图控件进行配置，如修改标题样式、添加左右侧按钮等。
webAppViewController(_: updateTitleView:)	• controller: KIMWebAppViewController 应用容器视图控制器。 • titleView: KIMNavigationTitleView 标题视图。	Void	更新导航栏标题视图。SDK内部有相关修改标题视图的逻辑，如更新标题展示等，当标题视图发生更新时会调用该代理方法，可通过实现该方法对 titleView 内部变化进行监听，以便对 titleView 进行必要的二次处理。
webAppViewController(_: willResetWebView:)	• controller: KIMWebAppViewController 应用容器视图控制器。 • oldWebView: WKWebView 即将被清理的webView。	Void	即将重置webView。触发应用重新启动时会调用该代理方法，可以实现该方法来对 webView 进行额外清理，如removeScriptMessageHandler移除注入的自定义ScriptMessageHandler。
webAppViewController(_: didSetUpWebView:)	• controller: KIMWebAppViewController 应用容器视图控制器。 • webView: WKWebView 当前显示的webView。	Void	完成设置webView。当webview设置完成后会调用该代理方法，可以实现该方法来对webview进行额外的自定义配置，如注入ScriptMessageHandler等。
webAppViewController(_: updateWebPopupMenus) -> [KIMWebAppMenuItem]	• controller: KIMWebAppViewController 应用容器视图控制器。 • menus: [KIMWebAppMenuItem] 默认展示的菜单按钮。	[KIMWebAppMenuItem] 要展示的菜单按钮。	通过实现此方法，可以自定义和更新应用容器弹出菜单项。 当应用容器需要展示弹出菜单时，该方法会被调用，可以根据需要更新和返回新的菜单项列表。 使用 KIMWebAppMenuItem 中的常量 ID 来判断当前默认的菜单项目类型。
webAppViewController(_: onClickedWebAppMenuItem)	• controller: KIMWebAppViewController 应用容器视图控制器。 • item: KIMWebAppMenuItem 点击的菜单项。	Void	通过实现此方法，可以处理应用容器菜单项的点击事件。 击应用容器菜单项时，该方法会被调用，根据点击的菜单项执行相应的操作。如果需要执行SDK内部默认点击行为，可以调用 defaultHandler 闭包实现。 通过 KIMWebAppMenuItem 中的常量 ID 可以判断内置的菜单项目类型。

自定义示例

自定义标题栏

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

效果展示

默认	自定义

代码示例

Swift

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

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

    func webAppViewController(_: KIMWebAppViewController, updateTitleView titleView: KIMNavigationTitleView) {
        // 拦截导航栏更新
        titleView.setTitle("自定义标题2")
        titleView.backgroundColor = .init(hex: "#582263")
        titleView.navigationBarConfiguration.titleColor = .kdColorWhite  
    }
}

配置WebView

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

代码示例

Swift

// 1. 继承自应用容器视图控制器。
class CustomWebAppViewController: KIMWebAppViewController { 

    // 2. 重写初始化方法，设置页面自定义协议代理。
    required init(appId: String) {
        super.init(appId: String)
        self.delegate = self
    }
}
 // 3.实现 KIMWebAppViewControllerDelegate 相关协议方法。
extension CustomWebAppViewController: KIMWebAppViewControllerDelegate {
    // 替换当前 webView 前调用
    func webAppViewController(_ controller: KIMWebAppViewController, willResetWebView oldWebView: WKWebView) {
        oldWebView.configuration.userContentController.removeScriptMessageHandler(forName: "your_jsapi")
    }
    
    // webView 设置完成
    func webAppViewController(_ controller: KIMWebAppViewController, didSetUpWebView webView: WKWebView) {
        webView.configuration.userContentController.add(scriptHandler, name: "your_jsapi")
    }
}

自定义底部弹出菜单

应用容器默认展示底部菜单项。可通过实现KIMWebAppViewControllerDelegate的 updateWebPopupMenus 、onClickedWebMenuItem 协议方法来自定义底部弹出菜单及其点击事件。

效果展示

默认	自定义

代码示例

Swift

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

// 3.实现 KIMWebAppViewControllerDelegate 相关协议方法。
extension CustmAppBottomDialogViewController: KIMWebAppViewControllerDelegate {
    /// 自定义底部菜单项。
    func webAppViewController(_: KIMWebAppViewController, updateWebPopupMenus menus: [KIMWebAppMenuItem]) -> [KIMWebAppMenuItem] {
        var menus = menus
        menus.removeAll(where: { $0.id == "Refresh" })
        menus.insert(
            .init(id: "custom_menu_1", icon: UIImage(named: "kso_chat_search"), label: "自定义"),
            at: 0
        )
        return menus
    }

    /// 自定义按钮事件处理。
    func webAppViewController(_ controller: KIMWebAppViewController, onClickedWebAppMenuItem item: KIMWebAppMenuItem, defaultHandler: @escaping () -> Void) {
        if item.id == "Refresh" {
            // 自定义刷新按钮处理
        } else if item.id == "custom_menu_1" {
            controller.toast(text: "点击了自定义菜单")
        } else {
            defaultHandler()
        }
    }
}

全局替换视图控制器

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

代码示例

Swift

KIM.workSpaceModule.webAppViewControllerType = CustomWebAppViewController.self