# miniprogram-to-vue3

**Repository Path**: ZHAOSEO/miniprogram-to-vue3

## Basic Information

- **Project Name**: miniprogram-to-vue3
- **Description**: 全自动化，微信小程序 wxapkg 包 源代码还原工具 再转vue3 代码
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-29
- **Last Updated**: 2025-12-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# miniprogram-to-vue3

全自动化微信小程序 `wxapkg` 包源代码还原工具，并转换为 Vue3/UniApp3 代码。

## 📦 项目简介

本项目是一个完整的工具链，包含两个核心子项目：

1. **wedecode** - 微信小程序反编译工具，将 `wxapkg` 包还原为小程序源代码
2. **miniprogram-to-vue3** - 小程序源码转换工具，将小程序代码转换为 Vue3/UniApp3 代码

## 🚀 工作流程

```
微信小程序 wxapkg 包
    ↓
[wedecode] 反编译
    ↓
小程序源代码 (JS/WXML/WXSS/JSON)
    ↓
[miniprogram-to-vue3] 转换
    ↓
Vue3/UniApp3 代码
```

## ✨ 功能特性

### wedecode - 反编译工具

- ✅ 支持小程序、小游戏还原
- ✅ 支持分包代码和插件代码还原
- ✅ 完美还原目录结构和源代码（JS/WXML/WXSS/WXS/JSON）
- ✅ 支持其他类型文件还原（媒体资源、wasm、workers 等）
- ✅ 代码美化输出
- ✅ 小程序包扫描
- ✅ 可视化 UI 操作
- ✅ 小程序自动解密
- ✅ 跨平台支持（Windows/MacOS/Linux）

### miniprogram-to-vue3 - 转换工具

- ✅ 将小程序源码转换为 Vue3/UniApp3（Vue3/Vite 版）
- ✅ 支持 WXML → Vue Template 转换
- ✅ 支持 WXSS → Vue Style 转换
- ✅ 支持 JS → Vue3 Composition API 转换
- ✅ 支持 Page 和 Component 转换
- ✅ 支持单个页面或整个项目转换

## 📋 前置要求

- Node.js >= 18
- pnpm（推荐）或 npm

## 🛠️ 快速开始

### 1. 安装依赖

```bash
# 安装根目录依赖
pnpm install

# 或分别安装子项目依赖
cd wedecode && pnpm install
cd ../miniprogram-to-vue3 && pnpm install
```

### 2. 反编译小程序（wedecode）

#### 方式一：全局安装使用

```bash
# 全局安装
npm i wedecode -g

# 启动可视化界面
wedecode ui

# 或命令行直接使用
wedecode ./your-app.wxapkg

# 指定输出目录
wedecode ./your-app.wxapkg --out ./output
```

#### 方式二：源码运行

```bash
cd wedecode
pnpm install
pnpm run start
# 或启动 UI
pnpm run ui
```

**命令参数：**

| 参数 | 说明 |
|------|------|
| `ui` | 启动本地可视化操作页面 |
| `<packages...>` | 包所在路径，可以是文件或目录 |
| `-o, --out <path>` | 产物输出路径，默认 `OUTPUT` |
| `--open-dir` | 编译后打开产物目录 |
| `--clear` | 清空旧产物 |
| `--px` | 使用 px 单位解析 CSS（默认 rpx） |
| `--unpack-only` | 仅解包，不反编译 |

### 3. 转换为 Vue3（miniprogram-to-vue3）

```bash
cd miniprogram-to-vue3

# 转换单个页面（页面文件路径，不带后缀名）
pnpm run build ./pages/index/index

# 转换整个项目（项目文件夹路径）
pnpm run build:project ./output
```

## 📁 项目结构

```
.
├── wedecode/                    # 小程序反编译工具
│   ├── src/                     # 源代码
│   ├── dist/                    # 编译产物
│   └── decryption-tool/         # 解密工具
│
├── miniprogram-to-vue3/         # 小程序转 Vue3 工具
│   ├── src/                     # 核心转换逻辑
│   ├── packages/                # 转换插件集合
│   │   ├── babel-preset-*/      # Babel 预设
│   │   ├── babel-plugin-*/      # Babel 插件
│   │   ├── posthtml-wxml2unitemplate/  # WXML 转换
│   │   └── ...
│   └── examples/                # 转换示例
│
└── README.md                    # 本文件
```

## 🔧 转换示例

### WXML 转换

**转换前：**
```xml
<view class="card-info" hidden="{{!isLogin || usrStatus === '20'}}" 
      style="background: url('http://{{imageRootUrl}}ab'cd'ef{{displayInfo.carBgBig + 'test123'}}')"
      bindtap="todCard">
</view>
```

**转换后：**
```vue
<view class="card-info" 
      :hidden="!isLogin || usrStatus === '20'" 
      :style="'background: url(\"http://' + imageRootUrl + 'ab\"cd\"ef' + (displayInfo.carBgBig + 'test123') + '\")'"
      @click="todCard">
</view>
```

### JS 转换

**转换前：**
```javascript
Page({
  data: {
    toastShow: true,
    userInfo: { class: 1, star: 0 }
  },
  onShow() {
    this.setData({ toastShow: false });
  }
});
```

**转换后：**
```javascript
import { onShow } from "@dcloudio/uni-app";
import { reactive } from "vue";

const state = reactive({
  toastShow: true,
  userInfo: { class: 1, star: 0 }
});

onShow(function() {
  state.toastShow = false;
});
```

## 🏗️ 技术原理

### wedecode 反编译流程

- 解密 `wxapkg` 包
- 解析包结构
- 还原 JS/WXML/WXSS/WXS/JSON 文件
- 代码美化输出

### miniprogram-to-vue3 转换流程

- **WXML → Template**: `posthtml-parser` → AST → transform → `posthtml-render` → Vue Template
- **WXSS → Style**: `postcss-parser` → AST → transform → `postcss-render` → Vue Style
- **JS → Script**: `@babel/parser` → AST → transform → `@babel/generator` → Vue3 Script

## ⚠️ 注意事项

1. **代码准确性**：由于 JS 代码的灵活性，转换后的代码可能不完全准确，建议转换后检查代码
2. **项目转换**：目前整个项目的转换功能仍在完善中，建议优先使用单个页面转换
3. **依赖检查**：转换后需要检查并安装相应的 Vue3/UniApp 依赖
4. **合法使用**：本工具仅用于学习、安全审计等合法用途，请遵守相关法律法规

## 📚 在线体验

- **miniprogram-to-vue3 在线转换**: http://jacksplwxy.tpddns.cn:81/home/miniprogram2vue3/

## 🔗 相关链接

- [wedecode GitHub](https://github.com/biggerstar/wedecode)
- [miniprogram-to-vue3 GitHub](https://github.com/xiaoyu-web-club/miniprogram-to-vue3)

## 🤝 贡献指南

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

## 📄 License

- **wedecode**: GPL-3.0-or-later
- **miniprogram-to-vue3**: MIT

## ⚖️ 免责声明

本工具仅限用于：
- 线上代码安全审计以便快速发现漏洞
- 学习反编译原理
- 合法的代码迁移需求

请遵守国家法律，严禁任何非法用途。若使用范围不在国家法律允许的范围内，造成的一切法律后果与作者无关。