1.微信小程序反编译获取源码
2.TSLint 和 ESLint 是码分怎么融合在一起的
3.JavaScript AST 抽象语法树
4.利用微信电脑最新版 反编译微信小程序 无需root
5.JS安全之路：用JS对JS代码混淆加密
6.AST详解与运用

微信小程序反编译获取源码

       了解微信小程序的运行机制吗？本文将教你如何反编译微信小程序，探索其代码实现。码分

       开始前，码分请确保你已安装最新版的码分微信电脑版。打开它，码分选择你想探索的码分jsp网上购物系统源码小程序，随意操作几下。码分

       接着，码分找到微信电脑版的码分文件夹，路径通常为 C:\Users\你的码分用户名\Documents\WeChat Files\Applet，将后缀名为 .wxapkg 的码分文件复制到D盘。

       准备就绪，码分反编译之旅正式启程。码分首先，码分创建一个文件夹整理存放反编译文件，码分你可以在百度云盘找到文件包，链接：pan.baidu.com/s/1bANDbv... 提取码：tabi。

       安装nodejs运行环境，并添加环境变量。访问官网 nodejs.org/zh-cn/download/，遵循步骤完成安装。安装成功后，在cmd中输入 node -v，显示版本号，如 v.6.3，表示安装完成，npm 亦为其自带。

       接下来，安装反编译所需依赖。在cmd中，以管理员身份运行，输入 cd 云盘下载的反编译文件夹路径，如 C:\Users\你的用户名\Desktop\wxappUnpacker。然后依次安装以下依赖：npm install esprima，npm install css-tree，npm install cssbeautify，npm install vm2，npm install uglify-es，npm install js-beautify。确保每个步骤都成功执行。

       安装完成后，文件夹内将多出一个 node_modules 文件夹，这是反编译环境的一部分。返回cmd界面，输入 node .\wuWxapkg.js 并指定 wxapkg 文件位置，例如 D:\__APP__.wxapkg。稍等片刻，反编译后的文件将出现在指定位置。

       最后一步，fresco源码使用微信开发者工具导入反编译后的文件，你将能直接查看和编辑代码，至此，反编译过程圆满结束。

TSLint 和 ESLint 是怎么融合在一起的

       Eslint 能够对 JavaScript 代码进行静态检查，涵盖逻辑错误和代码格式问题。其工作原理是将代码解析成抽象语法树（AST），然后基于 AST 检测问题。

       同样，Tslint 也是一款静态检查工具，用于检测 TypeScript 代码中的逻辑错误和代码格式问题，其原理也是基于 AST。

       既然两者都基于 AST 且功能相似，为何不将它们合并呢？

       最终，Tslint 被整合进了 Eslint，Tslint 被标记为废弃。

       然而，两者毕竟基于不同的 AST，且 Tslint 中包含一些类型检查的逻辑，这是 Eslint 所不支持的。那么，它们是如何融合的呢？接下来，我们一起来探究。

       不同的 AST

       Eslint 使用 espree 作为自己的解析器，并生成相应的 AST。

       Typescript 和 Babel 也都有各自的解析器和相应的 AST。

       这些 AST 之间存在怎样的关系呢？

       最早的解析器是 esprima，它参考了 Mozilla 浏览器 SpiderMonkey 引擎的 AST 标准，并进行了扩充，形成了 estree 标准。

       后续的许多解析器都是对 estree 标准的实现和扩展，如 esprima、espree、babel parser（babylon）、acorn 等。

       当然，也有不是 estree 标准的，如 typescript、terser 等的解析器。

       它们之间的关系如图所示：

       esprima 和 acorn 都是 estree 标准的实现，而 acorn 支持插件机制来扩充语法，因此 espree 和 babel parser 是直接基于 acorn 实现的。

       terser、typescript 等则是另一套。

       因此，对于 JavaScript 的 AST，我们可以简单划分为两类：estree 系列、非 estree 系列。twitch 源码

       可以使用 astexplorer.net 工具来可视化地查看不同解析器产生的 AST。

       espree 就是 Eslint 自己实现的解析器，但它主要进行代码的逻辑和格式的静态检查，在新语法的实现进度上不如 babel parser。因此，Eslint 支持解析器的切换，可以在配置不同的解析器来解析代码。

       配置文件中可以配置不同的解析器，并通过 parserOptions 来配置解析选项。

       下面分别讲解 Eslint、typescript、babel、vue 等的解析器如何在 Eslint 中使用：

       而且，在单文件组件中的 JS 部分，还可以分别指定不同的解析器。

       感觉有点晕吗？typescript、babel、vue 等的解析器都有相应的用于 Eslint 的版本。其实想想也很正常，因为 lint 是基于 AST 的，如果不能解析，那么如何进行 lint，所以需要支持解析器的扩展和切换。

       但是，解析器之后的 AST 可能不同，那么 lint 的规则实现也不同。为了复用规则，大家还是尽量往 estree 标准上靠比较好。

       Tslint 和 Eslint 的融合也是这样的思路，下面我们来详细了解一下。

       Tslint 融合进 Eslint

       Tslint 是一个独立的工具，基于 TypeScript 的解析器来解析代码，并实现了基于该 AST 的一系列规则。

       如果要融合进 Eslint，那么如何融合呢？主要考虑的是 AST 如何融合，因为规则是基于 AST 的。

       例如，const a = 1; 这段代码，estree 系列的 AST 是这样的：

       而 TypeScript 的 AST 是这样的：

       由于 AST 不同，那么基于 AST 的规则肯定也要有不同的实现。

       如何融合呢？转换！把一种 AST 转成另一种 AST 就行了。

       没错，@typescript-eslint/parser 中确实也是这么做的，它把 TypeScript 的 AST 转换成 estree 的 AST（当然，对于类型部分，estree 中没有，就保留了该 AST，fst源码但加上了 TS 前缀）。这样，就能够用 Eslint 的规则来检查 TypeScript 代码中的问题。

       下面简单看一下 @typescript-eslint/parser 的源码：

       我简化了一下，是这样的：

       首先通过 TypeScript 的解析器将源码解析成 AST，然后转换成 estree 的，并记录了 estree node 和 TypeScript node 的映射关系，通过两个 map 来保存。

       具体的转换过程，其实就是遍历 TypeScript 的 AST，然后创建新的 estree 的 AST。

       其中，对于 estree 中没有的类型相关的 AST，则直接复制，并在 AST 名字前加个 TS。

       这样，就把 TypeScript 解析器产生的 AST 转成了 estree 的。

       既然 AST 统一了，那么 Eslint 的规则就可以用来 lint TypeScript 代码了。

       但是对于一些类型的部分，还是需要用 TypeScript 的 API 来检查 TypeScript 的 AST 怎么办呢？

       还记得我们保存了两个 map 吗？estree node 到 TypeScript node 的 map，还有反过来的 map。这样，需要用到 TypeScript 的 AST 的时候，再映射回去就行了：

       Eslint 的自定义解析器的返回结果中，除了有 ast，还支持返回 services，这是用于放置一些其他信息的，比如这里用到的 map，还有 TypeScript 的 program 的 API（比如 program.getTypeChecker 这种）。需要的时候就可以从 estree 的 ast 再映射回 TypeScript 的 ast 了。

       通过把 TypeScript AST 映射成 estree AST，达到了复用 Eslint 规则的目的，并保存了节点映射关系和一些操作 TypeScript AST 的 API，可以基于这些单独做 TypeScript 相关的 lint。完美地融合到了一起。

       可以把这种融合用“求同存异”来总结：

       总结

       JavaScript 有不同的解析器，分为 estree 系列、非 estree 系列：

       Eslint 支持解析器的切换，可以在 babel parser、vue template parser、typescript 和 espree 中切换，当然也可以扩展其他解析器。

       Tslint 是一个基于 TypeScript 解析的独立工具。它和 Eslint 都是基于 AST 检查代码中逻辑和格式错误的工具，后来进行了融合。

       为了复用基于 estree 的一些规则，@typescript-eslint/parser 把 TypeScript node 转成了 estree node，smarty源码但依然保留了映射关系和一些操作 TypeScript ast 的 API。

       这样基于 estree AST 的规则可以正常运行，基于 TypeScript AST 的规则也可以映射回原来的 TypeScript node 然后运行。

       通过这种方式，完美地把 Eslint 和 Tslint 融合在一起。还是挺巧妙的。

JavaScript AST 抽象语法树

       本文将深入探讨抽象语法树（AST）在JavaScript编译过程中的应用。首先，让我们对AST进行简要介绍。

       AST是源代码抽象语法结构的树状表示形式。在计算机科学中，它由Wikipedia定义为：“一种计算机科学中的抽象语法树（AST），或仅称为语法树，是编程语言源代码的树形表示形式。”

       编译原理中，代码通常被映射为AST，这个树定义了代码的结构。在JavaScript的编译过程中，编译器会将源代码转换为AST。通过对AST的处理，编译器能够实现对代码的分析、优化等操作。例如，webpack、babel、eslint等工具类库都依赖于AST进行代码分析。

       接下来，让我们看看AST的结构。通过AST Explorer，可以实时解析和查看JavaScript的AST。AST的结构会因不同解析器而异。以Esprima为例，其语法树结构文档中列出了多种类型，包括表达式、声明、语句等。

       常用的JavaScript解析器有多种，例如Esprima、ESTree、Acorn等，它们各有特点和速度优势。对比这些解析器的性能，可以参考Speed Comparison。

       AST的应用范围广泛，几乎涉及任何对代码进行处理的场景。例如，编译器、代码压缩、代码混淆、代码优化、所有的lint工具、打包构建工具及其插件等，都与AST息息相关。

       总结而言，AST是编程语言源代码结构的树状表示形式，它在编译过程中发挥着重要作用，能够用于代码分析、优化等操作。从技术的角度来看，AST的应用场景几乎无处不在，理解AST有助于提升对代码处理工具的使用效率。

       若想了解更多关于AST的内容，欢迎访问个人博客front-ender.cn。感谢阅读！

利用微信电脑最新版 反编译微信小程序 无需root

       一、引言

       微信小程序开发过程有时会显得冗长，但近期发现了利用微信电脑最新版获取小程序源码的新途径。通过GitHub上的反编译工具，可以轻松获取wxapkg文件，进而实现反编译。本文将简要介绍操作步骤。

       二、wxapkg解析

       微信小程序在云端运行，而实际执行则需从云端下载wxapkg文件至本地，再利用本地机制运行。要找到小程序的源文件包，可通过查看微信电脑版打开小程序后的目录。

       电脑运行小程序后目录结构示例：C:\Users\{ { 用户名}}\Documents\WeChat Files\Applet\{ { 小程序ID}}\{ { 随机数}}\__APP__.wxapkg。请注意，仅在使用支持小程序的微信电脑版时适用。

       三、环境准备

       1. 需安装node.js运行环境，若未安装，请先行下载并安装。

       2. 获取反编译脚本，GitHub上的qwerty大神提供了适用于node.js的版本。

       3. 选择安卓模拟器（或真实设备需root）。

       四、具体操作流程（以电脑版微信为例）

       1. 分享小程序至电脑版微信。

       2. 点击打开。

       3. 导出wxapkg文件。

       4. 将wxapkg文件复制至特定路径，然后在该路径下开启Powershell窗口。

       5. 安装脚本所需的依赖：esprima、css-tree、cssbeautify、vm2、uglify-es、js-beautify、escodegen。

       6. 执行反编译脚本：node wuWxapkg.js。

       7. 若无错误提示，小程序源码即可在微信开发者工具中打开。

       五、总结

       当前的wxapkg加密程度可能无法满足专业需求，但对于学习和交流仍具价值。随着技术进步，此方法可能不再适用。趁现在，利用此方法获取源码，对于开发者来说是一次宝贵的学习机会。尽管源码获取相对容易，但小程序源码安全问题仍需重视。开发者们通常会将关键逻辑代码封装于单一文件中，以增加解读难度。实际上，小程序文件转换过程为Wxml转换为Html、Wxml转换为JS、Wxss转换为Css，最终形成与wx格式一致的二进制文件。

JS安全之路：用JS对JS代码混淆加密

       JS代码安全之路：用JS对JS代码混淆加密

       在众多JavaScript（JS）应用场景中，代码的安全性愈发重要。本文将为您详细介绍如何通过JS代码混淆加密技术，来保护您的应用代码，防止被逆向分析、复制或恶意修改。我们将以实例讲解一系列混淆加密技术，包括但不限于：

       方法名转义和转码

       成员表达式转为立即执行函数表达式（IIFE）

       函数标准化

       数值混淆

       布尔型常量值混淆

       二进制表达式转为调用表达式

       字符串转Unicode

       局部变量变形

       屏蔽输出语句

       同时，我们还将探讨针对代码的防逆向措施，如无限断点、时间差检测等反调试方案。对于更专业的混淆加密，我们将介绍JShaman这一平台及其功能。最后，我们还将提供字节码加密技术的简介，虽然它在实际应用中可能较为局限。

       为什么要对JS代码进行混淆加密

       随着JS在不同领域的广泛应用，代码暴露的风险也随之增加。前端应用中，JS代码直接暴露在浏览器中，任由访问者查看。这可能导致代码被分析、复制或用于不当用途，引发安全问题。更进一步，随着NodeJS等后端应用的兴起，JS应用的范围更加广泛，代码安全问题愈发重要。

       如何让JS代码变得更安全

       为了保护代码安全，我们采用混淆加密技术，使代码变得难以阅读和理解。通过混淆加密，代码可以保持可执行性，同时对第三方用户来说，变得不可读、不可理解、不可修改、不可还原。

       JS代码混淆加密的技术实现

       混淆加密的核心在于对JS源码进行转换和操作，以生成面目全非的代码。这一过程涉及词法分析、语法分析、AST（抽象语法树）操作、以及最终的代码重建。我们将使用JS编程语言本身，通过esprima、babel等工具，实现对JS代码的混淆加密。

       代码混淆加密的步骤

       将JS代码转换为AST

       在AST中执行关键混淆加密操作，如字符数组化、字符加密、平展控制流、僵尸代码值入、反调试埋雷、花指令插入等

       重建AST为混淆后的JS代码

       通过这些步骤，我们能够生成高度混淆的代码，使其对非专业开发者难以理解，从而提升代码安全性。

       案例演示：用JS实现混淆加密

       以esprima为例，我们演示如何通过AST操作实现JS代码混淆。具体步骤包括：

       使用esprima将JS代码转换为AST

       遍历AST节点，执行混淆加密操作

       使用escodegen将操作后的AST重建为JS代码

       通过实例代码展示，我们能够直观地看到混淆前后的代码差异，以及混淆操作的具体实现。

       高级安全措施：无限断点与时间差检测

       除了代码混淆，我们还能够通过添加无限断点和时间差检测等反调试措施，进一步提升代码安全。这些措施能够有效阻止代码被调试和分析，增强安全性。

       专业级混淆加密：JShaman

       在本文中，我们介绍了JS代码混淆加密的基础知识和实现方法。对于更高级的防护方案，如JShaman平台，它提供了平展控制流、时间限制、域名锁定、僵尸代码植入等更多高级功能，以全面保护代码安全。

       字节码加密技术的简介

       字节码加密技术在理论上可行，但其通用性较差，仅适用于特定场景。在NodeJS环境中，我们能够通过V8引擎生成字节码，实现代码的加密运行。虽然这为代码提供了额外一层保护，但在实际项目中，推荐采用更为通用和成熟的混淆加密技术。

       本文旨在提供JS代码混淆加密的基础知识和实践经验，希望对您在保护代码安全方面有所启发。通过结合不同技术和策略，您可以构建出更为安全的JS应用。感谢您阅读本文，期待您的实践探索。

AST详解与运用

       了解AST之前,我们先来简单陈述一下JavaScript引擎的工作原理:从上图中我们可以看到,JavaScript引擎做的第一件事情就是把JavaScript代码编译成抽象语法树,于是就有了本文对AST抽象语法树的浅析.

       我们都知道,在传统的编译语言的流程中,程序的一段源代码在执行之前会经历三个步骤,统称为"编译":抽象语法树（abstract syntax code，AST）是源代码的抽象语法结构的树状表示，树上的每个节点都表示源代码中的一种结构，之所以说是抽象的，是因为抽象表示把js代码进行了结构化的转化，转化为一种数据结构。这种数据结构其实就是一个大的json对象，json我们都熟悉，他就像一颗枝繁叶茂的树。有树根，有树干，有树枝，有树叶，无论多小多大，都是一棵完整的树。

       简单理解,就是把我们写的代码按照一定的规则转换成一种树形结构。

       AST的作用不仅仅是用来在JavaScript引擎的编译上，我们在实际的开发过程中也是经常使用的，比如我们常用的babel插件将 ES6转化成ES5、使用 UglifyJS来压缩代码 、css预处理器、开发WebPack插件、Vue-cli前端自动化工具等等，这些底层原理都是基于AST来实现的，AST能力十分强大， 能够帮助开发者理解JavaScript这门语言的精髓。

       我们先来看一组简单的AST树状结构:

       经过转化,输出如下AST树状结构:

       我们可以看到，一个标准的AST结构可以理解为一个json对象，那我们就可以通过一些方法去解析和操作它，这里我们先提供一个在线检测工具,大家可以自行去体验: esprima.org/demo/parse...

       AST编译流程图:

       我们可以看到,AST工具会源代码经过四个阶段的转换：

       词法分析scanner

       parser生成AST树

       traverse对AST树遍历,进行增删改查

       generator将更新后的AST转化成代码

       Babel插件就是作用于抽象语法树。

       Babel 的三个主要处理步骤分别是： 解析（parse），转换（transform），生成（generate）。

       vue中AST主要运用在模板编译过程.

       vue中的模板编译主要分为三个步骤:

       解析器要实现的功能就是将模板解析成AST，我们这里主要来分析一下代码解析阶段，这里主要运用的是parse()这个函数,事实上,解析器内部也分为好几个解析器,比如HTML解析器、文本解析器以及过滤解析器，其中最主要的就是HTML解析器。HTML解析器的作用就是解析HTML，它在解析HTML的过程中会不断触发各种钩子函数，我们来看看代码实现：

       举个例子:

       当上面这个模板被HTML解析器解析时,所触发的钩子函数依次是:start、chars、end。

       所以HTML解析器在实现上是一个函数，它有两个参数----模板和选项，我们的模板是一小段一小段去截取与解析的，所以需要不断循环截取，我们来看看vue内部实现原理：

       以上就是vue解析器生成AST语法树的主流程了，代码细节的地方还需要自己去解读源码，源码位置:\vue\packages\weex-template-compiler\build.js

       AST抽象语法树的知识点作为JavaScript中(任何编程语言中都有ast这个概念,这里就不过多赘述)相对基础的，也是最不可忽略的知识，带给我们的启发是无限可能的，它就像一把螺丝刀，能够拆解javascript这台庞大的机器，让我们能够看到一些本质的东西，同时也能通过它批量构建任何javascript代码。

       小时候梦想改变世界，如今我们可以用自己写的程序，构建出我们所生活的网络世界，丰富多姿。

       借用一句歌词: 我还是从前那个少年，没有一丝丝改变。时间只不过是考验，种在心中信念丝毫未减 。希望大家能够在软件开发的路途上坚定信念，越走越远.....