实现微信小程序编译和运行环境系列(初始篇)

正文

后面我会通过10篇文章来整体描述一下从工具到破解到源码解析和原理到框架实现的处理流程

最开始的时候也在网上找了很多的资料，看了有一些人写的解析微信小程序架构的文章，从中学习了解了很多

但如果想模拟实现出来这么个东西 还是有蛮迷糊的，所以我想通过我们所实现的过程来一点点从现象 看本质来解析下微信小程序编译和运行原理

凡事对自己多点信心 多坚持下 多学习下，想想我们遇到的问题，当时感觉我 搞不定了 弄不了
最后随着时间的推移和认知的迭代问题总会慢慢消灭掉

本文将先通过全面解析微信开发者工具来知道那些基本的文件和内容组成一一讲述(从现象 看本质)

在此之前我们通过官方文档可以了解一些内容

• 整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）

• 小程序提供了自己的视图层描述语言 WXML 和 WXSS

• 基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统他们两个线程里运行

• 视图层使用WebView渲染，逻辑层使用JSCore运行， 视图层和逻辑层通过系统层的JSBridage进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，
  视图层把触发的事件通知到逻辑层进行业务处理

从上述说明中我们可以得知一些重要信息逻辑层（App Service）和 视图层（View） 以及两者之间的通信协调

下面通过微信开发工具来展示说明，小程序逻辑层的 javascript 代码是运行在 NW.js 中，视图层是由 Chromium 60 Webview 来渲染的
他们之间是通过webstock协议来通信的

以下我们主要是以mac环境为主

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

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

• .js 主要页面逻辑
• .wxml 页面结构，框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
• .wxss 是一套样式语言，用于描述 WXML 的组件样式。
• .json 页面配置按照『约定优于配置』的原则。

接下来我们先找到本机微信开发者工具应用包里面如图

我们后面分析的主要代码都在package.nw里面和core.wxvpkg

这些文件在后面实现过程中都会使用说明用途的

• js文件里面的内容主要是在页面和逻辑层的渲染用，后面将会看到
• core.wxvpkg是这个里面的核心文件破解这个包可以知道很多逻辑可以先给大家看下解压后包的结构

core.wxvpkg解压代码上传在unwxvpkg大家有兴趣可以自己先试试

接下来我们回到开发者工具中打开

微信开发者工具--》调试--》调试微信开发者工具

打开调试后我们可以看到的界面如下：

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

第一个对应的webview是渲染层的每个页面都对应一个地址

但逻辑层appservice只有一个不变的

下来我们可以看看这个webview里面是个什么东

如果我们直接把view层的webview标签改成iframe的话

可以看到微信就直接不在里面展示给你页面白屏了

如果你更改appservice的webview的话微信还会给你各种alert弹框，反正应该就是不想让你分析他的代码

点击确定消都消不了只能重新重启编译了 有点小恶心啊

居然不让我们正大光明的看，那我们只能搞一些旁门左道来破坏了

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

document.getElementsByTagName('webview')

可以看到对应的有4个webview,我们先要关注的是第一个webview因为你点开可以发现第一个对应的就是渲染层的webview

后面的几个可以先不关注，后续我们会详解