Analyzing and Decompiling WeChat Mini‑Program .wxapkg Files to Recover Source Code

In the previous article we extracted the .wxapkg package of a WeChat mini‑program and obtained the compiled files, which are heavily obfuscated; this article continues the analysis to reconstruct the pre‑compiled source.

Overview

Mini‑programs use the same front‑end trio as web development— HTML + CSS + JS —but the source consists of files with extensions .json , .wxml , .wxss and .js . After compilation these files are merged, minified and stored in the .wxapkg archive.

File Analysis

app-config.json

This file aggregates the global app.json and each page’s page.json . Its content can be split back into the original JSON configuration files by comparing with the original project structure.

{
  "page": {
    "pages/index/index.html": {
      "window": {
        "navigationBarTitleText": "知识小集",
        "enablePullDownRefresh": true
      }
    }
    // ...
  },
  "entryPagePath": "pages/index/index.html",
  "pages": ["pages/index/index", "pages/detail/detail", "pages/search/search"],
  "global": {
    "window": {
      "navigationBarTextStyle": "black",
      "navigationBarTitleText": "知识小集",
      "navigationBarBackgroundColor": "#F8F8F8",
      "backgroundColor": "#F8F8F8"
    }
  }
}

app-service.js

This JavaScript bundle contains all page scripts, the original app.js , and third‑party modules, each wrapped in a define call. By extracting each define("path/to/file.js", function(...){...}) block we can recover the original .js files and optionally beautify them with Uglify‑JS.

// Example of a define block
define("utils/util.js", function(require, module, exports, window, document, ...){
  "use strict";
  // ... source code ...
});

page-frame.html

This HTML file embeds the compiled .wxml and part of the .wxss as JavaScript. The core methods are $gwx (generates virtual DOM from a WXML path) and setCssToHead (injects CSS into the document head). By invoking $gwx("./pages/index/index.wxml") in the browser console we can retrieve the original WXML markup.

$gwx("./pages/index/index.wxml")

*.html and page‑wxss

Each page’s compiled CSS is inserted into a generated page.html via setCssToHead . Extracting the arguments of this call restores the original .wxss files.

Decompilation Scripts

The following Node.js utilities automate the restoration process:

node wuConfig.js <path/to/app-config.json> – splits app-config.json into app.json and individual page.json files.

node wuJs.js <path/to/app-service.js> – extracts each script from app-service.js and beautifies it.

node wuWxml.js [-m] <path/to/page-frame.html> – recovers all .wxml and global .wxss files.

node wuWxss.js <path/to/unpack_dir> – extracts page‑specific .wxss from generated page.html files.

node wuWxapkg.js [-d] <path/to/.wxapkg> – one‑click unpacking and reconstruction of the entire project.

These tools depend on uglify‑es , vm2 , esprima , cssbeautify , css‑tree and require Node.js.

Conclusion

The article demonstrates a complete workflow for analyzing a .wxapkg package, extracting its constituent files, and rebuilding a runnable mini‑program project. Simple native mini‑programs can be fully recovered, while those built with frameworks like WePY or Vue may need manual adjustments.

Future Work

Further articles will explore the dependency graph and loading logic of the mini‑program runtime, providing deeper insight into how the client parses and executes the .wxapkg bundle.