从现象看本质来解析下微信小程序编译和运行原理
发表时间：2023-09-04 14:16:55
文章来源：炫佑科技
浏览次数：173
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
从现象看本质来解析下微信小程序编译和运行原理
文中后面我会用几篇文章来讲述从工具到破解到源码分析和原理到实现的整个过程。
一开始我也在网上查了很多资料。 我读了一些人写的分析微信小程序架构的文章，从中学到了很多东西。
但如果要模拟实现这样的东西，还是比较混乱的，所以我想通过我们实现的过程，从现象到本质来分析一下微信小程序的编译运行原理。
对自己更有信心，坚持下去，学到更多。 想想我们遇到的问题。 当时我就觉得自己受不了了。 *终，随着时间的推移和认知的迭代，问题就会逐渐消失。
本文首先将全面剖析微信开发工具，一一了解基本文件和内容构成（从现象到本质）。 在此之前我们可以通过官方文档了解一些内容
从上面的描述中从现象看本质来解析下微信小程序编译和运行原理，我们可以知道逻辑层（App）和视图层（View）以及两者之间的通信协调的一些重要信息。
下面用微信开发工具来说明，小程序逻辑层的代码在NW.js中运行，视图层由60渲染，他们通过协议进行通信
下面我们主要关注mac环境
我们先打开微信开发工具官方demo，如图
从上图和我们的一些理解，我们知道微信小程序的文件格式主要有
接下来我们首先找到原生的微信开发工具应用包如图
后面我们分析的主要代码在.nw和core中。
这些文件将在后面的实现过程中用来说明目的
核。 解压代码上传，有兴趣的可以自己尝试一下
接下来我们回到开发工具，打开微信开发工具--》调试--》调试微信开发工具
打开调试器后，我们可以看到如下界面：
从上面的现象我们可以看出，他的两层渲染层和逻辑层结构包含在两个
**个对应渲染层的每个页面对应一个地址，但是逻辑层只有一个不变。 我们可以看到里面有什么。 如果我们直接将视图层的标签改为 ，我们就可以看到微信了。 它不会直接向您显示页面的白屏。
你改的话微信也会给你各种提示框，反正大概就是不想让你分析他的代码
点击确定无法取消，只能重新开始编译，有点恶心
他们不让我们公开地看，所以我们只能做一些异端来摧毁它。
我们**步打开：微信开发工具--》调试--》调试微信开发工具并在控制台输入
.('')
可以看到有4个对应的。 我们需要先关注**个，因为当你点击它时，你可以发现**个对应的是渲染层。
以下内容你可以暂时忽略，稍后我们会详细解释。
然后我们执行命令打开**个：
.('')[0].(真,空)
可以看到如图所示
现在我们可以看到微信页面渲染层的页面结构
（这里对本文每个文件的来源和用途进行说明，我会在后续章节中进行说明，因为涉及的内容太多，放在一篇文章里恐怕会太长，大家都会看了一会觉得无聊，所以分成几篇文章来讲解，后面还有一些基础的包和。更多讲解，后续会逐步更新）
上面可以找到对应的页面层结构，那么如何找到呢？
其实*简单的方法就是直接在首页的控制台中输入就可以直接看到显示的逻辑层代码。
（我的做法是从微信提醒和基础库的一些文件中看到这个结构）
注意，微信重写了微信小游戏中的 and 对象微信小程序开发页面，所以不能像我们正常操作页面一样直接使用。
接下来我们看一下微信小程序的基础库文件
方法是我们在首页控制台输入()。 我们可以看到弹出的文件系统，它与你选择的本地文件系统相对应。
详情==》调试基础库==》选择基础库版本
包内基础库文件.js和.js
可以仔细观察这两个对应的js引用。
.解压后的文件格式
解压缩。 格式包的代码地址
现在不需要研究wcc和wcsc的源码，但是我们可以通过脚本劫持的方式来看看它运行了哪些命令操作。
这是一种劫持他的运行命令的方法
找到微信开发工具wcc和wcsc所在的地方，然后创建两个同名的脚本，然后将原文件重命名，然后重启微信开发工具。 一定要重启否则不生效
wcc wcsca劫持脚本代码地址
然后我们可以通过进入主页控制台或者输入()来看到输出文件
从上图中我们可以看到，我们可以识别出下图中的一些信息。
wcc执行的命令*终生成逻辑层和渲染层的$gwxc()方法中的js代码。 你可以手动测试一下就知道了。
wxss生成的主要内容是渲染层eval()代码。
本文仅简单介绍一些关键文件的说明
稍后我会一一分析关键文件并描述它到底做了什么以及为什么使用它。
下一篇文章将为大家带来渲染层和逻辑层的具体页面文件内容结构的分析，以及通信架构在微信开发工具中的应用。
事实上，他们和公共wx上的api之间的协调工作。 对象都是通过协议消息实现的。
