前端优化指南 - Webview容器与H5页面通讯

💡

以下内容，不是必读，但是为了给予用户更优秀的交互体验，建议前端开发者认真阅读。
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色值}

名称	值	类型	说明
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）

提示

kbd_sw=1适用于需要解决APP底部导航栏与聊天页面底部输入区域在视觉上被遮盖等问题；
comm_sw=1时，H5页面点击按钮尝试打开新页面时不会有路由跳转行为，而是会主动向容器发出消息，通知APP来打开新页面，⬇️下文是H5默认发送消息给各种容器的方法。

注意

开启comm_sw=1后，前端可以开始尝试侦听来自H5页面的消息。
如果出现容器接受不到消息的情况，需要双方手动对接，确认通信方案。

通知容器，H5成功加载。

通知容器，进入一个全屏的webview页面，以供渲染H5。

通知容器，返回上一个webview页面。

通知容器，需要跳转到外部浏览器，来处理对应的链接。