微信小程序渲染原理

最新推荐文章于 2022-07-12 21:45:16 发布
最新推荐文章于 2022-07-12 21:45:16 发布
阅读量2.5k 收藏 5
点赞数 1
分类专栏： 小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40970987/article/details/111006523
版权

微信小程序开发文档
从微信小程序开发者工具源码看实现原理（一）- - 小程序架构设计
从微信小程序开发者工具源码看实现原理（二）- - 小程序技术实现
从微信小程序开发者工具源码看实现原理（三）- - 双线程通信

微信小程序（MPA）

在这里插入图片描述
微信小程序内部分为两个线程去进行操作
在这里插入图片描述
运行环境
在这里插入图片描述
NWJS使用div+css搭建桌面软件

打开隐藏面板
console下面输入相关指令

openVendor() 打开小程序基础代码库

在这里插入图片描述
其中的wcc和wcsc用于将wxml文件编译为js文件去进行处理，小程序最终是通过js去执行，然后通过渲染层将虚拟dom变为真正的dom展示出来。

openInspect() 打开小程序的隐藏调试窗口

在这里插入图片描述

点击Apps下面的inspect可以打开调试器

在这里插入图片描述
后面三个webview是与小程序内部相关的，第一个webview即我们当前打开的页面。小程序内部页面是通过栈的方式实现的，当前展示的页面即栈顶元素，栈内元素最多不能超过十个。

document.getElementByTagName(‘webview’)[0].showDevTools(true,null)
会再打开一个隐藏的调试窗口

在这里插入图片描述
可以看到最终将被渲染为html的格式

star-1331
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小白学习微信小程序的数据绑定和渲染
m0_72166538的博客
05-01 763
上述代码中，我们使用<block>标签来定义一个块级元素，通过wx:for属性绑定了一个名为students的数组，通过wx:for-item属性指定了循环体中的变量名student，然后在<text>标签中使用了数据绑定表达式{{student.name}}来渲染每个学生的名字。在模拟器中，我们可以看到页面上显示了三个文本，分别为"小明"、"小红"和"小刚"，这是因为我们在data属性中定义的students数组绑定到了<block>标签，循环渲染了每个学生的名字。
微信小程序同层渲染原理剖析
moluchujian的博客
06-20 2075
「同层渲染」顾名思义则是指通过一定的技术手段把原生组件直接渲染到 WebView 层级上，此时「原生组件层」已经不存在，原生组件此时已被直接挂载到 WebView 节点上。你几乎可以像使用非原生组件一样去使用「同层渲染」的原生组件，比如使用 view、image 覆盖原生组件、使用 z-index 指定原生组件的层级、把原生组件放置在 scroll-view、swiper、movable-view 等容器内，通过 WXSS 设置原生组件的样式等等。...
Android 渲染机制——原理篇（显示原理全过程解析）
热门推荐
卜大爷的博客
12-09 4万+
帧率 每秒的帧数（fps）或者说帧率是以帧为单位的位图图像每秒连续出现在显示器上的次数（速率）。简单来说就是一秒钟，屏幕显示多少张画面。 为什么是 60fps ？ 人类视觉的时间敏感度和分辨率根据视觉刺激的类型和特征而变化，并且在个体之间不同。人类视觉系统每秒可处理10到12个图像并单独感知它们，而较高的速率则被视为运动。12fps 大概类似手动快速翻动书籍的帧率，这明显是可以感知到不够顺滑的。24fps 使得人眼感知的是连续线性的运动，这其实是归功于运动模糊的效果。24fps 是电影胶圈通常使用的帧率，
扒一扒安卓渲染原理
wubaohu1314的博客
10-23 532
导语： 在测试流畅度的过程中，必不可免的要与FPS，Jank等指标接触，但为了加深理解，今天来简单扒一扒安卓的渲染原理； PerfDog使用Jank作为来代表游戏流畅度的指标 一.CPU与GPU结构 现在大部分移动端都会配有CPU（中央处理器）和GPU（图形处理器），有的现在还有一块NPU用于处理智能运算。来简单看一下他们的结构； 绿色的是计算单元(ALU)， 橙红色的是存储单元， 橙黄色的是控制单元。 CPU需要很强的通用性来处理各种不同的数据类型，同时又要进行复杂的数学和逻辑运算，所.
移动端APP渲染原理
三线程序员的博客
09-27 1580
渲染原理 我们看到的App界面，都是由CPU和GPU共同计算处理的。 CPU内部流水线结构拥有并行计算能力，一般用于显示内容的计算。而GPU的并行计算能力更强，能够通过计算将图形结果显示在屏幕像素中。内存中的图形数据，经过转换显示到屏幕上的这个过程，就是渲染。而负责执行这个过程的，就是GPU。 渲染的过程中，GPU需要处理屏幕上的每一个像素点，并保证这些像素点的更新是流畅的，这就对GPU的并行计算能力要求非常高。 早期，图形渲染是由VGA(Video Graphics Array，视频图形阵列）来完成的，
【小程序】解析小程序原理
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
06-03 3706
小程序实际的运行环境是在托管平台（也称为托管环境）。 托管平台可以是本机应用程序（类似于 Web 浏览器），也可以是（嵌入的引擎）操作系统。小程序通常需要经过托管平台审核才能上线，而** Web 应用只需要拥有一个 Web 服务器（以及可选的域名）即可上线。其中，小程序包含一个全局的 [[[#manifest]]] 文件和零个或多个页面清单文件**。 清单文件通常采用 JSON 格式。如下所示，这是一个典型的小程序目录结构： 另外，小程序的运行环境分为视图层和逻辑层。 视图层只处理渲染并监听发生的事件，逻辑
微信小程序wxml列表渲染原理解析
10-15
主要介绍了微信小程序wxml列表渲染原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
浅谈高大上的微信小程序中渲染html内容—技术分享
10-17
在微信小程序中渲染HTML内容是开发者常常面临的问题，特别是对于那些需要展示富文本的应用来说。本文将探讨几种在微信小程序中处理HTML字符串的方法，并重点介绍一种名为“wxParse”的解决方案，以及之后基于“WePY...
微信小程序滚动数字
08-10
为了提高性能，避免频繁的数据更新，可以使用微信小程序提供的`requestAnimationFrame`替代`setInterval`，确保在屏幕重绘之前执行动画，减少不必要的渲染。 7. **库的使用** 如果`wxapp-animateNumber-master`是...
微信小程序筛选插件下拉筛选插件
08-10
微信小程序筛选插件，尤其是下拉筛选插件，是微信小程序开发中常见的一种交互元素，主要用于提高用户体验，帮助用户在大量的数据中快速找到所需信息。本文将深入探讨这个主题，介绍相关的开发技术、实现原理以及如何...
微信小程序底层原理
不积跬步无以至千里
11-16 2万+
页面渲染的方式主要有三种 1.web渲染 2.Native原生渲染 3.web与Native两者掺杂，即Hybrid渲染。 小程序的呈现形式为第三种。     双线程通信方式 为什么要双线程 ？ -&gt; 为了管控安全，避免操作DOM。     小程序的渲染层和逻辑层分别由 2 个线程管理：渲染层的界面使用了 WebView 进行渲染，逻辑层采用 JsCore 线程运行...
微信小程序-微信小程序富文本渲染引擎
08-05
步骤 把 wxParser 目录放到小程序项目的根目录下 在需要富文本解析的 WXML 内引入 wxParser/index.wxml 在页面 JS 文件内使用 wxParser.parse(options) 方法解析 HTML 内容 在小程序项目根目录的 app.wxss 内引入 wxParser 的默认样式库 wxParser.parse(options) 方法的 options 参数说明 参数名 类型 必填 描述 bind String 是 要绑定的数据名称 html String 是 HTML 内容 target Object 是 绑定数据的模块对象 enablePreviewImage Boolean 否 是否启用富文本内的图片预览功能，默认是 tapLink Function 否 点击超链接时的回调函数 示例 WXML JS const wxParser = require('../../wxParser/index'); Page({ data: {}, onLoad: function () { l
微信小程序的渲染模式与VUE渲染模式的区别
小柒的博客
04-30 1187
vue是一种mvvm双向数据绑定的渲染模式 微信小程序是一种非mvvm的单向数据绑定的渲染模式 虽然vue和微信小程序都可以通过数据层渲染模板层，但是vue的模板层数据发送变化时会通知数据层更新数据，vue的模板层被渲染后不会被渲染成静态内容 微信小程序的模板层为一次渲染即渲染为静态内容，不会在渲染完毕后数据发送改变时让子组件的组件实例或DOM通知父级的数据层同步更新数据 项目案例 ...
微信小程序的渲染层开发
u014695938的博客
06-18 1969
微信小程序的渲染层由 WXML（WeiXin Markup Language）与 WXSS（WeiXinStyle Sheet）编写，并由组件来进行展示。将逻辑层的数据渲染成视图，同时将渲染层的事件发送给逻辑层。WXML 用于描述页面的结构，WXS（WeiXin Script）是微信小程序的一套脚本语言，结合 WXML 可以构建出页面的结构。WXSS是用于描述页面的样式。组件是微信小程序渲染层的基本组成单元。...
微信小程序界面渲染的整体流程
qq_43447509的博客
08-14 1260
界面渲染整体流程 1.在渲染层，宿主环境会把WXML转换成对应的JS对象（宿主环境指的就是微信客户端） 2.将JS对象再次转换成真实DOM树，交由渲染层线程渲染 3.数据变化时，逻辑层提供最新的变化数据，生成新的JS对象与之前的JS对象进行diff算法对比 4.将最新变化的内容反映到真实的DOM树中，更新UI ...
微信小程序WXML之列表渲染
搬砖老农工的博客
10-19 1万+
这一章节我们来学习一下我们在程序中另一个重要的语法结构循环结构，在java或C中是用for关键字的，在微信小程序中也是for关键字，但是不同的是语法结构有点不同，下面我们介绍一下。 wx:for 在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item 下面我们来分析一下一个实
微信小程序中的渲染层和逻辑层是怎样运行的？
最新发布
m0_58859743的博客
07-12 950
小程序的运行环境分成渲染层和逻辑层， WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。
app渲染性能相对专项测试理论基础
weixin_34248487的博客
09-12 207
渲染性能到底怎么表现？ 应用设计师们为了让应用呈现很棒的使用体验，对界面进行渲染，但是这些华丽的图片及转场，会使应用出现卡屏、运行不流畅的用户体验（比如切换界面、滑动滚动条等）。2.了解下渲染性能的原理 系统会在每16ms内对你的活动进行重新绘制，这意味着你必须在16ms内完成屏幕的更新（包括计算、绘图等操作），也就是16ms一帧。但是如果你超过了一帧超过16ms...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值