本章节主要从开发者工具分析破解、核心文件解读和架构流程图解这三个层面来加深对小程序运行原理的理解。
小程序运行环境
根据微信小程序开发文档可以得知小程序在三端的运行环境场景：
iOS ：小程序逻辑层的 JavaScript 代码运行在 JavaScriptCore 中，视图层是由 WKWebView 来渲染的，环境有 iOS 12、iOS 13 等；
Android：小程序逻辑层的JavaScript 代码运行在 V8 中，视图层是由自研 XWeb 引擎基于 Mobile Chrome 内核来渲染的；
开发工具：小程序逻辑层的JavaScript 代码是运行在 NW.js 中，视图层是由 Chromium Webview 来渲染的。
从小程序在三端中的运行环境可以看出来，它们存在逻辑层和渲染层之间的交互，具体是如何交互的呢？我们可以从渲染层和逻辑层之间的通信模型来找答案：
从这张图中，我们可以看出小程序采用了一种较为合适的技术方案，实现渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView进行渲染，逻辑层采用JsCore线程运行JS脚本。当一个小程序存在多个界面时，渲染层就会存在多个WebView线程，这两个线程之间的通信会经由微信客户端来做中转，逻辑层发送的网络请求也经由Native转发，
为什么要采用这种技术方案呢？主要原因是小程序的管控限制，比如不能直接操作DOM树、页面跳转等管控措施，更好地形成自己的生态闭环。
现在我们已经对小程序运行环境的基本组成有了一些了解，下面我就从开发者工具分析破解、文件解读和架构流程图解这三个层面来讲述小程序运行环境的具体知识点。
微信开发者工具分析破解
我们先从微信开发者工具分析破解讲起。
首先，我们从微信开发者工具中打开官方提供的小程序demo项目：
从编辑栏和文档中，我们可以知道一个页面的组成结构存在四种文件格式，我们来看下是哪四种格式呢？
.js后缀文件表示当前页面逻辑
.wxml 后缀文件是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构
.wxss 后缀文件用于表示一套样式语言，用于描述 WXML 的组件样式
- .json 后缀文件表示是页面的配置原则
这些是我们大部分开发者看到或知道的一些表面内容。你可能会问，什么是深层次的内容呢？下面我们就来一一分析。
刚才我们也讲到了小程序中存在逻辑层和渲染层，那怎么在开发者工具中发现它呢？
鼠标点击 微信开发者工具–》调试–》调试微信开发者工具
你可以拿出鼠标按照这样的顺序来操作，点击微信开发者工具，然后点击调试，点击调试微信开发者工具。之后就会弹出这样一个页面：
可以看到我做了两处标记，第一处标记的webview是渲染层，每个页面src对应一个地址，第二处标记的webview就是逻辑层。
仅仅是这样一个页面，我们是没办法直接查看webview中的具体内容的，还需要一些操作。你可以在刚才打开的控制台Console中输入找到对应标签，查看对应的webview：
document.getElementsByTagName('webview')
再通过这个命令查看具体的webview内容：
document.getElementsByTagName('webview')[0].showDevTools(true,null)
如果你直接打开对应的dom树，第一个webview展示的就是渲染层相关信息：
比如从这张图中我们就可以看到这个页面渲染层所依赖的一些文件和一些方法，通过结果论来推断这些文件从何而来有何作用。
而对于service逻辑层的webview，可以直接在开发者工具右下方控制台Console输入document，这样就能查看了：
经过上面的介绍，你就能知道，通过dom树和source资源可以看出加载的一些本地文件资源。那么接下来，我再告诉你如何找到这些文件的出处，包含文件本身的引用和代码执行返回的结果。
我们从刚才那张图中看到script引入了一些WA开头的文件，这些文件其实就是小程序运行时核心的基础库文件了，我们在控制台输入openVendor()命令，会自动弹出对应的文件框：
这些.wxvpkg后缀文件就是微信基础库的版本文件，通过相关工具解压后可以看到文件内容格式：
需要特别注意的是，还存在两个wcc和wcsc可执行文件，这两个文件有什么作用呢？
先来说说wcc文件，wcc 将微信小程序设计的一套wxml标签语言，用于构建出页面结构，转为WebView可以理解的标签，毕竟渲染层还是运行在webview中，我们可以通过一张图来看下它的编译流程。
本章节主要从开发者工具分析破解、核心文件解读和架构流程图解这三个层面来加深对小程序运行原理的理解。
小程序运行环境
根据微信小程序开发文档可以得知小程序在三端的运行环境场景：
iOS ：小程序逻辑层的 JavaScript 代码运行在 JavaScriptCore 中，视图层是由 WKWebView 来渲染的，环境有 iOS 12、iOS 13 等；
Android：小程序逻辑层的JavaScript 代码运行在 V8 中，视图层是由自研 XWeb 引擎基于 Mobile Chrome 内核来渲染的；
开发工具：小程序逻辑层的JavaScript 代码是运行在 NW.js 中，视图层是由 Chromium Webview 来渲染的。
从小程序在三端中的运行环境可以看出来，它们存在逻辑层和渲染层之间的交互，具体是如何交互的呢？我们可以从渲染层和逻辑层之间的通信模型来找答案：
从这张图中，我们可以看出小程序采用了一种较为合适的技术方案，实现渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView进行渲染，逻辑层采用JsCore线程运行JS脚本。当一个小程序存在多个界面时，渲染层就会存在多个WebView线程，这两个线程之间的通信会经由微信客户端来做中转，逻辑层发送的网络请求也经由Native转发，
为什么要采用这种技术方案呢？主要原因是小程序的管控限制，比如不能直接操作DOM树、页面跳转等管控措施，更好地形成自己的生态闭环。
现在我们已经对小程序运行环境的基本组成有了一些了解，下面我就从开发者工具分析破解、文件解读和架构流程图解这三个层面来讲述小程序运行环境的具体知识点。
微信开发者工具分析破解
我们先从微信开发者工具分析破解讲起。
首先，我们从微信开发者工具中打开官方提供的小程序demo项目：
从编辑栏和文档中，我们可以知道一个页面的组成结构存在四种文件格式，我们来看下是哪四种格式呢？
.js后缀文件表示当前页面逻辑
.wxml 后缀文件是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构
.wxss 后缀文件用于表示一套样式语言，用于描述 WXML 的组件样式
- .json 后缀文件表示是页面的配置原则
这些是我们大部分开发者看到或知道的一些表面内容。你可能会问，什么是深层次的内容呢？下面我们就来一一分析。
刚才我们也讲到了小程序中存在逻辑层和渲染层，那怎么在开发者工具中发现它呢？
鼠标点击 微信开发者工具–》调试–》调试微信开发者工具
你可以拿出鼠标按照这样的顺序来操作，点击微信开发者工具，然后点击调试，点击调试微信开发者工具。之后就会弹出这样一个页面：
可以看到我做了两处标记，第一处标记的webview是渲染层，每个页面src对应一个地址，第二处标记的webview就是逻辑层。
仅仅是这样一个页面，我们是没办法直接查看webview中的具体内容的，还需要一些操作。你可以在刚才打开的控制台Console中输入找到对应标签，查看对应的webview：
document.getElementsByTagName('webview')
再通过这个命令查看具体的webview内容：
document.getElementsByTagName('webview')[0].showDevTools(true,null)
如果你直接打开对应的dom树，第一个webview展示的就是渲染层相关信息：
比如从这张图中我们就可以看到这个页面渲染层所依赖的一些文件和一些方法，通过结果论来推断这些文件从何而来有何作用。
而对于service逻辑层的webview，可以直接在开发者工具右下方控制台Console输入document，这样就能查看了：
经过上面的介绍，你就能知道，通过dom树和source资源可以看出加载的一些本地文件资源。那么接下来，我再告诉你如何找到这些文件的出处，包含文件本身的引用和代码执行返回的结果。
我们从刚才那张图中看到script引入了一些WA开头的文件，这些文件其实就是小程序运行时核心的基础库文件了，我们在控制台输入openVendor()命令，会自动弹出对应的文件框：
这些.wxvpkg后缀文件就是微信基础库的版本文件，通过相关工具解压后可以看到文件内容格式：
需要特别注意的是，还存在两个wcc和wcsc可执行文件，这两个文件有什么作用呢？
先来说说wcc文件，wcc 将微信小程序设计的一套wxml标签语言，用于构建出页面结构，转为WebView可以理解的标签，毕竟渲染层还是运行在webview中，我们可以通过一张图来看下它的编译流程。
本章节主要从开发者工具分析破解、核心文件解读和架构流程图解这三个层面来加深对小程序运行原理的理解。
小程序运行环境
根据微信小程序开发文档可以得知小程序在三端的运行环境场景：
iOS ：小程序逻辑层的 JavaScript 代码运行在 JavaScriptCore 中，视图层是由 WKWebView 来渲染的，环境有 iOS 12、iOS 13 等；
Android：小程序逻辑层的JavaScript 代码运行在 V8 中，视图层是由自研 XWeb 引擎基于 Mobile Chrome 内核来渲染的；
开发工具：小程序逻辑层的JavaScript 代码是运行在 NW.js 中，视图层是由 Chromium Webview 来渲染的。
从小程序在三端中的运行环境可以看出来，它们存在逻辑层和渲染层之间的交互，具体是如何交互的呢？我们可以从渲染层和逻辑层之间的通信模型来找答案：
从这张图中，我们可以看出小程序采用了一种较为合适的技术方案，实现渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView进行渲染，逻辑层采用JsCore线程运行JS脚本。当一个小程序存在多个界面时，渲染层就会存在多个WebView线程，这两个线程之间的通信会经由微信客户端来做中转，逻辑层发送的网络请求也经由Native转发，
为什么要采用这种技术方案呢？主要原因是小程序的管控限制，比如不能直接操作DOM树、页面跳转等管控措施，更好地形成自己的生态闭环。
现在我们已经对小程序运行环境的基本组成有了一些了解，下面我就从开发者工具分析破解、文件解读和架构流程图解这三个层面来讲述小程序运行环境的具体知识点。
微信开发者工具分析破解
我们先从微信开发者工具分析破解讲起。
首先，我们从微信开发者工具中打开官方提供的小程序demo项目：
从编辑栏和文档中，我们可以知道一个页面的组成结构存在四种文件格式，我们来看下是哪四种格式呢？
.js后缀文件表示当前页面逻辑
.wxml 后缀文件是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构
.wxss 后缀文件用于表示一套样式语言，用于描述 WXML 的组件样式
- .json 后缀文件表示是页面的配置原则
这些是我们大部分开发者看到或知道的一些表面内容。你可能会问，什么是深层次的内容呢？下面我们就来一一分析。
刚才我们也讲到了小程序中存在逻辑层和渲染层，那怎么在开发者工具中发现它呢？
鼠标点击 微信开发者工具–》调试–》调试微信开发者工具
你可以拿出鼠标按照这样的顺序来操作，点击微信开发者工具，然后点击调试，点击调试微信开发者工具。之后就会弹出这样一个页面：
可以看到我做了两处标记，第一处标记的webview是渲染层，每个页面src对应一个地址，第二处标记的webview就是逻辑层。
仅仅是这样一个页面，我们是没办法直接查看webview中的具体内容的，还需要一些操作。你可以在刚才打开的控制台Console中输入找到对应标签，查看对应的webview：
document.getElementsByTagName('webview')
再通过这个命令查看具体的webview内容：
document.getElementsByTagName('webview')[0].showDevTools(true,null)
如果你直接打开对应的dom树，第一个webview展示的就是渲染层相关信息：
比如从这张图中我们就可以看到这个页面渲染层所依赖的一些文件和一些方法，通过结果论来推断这些文件从何而来有何作用。
而对于service逻辑层的webview，可以直接在开发者工具右下方控制台Console输入document，这样就能查看了：
经过上面的介绍，你就能知道，通过dom树和source资源可以看出加载的一些本地文件资源。那么接下来，我再告诉你如何找到这些文件的出处，包含文件本身的引用和代码执行返回的结果。
我们从刚才那张图中看到script引入了一些WA开头的文件，这些文件其实就是小程序运行时核心的基础库文件了，我们在控制台输入openVendor()命令，会自动弹出对应的文件框：
这些.wxvpkg后缀文件就是微信基础库的版本文件，通过相关工具解压后可以看到文件内容格式：
需要特别注意的是，还存在两个wcc和wcsc可执行文件，这两个文件有什么作用呢？
先来说说wcc文件，wcc 将微信小程序设计的一套wxml标签语言，用于构建出页面结构，转为WebView可以理解的标签，毕竟渲染层还是运行在webview中，我们可以通过一张图来看下它的编译流程。
