【走进小程序原理】揭秘组件同层渲染

原创

于 2020-08-20 15:17:28 发布 · 6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #android #ios #javascript #html5

本文探讨了小程序中基础组件实现，特别是原生组件的限制及其解决方案——同层渲染。同层渲染允许原生组件与其他组件随意叠加，解决了原生组件层级问题，提升了用户体验。文章详细介绍了Android和iOS端的同层渲染原理，并提醒开发者在使用原生组件时需要注意的事项。

阅读本文的收获：为什么我的小程序组件不能随着页面滚动？为什么组件层级不对？我该如何解决？

在日常开发中，我们总能在小程序的开发文档里看到种种组件：

基础组件：小程序框架层开发

自定义组件：开发者or小程序官方，基于基础组件进行二次开发

动态库组件：小程序官方开发的、以动态库形式发布的组件，其本质依然是自定义、基础组件

......

综上：就像是盖楼，框架开发的基础组件，是小程序所有组件建筑的地基，我们今天要聊的正是它。

基础组件实现

前置名词解释

NA：Native App的缩写，是基于智能手机本地操作系统如iOS、Android、WP并使用原生程式编写运行的第三方应用程序，一般开发语言为JAVA、C++、Objective-C、Swift

NA 组件：也称原生组件，是Android、ios 等NA客户端开发的控件

H5组件：是指HTML5语言编写的web组件

webview：用来在NA代码中展示web页面，有点类似web中的iframe，ios、Android中分别采取WKWebView和WebView控件实现。

前置特性解释

小程序前端框架，会将开发者实现的小程序布局转换成标准 HTML 布局；

NA 组件

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

百度智能小程序技术团队

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

参与评论您还未登录，请先登录后发表或查看评论

博客

Smart UI ：创造大于1的辅助系数

12-23

590

疫情的缘故，一整年都没去过电影院，在家用投影仪看的片子也屈指可数；不过有一部，足足看了两遍——《超体》。这是个14年的科幻动作片，女主误入黑帮交易，被迫在腹中缝入了高浓度提纯的CPH4（孕妇产生的微量元素可以帮助胎儿形成骨骼）走私毒品，运输过程中因为被打，药品破了渗透到了她的血液，自此，她的大脑被一步步开发，最后到达100%……吸引我反复去看的，是片子的哲学观。女主意识到逐渐开发的大脑，既是超能力，也是超能量，自己的肉体只是一个容器，当容器本身不足以支持这么大的超级能量时，基因为了生存的本能，会驱动

博客

震惊！在 vscode 开发百度小程序竟然这么享受

03-23

508

背景你是否开发小程序过程中经常疯狂切屏？????你是否在开发过程中需要新建很多文件？????你是否不知该如何新建一个小程序项目？????如果你饱受以上问题的困扰，没有关系，只要你看到了这篇文章我们就是家人，今天就给家人们发福利了，双击加关注···我保证：第一，绝对不意气用事；第二，绝对不放过任何一个细节；第三，绝对的公正漂亮；vscode 插件 — swan-vstoolkit — 正在等你文档我们集成了官方文档，让您完全可以在vscode中查看对应的文档绑定快捷键

博客

【最佳实践】小程序重点场景异常处理（一）

01-29

2249

一、背景小程序在运行过程中难免会遇到一些异常情况，将会给用户带来不好的体验。针对于此，我们总结出一些常见的case，总结成最佳实践，帮助开发者合理处理异常，提升小程序体验。二、最佳实践场景一：用户拒绝授权定位，二次进入页面不友好一些小程序需要在进入首屏的时候，需向用户获取地理位置权限，但是若用户一旦误点击【拒绝】按钮，那么下次再次进入该小程序时，页面直接显示无法定位。那么对于一般用户，很难知道如何再次开启权限，并因此无法使用小程序，给用户造成了不好的体验。首次进入小程序时，会弹出获取地理位置信息的

博客

学会性能优化这几招，有效提升小程序到达率

01-13

433

小程序性能是创造良好用户体验的基本要素，当用户进入小程序时，良好的性能可以快速加载页面。如果性能欠佳，显示速度过慢，甚至出现输入无响应，内容不可访问，都将在不同程度上影响用户体验，从而导致用户流失。划重点：性能不达标可能造成哪些影响呢？1、影响小程序流量获取2、小程序到达率低（数据统计：性能指标提升会帮助小程序的访问人数增加）3、小程序C端体验降低，由此影响小程序等级那么如何优化小程序性能呢？小智给大家推荐一套《智能小程序性能优化实践》专题课程，快速上手智能小程序性能优化，点击下方链接即

博客

提升智能小程序性能的N个手段，你知道几个？

10-19

4403

重点写在前面性能不达标可能造成哪些影响呢？影响小程序流量获取小程序到达率低（数据统计：性能指标提升会帮助小程序的访问人数增加）小程序C端体验降低，由此影响小程序等级上周，《智能小程序性能优化实践》系列课程开课啦！第一节课“智能小程序性能优化的意义和原理”主要解读了智能小程序的底层架构、性能指标和优化原理，错过的朋友们可以扫描下方二维码观看课程视频。（扫码观看课程视频）本周课程对小程序的启动流程有一个基本的认知后，本周第二节课将根据百度..

博客

提升小程序性能看它就够了！

10-13

3561

小智发现总有一些开发者对小程序的启动性能不太在意，觉得多个几秒也没关系。如果你也有以上的想法，那就是大错特错了！性能是创造良好用户体验的基本要素，当用户进入小程序时，良好的性能可以快速加载页面。如果性能欠佳，显示速度过慢，甚至出现输入无响应，内容不可访问，都将在不同程度上影响用户体验，从而导致用户流失。划重点：性能不达标可能造成哪些影响呢？1、影响小程序流量获取2、小程序到达率低（数据统计：性能指标提升会帮助小程序的访问人数增加）3、小程序C端体验降低，由此影响小程序等级..

博客

小程序性能优化三板斧

09-28

4096

为什么有这篇文章想看干货的可以直接跳转到正文 …小程序中心是百度 APP小程序流量分发的入口，从百度个人中心可以进入。小程序中心说大不大，说小也不小，属于麻雀虽小五脏俱全的那种，从 18 年到现在经历了 2 年的迭代，经手了 20 多任开发，1000 次左右的 commit ，也发展成了一个比较成熟的产品。产品发展到一定阶段，就开始呈现出技术上的一些瓶颈，前期为了快速的上线功能埋下了不少的坑，尤其是性能上的坑，达到了不可忽视的程度。但是坑嘛，嘛，

博客

开发者工具编辑器内核升级啦！6大功能抢先体验！

09-09

4512

作为百度智能小程序开发者，开发者工具编辑器想必大家都非常了解了~！它是百度智能小程序官方提供的代码开发工具，为小程序开发提供了大量的针对性优化功能，如：小程序的代码高亮、代码提示、代码模板、px转rpx、云函数、组件面板、自动文件生成等。这些百度开发者工具编辑器特有的功能，可以大大提升开发者的工作效率。为了进一步提升广大智能小程序开发者的使用体验及开发效率，7月初，我们对进行了编辑器的内核升级。这次编辑器体验升级后的主要功能包括：分屏编辑功能、文件大纲与面包屑功能、Git源代码管理功能、Git时间线功能

博客

10分钟彻底搞懂单页面应用路由

08-05

5827

上一次，跟大家科普了小程序的自定义路由routes，开启了路由之旅；今天，顺势就单页面应用路由，跟大家唠个五毛钱，如果唠得不好……退…一块钱？单页面应用特征假设：在一个 web 页面中，有1个按钮，点击可跳转到站内其他页面。多页面应用：点击按钮，会从新加载一个html资源，刷新整个页面；单页面应用：点击按钮，没有新的html请求，只发生局部刷新，能营造出一种接近原生的体验，如丝般顺滑。SPA 单页面应用为什么可以几乎无刷新呢？因为它的SP——single-page。在第一次进入应用时，即.

博客

程序拍了拍你：来看看如何避开路由雷区

07-06

4182

`全文阅读时长6分钟，案例为真实事件改编，小程序名称、人名仅为代号，如有雷同……那我就改。典型案例在一个夜黑风高的夜晚，“xx饭很多”百度智能小程序悄然上线，目录结构如下：├── pages│ └── home│ ├── index.js│ ├── index.json│ ├── index.css│ └── index.swan│ └── eat // 大口吃│ ├── index.js│ ...│.

博客

文本溢出时，如何显示为省略号

06-16

4248

文本溢出时，如何显示为省略号本文作者：无双，GitHub链接：https://github.com/wushuangzhao/blog/issues/2更多内容查看开发者社区/更多招聘信息本文介绍在百度智能小程序开发中，如何将溢出的文本显示为省略号。欢迎开发者分享您在开发智能小程序中的经验心得，我们会通过智能小程序技术团队的社区渠道把你的经验分享给更多开发者朋友，投稿地址：smartprogramtech@baidu.com。目前在移动端开发的展示界面中，如果一段文本的数量过长，受限于屏幕的宽高

博客

百度智能小程序性能文档升级，重磅来袭！

06-09

4483

页面白屏了？加载时间长？点击没反应？性能有问题！智能小程序性能文档升级，重磅来袭，带你进入不一样的性能新世界！更多内容查看开发者社区/更多招聘信息近期为帮助开发者提升小程序性能，百度智能小程序上线了 Page.onInit 、xxx（如有其它请补充）等新增功能；同时全面升级了开发者性能文档，从基本原理开始由浅入深，为您解锁各种性能提升新技能！更多性能优化方案文档升级后，围绕小程序首屏渲染流程，针对收集 initData、请求主数据环节，和优化渲染速度的角度，为开发者提供了更多性能优化方案。收.

博客

性能神器——Page.onInit

06-02

4455

为进一步帮助您提升小程序性能，缩短小程序页面渲染时间，智能小程序上线了一个新的生命周期 Page.onInit，您可在3.160.12 及以上的基础库版本中使用。更多内容查看开发者社区/更多招聘信息有效提升性能以百度知道小程序为例，使用 Page.onInit 进行优化后，上屏时长约提升了 210ms。以下是百度知道、百度百科和宝宝知道使用Page.onInit后的收益：小程序收益(单位 ms)百度知道210百度百科100宝宝知道150什么是Pag.

博客

智能小程序基础库 3.190 版本上新啦～

06-02

4056

智能小程序基础库今天上线了 3.190.5 版本，新增新增了书架功能，开发者使用百度 APP-书架同步能力后，用户可将小程序里的内容添加至百度 APP-书架，即可通过书架便捷回访小程序，提高小程序与用户的交互效率，缩短内容重访路径，提高服务转化。更多内容查看开发者社区/更多招聘信息新增功能新增API说明书架内容查询接口说明百度 APP-书架发送给小程序的查询请求，接入百度 APP-书架同步能力的开发者，需要参照本文档开发书架内容查询接口，并在“开发者平台-产品试验室- 百度 AP

博客

智能小程序新增Page.onInit功能，有效提升性能

05-26

4578

博客

百度智能小程序资深研发工程师直播授课！必看！

05-19

4258

智能小程序直播课，每周二三四，16:10~17:00（如有特殊调整，会提前通知）通过百家号“百度智能小程序布道师”开播，百度的产品/运营/技术同学通过直播的方式跟大家交流分享，讲解产品功能、运营玩法等干货内容，助力更多的开发者们提升工作效能！大家可在直播当天在百度APP搜索“百度智能小程序布道师”，点击排名第一位的百家号，在直播期间即可看到直播间入口。本周精彩内容抢先看第十期：如何利用模板快速搭建智能小程序时间：2020年5月19日16:10讲师：资深研发工程师--黄競..

博客

你真的完全掌握了 Input 组件的键盘控制么？ ——百度智能小程序 Input 组件原理剖析与键盘行为说明

05-15

628

在百度智能小程序的很多开发场景中，我们都会使用到 Input 输入框组件。而在操作输入框的过程中，正确处理键盘的弹出和收起行为也是十分重要的一环。键盘行为不仅需要完美符合业务场景，同时也和用户体验息息相关。那么，你真的完全掌握了 Input 组件的键盘控制么？更多内容查看开发者社区更多招聘信息Input 组件的使用在智能小程序的开发过程中，开发者通过使用 Input 组件的 focus 和 blur 属性来控制键盘，从而实现当用户点击 Input 框时，键盘弹起；当用户点击空白区时，键盘收.

博客

四种方式快速实现上滑触底加载更多效果

05-09

5311

作者：小花github链接：https://github.com/mengbodi/swan/issues/1加入我们更多内容请前往智能小程序开发者社区查看在智能小程序的开发过程中，上滑加载是一种十分常见的加载效果，最近也收到了一些开发者在开发上滑加载时遇到的问题，今天的内容就为您介绍一下如果想实现下述效果的上滑加载，我们需要如何去做。以下是为大家总结的四种常见的实现方式：使用 onReachBottom 实现使用 scroll-view 组件实现使用信息流模板实现上滑加载使用.

博客

智能小程序基础库 3.180 版本上新啦～

04-29

4099

智能小程序基础库今天上线了 3.180.3 版本，新增如下功能，并对旧版本的一些问题进行了修复。将 downloadFile 单次下载限制优化为 50MB，为 DownloadTask 和 UploadTask 增加 offProgressUpdate、onHeadersReceived 和 offHeadersReceived 三个方法。image 组件提供 webp 参数，支持iOS 系...

博客

百度智能小程序框架性能优化实践

04-24

996

原文链接百度智能小程序框架性能优化实践移动互联网中 Native App（NA）和 H5 一直处在博弈状态，在性能体验和灵活性上艰难寻找着平衡，单从技术上来说，小程序就是 NA 和 H5 的又一次碰撞。小程序的灵活性已被证实，在性能方面，百度智能小程序从框架启动、小程序包下载、小程序包加载以及渲染等 4 个方面进行了启动速度优化。在 GMTC 全球大前端技术大会（深圳站）2019 上，百...