Skip to content

自定义网页容器界面

协作中台SDK 支持网页容器界面的自定义。可以通过实现自定义协议方式来对网页容器进行自定义。

协议方式

可以通过实现网页容器自定义扩展接口来完成应用容器界面的自定义,自定义接口定义在KIMExpBrowserPage 中。

接口定义

KIMExpPageBrowserPage :

方法参数返回值说明
onWebViewSetup• webView: KWebView
WebView视图。
Unit完成设置webView。当webview设置完成后会调用该代理方法,你可以实现该方法来对webview进行额外的自定义配置,如注入JavaScriptInterface等。
updateBrowserPopupMenus• fragment: KIMBrowserFragment
应用容器Fragment。
• menus: MutableList<KIMBrowserMenuItem>
网页容器底部弹出面板默认数据源。
Unit更新网页容器底部弹出面板数据源。弹窗面板界面数据刷新时会调用该方法,可实现该方法对弹窗面板数据进行二次加工,items 为弹窗面板列表默认数据,可基于默认 items 进行改造,如修改排序、插入、删除元素,返回新的 KIMBrowserMenuItem 数组。
onClickedBrowserMenuItemfragment: KIMBrowserFragment
应用容器Fragment。
item: KIMBrowserMenuItem
被点击的item。
defaultHandler: () -> Unit
默认点击处理,调用该闭包执行SDK内部默认点击行为。
Unit网页容器底部弹出面板item点击事件拦截。每当用户点击网页菜单项时,该方法会被调用,允许您根据点击的菜单项执行相应的操作。如果需要执行SDK内部默认点击行为,可以调用 defaultHandler 闭包实现。

自定义示例

配置WebView

可通过实现KIMExpBrowserPage 协议方法来配置WebView,如注入自定义JSAPI。

代码示例
kotlin
class CustomPageBrowser : KIMExpBrowserPage() {
        override fun onWebViewSetup(webView: KWebView) {
            webView.addJavascriptInterface(CustomJsapi(), "customJsapi")
        }
    }

    private class CustomJsapi {
        @JavascriptInterface
        fun test() {
            Toast.makeText(getContext(), "Test", Toast.LENGTH_SHORT).show()
        }
    }

配置底部弹出菜单

网页容器底部弹出菜单默认包含了“刷新”、“分享”、“复制链接”、“浏览器打开”,“收藏”。可通过实现KIMExpBrowserPage 协议方法来添加/删除/修改菜单项或拦截点击事件

效果展示
默认自定义
代码示例
kotlin
class CustomWebContainerBottomMenu : KIMExpBrowserPage() {

    override fun updateBrowserPopupMenus(
        fragment: KIMBrowserFragment,
        menus: MutableList<KIMBrowserMenuItem>
    ): MutableList<KIMBrowserMenuItem> {
        // 移除菜单第一项
        menus.removeAt(0)
        // 新增菜单item
        menus.add(0, KIMBrowserMenuItem("Custom", R.drawable.ic_web_container_menu_right_custom1, R.string.custom))
        return menus
    }

    override fun onClickedBrowserMenuItem(
        fragment: KIMBrowserFragment,
        item: KIMBrowserMenuItem,
        defaultHandler: () -> Unit
    ) {
        when (item.id) {
            "Custom" -> {
                //拦截新增菜单item点击事件
                WToastUtil.show("自定义按钮被点击")
            }
            else -> {
                defaultHandler.invoke()
            }
        }
    }
}

注册自定义实现

实现了应用容器自定义相关接口后,可通过以下方式注册自定义实现,达到替换SDK默认实现的效果。

代码示例

  1. 实现KIMSdkApplication,并注册自定义实现:
kotlin
class AppWorkspaceApplication : KIMSdkApplication() {
    override fun confMeatsOnBone(): KConf<Meat> {
        return kConfOf(
            // 注册自定义应用扩展接口
            KIMExpBrowserPage::class.java confTo CustomWebContainerBottomMenu::class.java
            ...
        )
    }
}
  1. AndroidManifest中声明:
Xml
<meta-data
   android:name="{your-package-name}.AppWorkspaceApplication"
   android:value="@string/kim_sdk_application" />

至此,完成了自定义网页容器的注册。