微信小程序渲染原理

秒速五厘米 2022-12-27 12:34 246阅读 0赞

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

微信小程序（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的格式

发表评论

表情：
评论列表 （有 0 条评论，246人围观）

还没有评论，来说两句吧...

相关阅读

    相关 微信小程序WXML之列表渲染

    这一章节我们来学习一下我们在程序中另一个重要的语法结构循环结构，在java或C中是用for关键字的，在微信小程序中也是for关键字，但是不同的是语法结构有点不同，下面我们介绍一

    矫情吗；*矫情吗；*/ 0 赞/ 218 阅读