公司新闻

公司新闻

直播小程序弹幕不见了?同层渲染来看看!

发布时间: 2022-05-10 13:36        有 人围观

常州APP开发公司紫竹云科技分享】随着小程序生态的蓬勃发展,小程序逐渐成为获客营销的新渠道,直播业务也能够通过小程序触达用户。然而,直播小程序开发并不是一件容易的事情,例如直播小程序变成 “纯净模式”,即只看到直播页面,却无法看到弹幕、产品链接、购物车等信息。这个难题应该如何解决呢?经过技术检查,直播小程序 “纯净模式” 问题出现在对原生组件的层级应用,通过同层渲染的方法即可实现高效处理。

在内置组件中,有一类组件较为特殊,它们并不完全在 Exparser 的渲染体系下,而是由客户端原生参与组件的渲染,这类组件称为 「原生组件」,例如小程序中的 live-player、canvas、map 等都是原生组件。

 
引入原生组件主要有 3 个好处:
  1. 扩展 Web 的能力:例如输入框组件 input、textarea 有更好的控制键盘能力
  2. 减轻 WebView 的渲染工作:例如地图组件 map 这类较复杂的组件,其渲染工作不占用 WebView 线程,而交给更高效的客户端原生处理
  3. 绕过 setData、数据通信和重渲染流程,渲染性能更好:例如画布组件 canvas 可直接用一套丰富的绘图接口进行绘制
 
然而原生组件也存在一定的限制。由于原生组件脱离在 Webview 渲染流程外,因此其层级是最高的。页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上面。后插入的原生组件可以覆盖之前的原生组件。
 
例如下左图所示,非原生组件位于 WebView 层,而原生组件及 cover-view、cover-image 位于另一个较高的层级。所以 live-player 组件把其他业务组件都覆盖了,导致部分用户只能看到 “纯净模式”。明晰原理后,解决这个问题的方法就是需要把原生组件直接渲染到 WebView 层级上面,即通过微信团队制定的「同层渲染」解决方案实现层级合理安排。例如正如上右图所示,通过同层渲染,原生组件层已经不存在,原生组件被直接挂载到 WebView 节点上。