小程序框架同层渲染,你知道吗?(iOS 版)

70 阅读1分钟
image.png

目的

使用原生组件时,解决以下三个问题:

  1. web 组件无法覆盖原生组件
  2. 原生组件不支持部分 css 属性
  3. 原生组件不跟随 web 容器滚动

原理

创建一个 DOM 节点,设置它的 css 属性 overflow: scroll,此时原生侧的 WKWebview 会为这个 DOM 组件生成一个 WKChildScrollView。把这个 WKChildScrollView 挂载到 webview 容器中,并处理点击事件

挂载:就是用 addSubview 函数把 WKChildScrollView 添加给 Webview 容器

为了解决这个问题,你们还做过哪些尝试?

  1. cover-view:只针对层级问题,在原生渲染层增加对应的原生组件,根据「后添加的 View 会覆盖前 View」,实现覆盖原生组件。局限性是
  2. 挖洞:也只解决了层级问题,把 webview 设置为顶级,然后再原生组件对应的地方渲染成空白,露出底层的原生组件

参考资料

  1. Demo 地址
  2. demo 的介绍文章
  3. 微信文档:同层渲染原理
  4. 百度文章:揭秘组件同层渲染