【微信小程序】原生组件的分层渲染 和 同层渲染

最新推荐文章于 2024-06-06 16:56:08 发布
最新推荐文章于 2024-06-06 16:56:08 发布
阅读量888 收藏 11
点赞数 9
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17335549/article/details/136739958
版权

微信小程序的原生组件指的是，微信小程序语法中自带的 video 等标签。【这里的原生指的是微信小程序而不是 js】

微信小程序的页面是基于 webview 的，其他的原生组件是独立于 webview 的。

分层渲染就是，小程序原生组件是独立于 webview 的。所以无论如何原生组件的层级都高于 webview。两个层级是完全独立的，因此无法简单地通过使用 z-index 控制原生组件和非原生组件之间的相对层级

原生组件已经支持同层渲染。

同层渲染，就是原生组件挂在到 webview 上

  1. android：基于 embed 标签
  2. ios： 基于 WKWebView 

具体请看官方文档

我有一棵树
关注
  • 9
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序canvas 2d支持同层渲染，绘制环形进度条,可全环，可半环
Zan_Z的博客
10-28 2272
小程序canvas 2d支持同层渲染，绘制环形进度条,可全环，可半环
微信小程序之渲染标签使用
该用户还没想到好的昵称的博客
07-01 1899
一、条件渲染 wx:if：在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：          在小程序里面识别boolean值时，只要属性的值不为空时boolean就判断为真，就算里面随便几个字符，例如 wx:if="11223" ，也判断为真， 如果需要为false,就必须采用数据绑定的方式{{false}}或者绑定字符串...
微信小程序的「同层渲染」踩坑记
03-29
背景 近期在开发小程序中，接触最多的就是 canvas 了，期间又因为兼容性的问题，又经历了底层 API 的新旧版的替换，踩的坑可谓令人印象深刻。小程序（微信）的 canvas 与 HTML 标准的 canvas 有较大区别，就连小程序本身的 canvas 底层 API 都有两个大版本的区别（其实远古时期还有一个版本，但年代过于久远就不做考究了）。目前现存的两个版本的区别在于是否支持「同层渲染」。 同层渲染 小程序的内容大多是渲染在 WebView 上的，如果把 WebView 看成单独的一层，那么由系统自带的这些原生组件则位于另一个更高的层级（如 canvas、video）。两个层级是完全独
小程序canvas的同层渲染 这个属性不加，就不会生效！
最新发布
懒鬼不能懒的博客
06-06 292
小程序canvas的同层渲染 这个属性不加，就不会生效！
小程序同层渲染
qq_41818857的博客
09-21 1554
小程序原生组件的渲染原理。我们知道，小程序的内容大多是渲染在 WebView 上的，如果把 WebView 看成单独的一层，那么由系统自带的这些原生组件则位于另一个更高的层级。两个层级是完全独立的，因此无法简单地通过使用 z-index 控制原生组件和非原生组件之间的相对层级。正如下图所示，非原生组件位于 WebView 层，而原生组件及 cover-view 与 cover-image 则位于另一个较高的层级： 「同层渲染」顾名思义则是指通过一定的技术手段把原生组件直接渲染到 WebView 层级上，此
微信小程序同层渲染原理剖析
moluchujian的博客
06-20 2113
「同层渲染」顾名思义则是指通过一定的技术手段把原生组件直接渲染到 WebView 层级上，此时「原生组件层」已经不存在，原生组件此时已被直接挂载到 WebView 节点上。你几乎可以像使用非原生组件一样去使用「同层渲染」的原生组件，比如使用 view、image 覆盖原生组件、使用 z-index 指定原生组件的层级、把原生组件放置在 scroll-view、swiper、movable-view 等容器内，通过 WXSS 设置原生组件的样式等等。...
小程序原生组件live-player的踩坑记录——同层渲染问题
华山派developer的博客
09-06 1294
公司有这么个需求，当有置顶的直播时候，小程序的首页会显示一个可拖动的直播悬浮窗。开发的思路很简单，就是使用 movable-area和movable-view组件实现拖动功能。但今天的主题不是这两个组件，而是live-player组件。
【uniapp】解决编译成微信小程序时，自定义组件会多一级父级节点
weixin_42678675的博客
10-28 4061
1. 背景 uniapp 中的自定义组件，DOM节点如下 <div class="father"> <div class="son"></div> </div> 编译成 微信小程序 之后的节点如下 <div class="father"> <div class="多出来的节点"> <div class="son"></div> </div> </div> 2. 原因 从官
小程序视图层数据渲染
浪子四方
04-11 902
简单渲染 数据绑定使用 Mustache 语法（双大括号）将变量包起来 <view>{{ name}}</view> Page({ data: { name: 'Trevor' } }) 列表渲染 wx:for 在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变...
【走进小程序原理】揭秘组件同层渲染
百度智能小程序技术团队
08-20 5796
阅读本文的收获：为什么我的小程序组件不能随着页面滚动？为什么组件层级不对？我该如何解决？ 在日常开发中，我们总能在小程序的开发文档里看到种种组件： 基础组件：小程序框架层开发 自定义组件：开发者or小程序官方，基于基础组件进行二次开发 动态库组件：小程序官方开发的、以动态库形式发布的组件，其本质依然是自定义、基础组件 ...... 综上：就像是盖楼，框架开发的基础组件，是小程序所有组件建筑的地基，我们今天要聊的正是它。 基础组件实现 前置名词解释 NA：Native App的缩写，是.
微信小程序长列表 数据渲染的些许优化
weixin_43311271的博客
05-28 8746
开始写长列表的时候，是将分页数据合并到一起在重新渲染，发现正常浏览还行，但是数据超过200多条的时候，新数据会出现一段白屏时间。于是做了如下些许优化 var datalistt = res.data var arr = []; datalistt.forEach(function (item) { arr.push({ ...
微信小程序Canvas不能同层渲染？
I_am_ken的博客
11-17 781
问题：canvas同一个id更新不一样的背景或绘画会更新不了 原因：微信canvas对id只使用一次，再更新需要卸载canvas 解决办法： 1、可以多个canvas的id，根据不同的画布切换 2、使用最新的wx.createSelectorQuery方法 const query = wx.createSelectorQuery().in(this) query.select(`#${canvasId}`) .fields({ // 需要获取的节点相关信息 node:
原生渲染和webview渲染
weixin_42197893的博客
12-08 3085
原生的渲染方式： view->layout->renderNode ->合成->GPU渲染 webview目前渲染方式： html->dom tree ->render tree ->render layer + 栅格化 ->合成->gpu渲染 1：native layout算法比浏览器快； 2：JS Thread、DOM Thread、Native Main Thread，并行化进行； 3：webview本身其实更像一个容器或者盒子，它是装在在OS里.
h5 android 原理,【走进小程序原理】揭秘组件同层渲染
weixin_31446315的博客
05-27 438
在日常开发中，我们总能在小程序的开发文档里看到种种组件：基础组件：小程序框架层开发自定义组件：开发者or小程序官方，基于基础组件进行二次开发动态库组件：小程序官方开发的、以动态库形式发布的组件，其本质依然是自定义、基础组件……综上：就像是盖楼，框架开发的基础组件，是小程序所有组件建筑的地基，我们今天要聊的正是它。基础组件实现前置名词解释前置特性解释框架层的基础组件，是基于H5组件和NA组件实现的。...
原生组件同层渲染问题 uniapp 微信小程序
biubiubiuPlus的博客
11-04 1761
使用uniapp开发微信小程序，解决原生组件的层级高问题 原生组件：map、video、canvas…… cover-view：覆盖在原生组件上的文本视图 cover-image：覆盖在原生组件上的图片 缺点：不支持嵌套其它组件 微信小程序：部分原生组件实现了同层渲染，在指定的基础库版本上，某些原生组件可无需使用cover-view覆盖 坑： //pages.json文件下的配置，不定不能加"renderingMode": "seperated" "globalStyle": { "navigatio
[微信小程序]单界面放多个video的渲染问题
CosecantY的博客
12-11 1177
在项目中有需求为：在一个页面放多个video，并且点击video可以播放视频。 一开始没想那么多，直接贴贴贴上去，一打开直接渲染一堆video标签，后来发现了渲染错误，开头的标签可以渲染出来，到后面就全挂掉了。 翻了会文档知道，这玩意不能一下放好多上去，一个页面也就能放两三个同时存在，那么我这需求咋实现呢？？ 又翻了一会，想到了个办法，咱们可以在不播放它的时候就不渲染video标签，想播放的时候再给它渲染出来。 这里放个图不放代码了，很杂，大致思路就是给video标签做个遮罩层，遮罩上写点击播放，在
微信小程序调camera时，先渲染图片，在调取相机问题。
2301_77055885的博客
01-02 533
在我们对微信小程序使用camera时，对他添加一些自定义的图片时，会造成图片先渲染，相机后调起的问题，造成不同步。这个问题是相机在渲染时，图片先加载。其实相机是已经被调用了，只是相机有一个初始化的时间所导致的。把bind:tap="initdone"换成bindinitdone="initdone" 就可以让相机在初始化以后在渲染图片。微信是双线程的，我们的图片在渲染层就直接渲染了，而我们的相机是原始组件。他要通过渲染层在进入底层进行一个操作。
微信小程序动态组件和请求数据动态渲染页面有啥区别
05-16
微信小程序动态组件和请求数据动态渲染页面都可以实现动态渲染页面的效果，但它们的实现方式是不同的。 动态组件是在小程序运行时动态生成组件，并将其添加到页面中。这样可以在页面中根据需要添加、删除和修改组件，实现更加灵活的页面布局。但是动态组件的生成和销毁会占用一定的资源，如果频繁操作可能会影响小程序的性能。 请求数据动态渲染页面则是通过请求服务器端的数据，并根据数据动态生成页面的内容。这种方式相对来说比较简单，也可以实现比较复杂的页面效果。但是需要注意的是，每次请求数据都会涉及到网络通信，如果数据量过大或者网络状况不好，可能会导致页面加载速度变慢。 因此，在实际开发中，应该根据实际情况选择动态组件或者请求数据动态渲染页面。如果需要频繁修改页面布局，可以考虑使用动态组件；如果需要动态展示数据，可以考虑请求数据动态渲染页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值