文中后面我会用几篇文章来讲述从工具到破解到源码分析和原理到实现的整个过程。

一开始我也在网上查了很多资料。 我读了一些人写的分析微信小程序架构的文章，从中学到了很多东西。

但如果要模拟实现这样的东西，还是比较混乱的，所以我想通过我们实现的过程，从现象到本质来分析一下微信小程序编译和运行的原理。

凡事对自己更有信心，坚持下去，学到更多。 想想我们遇到的问题。 当时我就觉得自己无法解决这些问题。 最终，随着时间的推移和认知的迭代，问题会慢慢被消除。

本文首先将全面分析微信开发者工具，一一了解基本文件和内容组件（从现象中见本质）。 在此之前，我们可以通过官方文档了解一些内容。

从上面的描述中，我们可以知道逻辑层（App）和视图层（View）以及两者之间的通信协调的一些重要信息。

下面通过微信开发工具进行演示。 小程序逻辑层的代码在NW.js中运行，视图层由60渲染。他们通过协议进行通信。

下面我们主要关注mac环境

我们先打开微信开发工具官方demo，如图

从上图和我们的一些理解，我们知道微信小程序的文件格式主要有

接下来我们首先找到本地的微信开发者工具应用包如图

后面我们要分析的主要代码在.nw和core中。

这些文件将在后续的实现过程中用来说明其用途。

核。 解压代码并上传。 如果你有兴趣，可以先自己尝试一下。

接下来我们回到开发者工具，打开微信开发者工具--》调试--》调试微信开发者工具

开启调试后，我们看到的界面如下：

从上面的现象我们可以看出，它的两层渲染层和逻辑层结构包含在两个

第一个对应的是渲染层的每个页面都对应一个地址，但是逻辑层只有一个常量。 我们可以看到这里面有什么。 如果我们直接改变视图层的标签，就可以看到微信了。 我不会直接向您展示该页面。 它将有一个白色屏幕。

如果你进行更改，微信还会给你各种弹框。 不管怎样，它可能不希望你分析它的代码。

单击“确定”仍然无法解决问题，我必须重新启动编译。 有点恶心。

如果不让我们公开地看到它，那么我们就只能搞一些异端邪说来消灭它。

我们第一步打开：微信开发者工具--》调试--》调试微信开发者工具并在控制台输入

.('')

可以看到有4个对应的。 我们需要先关注第一个，因为当你点击它时，你可以发现第一个对应的是渲染层。

以下内容你可以暂时忽略微信小程序开发中常见问题的解决，稍后我们会详细解释。

然后我们执行命令打开第一个：

.('')[0].(真,空)

可以看到如图所示

现在我们可以看到微信页面渲染层的页面结构

（这里是本文的文件内容，每个文件的来源和用途，我会在后续章节中进行解释。由于涉及的内容太多，放在一篇文章中恐怕会太长。大家读起来需要一段时间，比较无聊，所以分成几篇文章来讲解，下面和一些基础的包和.js.js，以及使用的同步API和请求的.js page等本文只简单介绍，不会做，多解释一下，后面会逐步更新）

上面可以找到对应的页面层结构，那么如何找到呢？

其实最简单的方法就是直接在首页的控制台中输入就可以直接看到显示的逻辑层代码。

（我的做法是从微信和基础库写的一些文件中看到这个结构）

注意，微信重写了微信小游戏中的 and 对象，所以不能像我们正常操作页面一样直接使用。

接下来我们看一下微信小程序的基础库文件

方法是我们在首页控制台输入()就可以看到弹出的文件系统，对应的是你选择的本地的。

详情==》调试基础库==》选择基础库版本

包中这个基础库文件的.js和.js

可以仔细观察这两个对应的js引用。

.解压后格式化文件

解压格式包的代码地址

现在不需要研究wcc和wcsc的源码，但是我们可以通过脚本劫持的方式来看看它运行了哪些命令操作。

这是一种劫持他的运行命令的方法

找到微信开发者工具wcc和wcsc，新建两个同名脚本，然后将原文件重命名，然后重启微信开发者工具。 请务必重新启动它们，否则它们将不会生效。

wcc劫持脚本代码地址

然后我们可以通过进入主页控制台或者输入()来看到输出文件

从上图中我们可以看到，我们可以识别出下图中的一些信息。

wcc执行的命令最终生成逻辑层和渲染层的$gwxc()方法中的js代码。 你可以手动测试一下就知道了。

wxss生成的主要内容是渲染层eval()代码。

本文仅简单介绍一些关键文件的说明

稍后我会一一分析关键文件并描述它到底做了什么以及为什么使用它。

下一篇文章将为大家带来渲染层和逻辑层的具体页面文件内容结构分析，以及通信架构在微信开发者工具中的应用。 你可以先看一下。

事实上，他们和公共wx上的api之间的协调工作。 对象都是通过协议消息实现的。