前端优化指南 - Webview容器与H5页面通讯
::: highlight red 💡
以下内容,不是必读,但是为了给予用户更优秀的交互体验,建议前端开发者认真阅读。
CaTalk的H5页面可以向前端APP的webview容器发送消息,前端APP可以根据这些消息做交互上的优化处理。
:::
用法概览
H5地址在提供给平台方后,webview嵌入H5地址时可以增加一些参数:
https://m.catalk.cc/b/{平台对应的ID}?comm_sw={0或者1}&kbd_sw={0或者1}&color_val={6位hex色值}
例如:https://m.catalk.cc/b/085412?comm_sw=1&kbd_sw=0&color_val=00ff1f
URL参数说明
名称 | 值 | 类型 | 说明 |
---|---|---|---|
comm_sw | "1" | "0" | string | H5是否与容器通信(1代表开启,0代表关闭,不传则默认0) |
kbd_sw | "1" | "0" | string | 键盘遮挡输入框兼容(1代表开启,0代表关闭,不传则默认0) |
color_val | 6位的hex色值 | string | H5首页主色(6位的hex色值,📢不用带#号,不传默认则ffdf00) |
Webview容器通信方式说明
::: tip
kbd_sw=1适用于需要解决APP底部导航栏与聊天页面底部输入区域在视觉上被遮盖等问题;
comm_sw=1时,H5页面点击按钮尝试打开新页面时不会有路由跳转行为,而是会主动向容器发出消息,通知APP来打开新页面,⬇️下文是H5默认发送消息给各种容器的方法。
:::
// ios
window?.webkit?.messageHandlers?.getMessenger?.postMessage(handledParams);
// android 容器侦听来自H5的消息 或 H5主动调容器定义的方法
window?.WebViewJavascriptBridge?.send(handledParams, () => {}); //如果不使用消息侦听,而是需要H5主动调用容器的方法传参,那么这里WebViewJavascriptBridge对象名称可以修改
// react native
window?.ReactNativeWebView?.postMessage(handledParams);
// iframe
window?.parent?.postMessage(handledParams, "*");
// web
window?.postMessage(handledParams, "*");
::: caution
开启comm_sw=1后,前端可以开始尝试侦听来自H5页面的消息。
如果出现容器接受不到消息的情况,需要双方手动对接,确认通信方案。
:::
消息体参数概览
{
ac: "load" | "back" | "enter" | "link";
val: string;
status: "ok" | "fail";
}
消息体参数说明
名称 | 值 | 类型 | 说明 |
---|---|---|---|
ac | "load" | "back" | "enter" | "link" | string | 参见下文说明 |
val | - | string | 不同action下对应不同值 |
status | "ok" | "fail" | string | 不同action的执行状态 |
load
{
ac: "load",
val: "",
status: "ok"
}
通知容器,H5成功加载。
enter
{
ac: "enter",
val: "一个全屏的webview页面所需的网页链接"
status: "ok"
}
通知容器,进入一个全屏的webview页面,以供渲染H5。
back
{
ac: "back",
val: "",
status: "ok"
}
通知容器,返回上一个webview页面。
link
{
ac: "link",
val: "一个需要跳出APP的网页链接"
status: "ok"
}
通知容器,需要跳转到外部浏览器,来处理对应的链接。
修改于 10 个月前