在做C#的时候，反编译查看别人代码是基操了，最近想做几个自己的微信小程序，在学习别人业务的时候自然也想看看他们的代码大概是什么样的，所以翻出了早年没存档的文件，虽然现在一般都用taro或者wepy来做了，但是至少也可以拆包看看别人大概是怎么设计和制作的，mark一下流程。

1.获取小程序的 .wxapkg 文件

.wxapkg文件是小程序的打包文件，存储在微信缓存目录中。

默认路径 C:\Users\<用户名>\AppData\Local\Tencent\WeChat\WeChat Files\<随机字符>\Applet

.wxapkg 文件通常以 MD5 加密形式命名，可以按文件修改时间找到最新的小程序包。

nixiang_01

2.下载 WxappUnpacker

克隆 WxappUnpacker 到本地（俺的github里有）

进入解压后的文件夹 

cd wxappUnpacker
npm install

3.解包小程序

在终端中运行解包命令

node wuWxapkg.js <wxapkg文件路径>

等待解包完成，输出文件将保存在当前目录中

查看解包结果：

解包完成后，工具会生成一个文件夹，包含以下内容：

  • .wxml 文件：页面结构。
  • .wxss 文件：样式表。
  • .js 文件：逻辑代码。
  • 其他资源文件：图片、字体等。

wuConfig.js 文件49行有个地方需要修改，要不报错,需要加一个subPackage.pages 的容错：

if(subPackage.pages) {
    for (let page of subPackage.pages) {
        let items = page.replace(root, '');
        newPages.push(items);
        let subIndex = pages.indexOf(root + items);
        if (subIndex !== -1) {
            pages.splice(subIndex, 1);
        }
    }
}

4.优化解包代码

解包后的小程序代码可能经过压缩或混淆。使用 Prettier 进行代码美化：

npx prettier --write "解包后的文件路径"

打开之后大概是这样的
nixiang_03

弄完之后发现教程很多，四舍五入这算水了一篇，困了不深写了。。。