通过反编译小程序来学习前端：wxappUnpacker

小程序开发时，会有4种文件：.wxss  .json  .wxs  .wxml。

正式上传到腾讯时，目录会被打包，使用时再发放给客户端。

这个文件包后缀是 .wxapkg。只要手机用过这个小程序，文件包就会缓存在手机内。

所以，要获得源码，要做的工作是 提取 + 拆解 这个包。

（一）提取

首先，需要一台root过的Android手机。

本人只有一台备用Android手机，不自带root功能，于是百度搜索 手机型号 + root。

随便挑了一款一键root软件（“某兔”），连接，USB调试模式，一键root......

文件包存放在系统文件夹，读写权限有限制，所以用Adb去操作。（某些机型自带高权限文件操作功能，可不用这个方法，无奈此机比较低端）

Adb 全称 Android Debug Bridge ，因为 Android 是基于 Linux 的，Adb用的也是Linux命令。

在“某兔”中，找到自带的Adb命令行功能。

例行先检查一下状态：

adb devices

输入后回车，显示出 List of devices attached，表明连接正常。

进入shell模式：

adb shell

此时，光标前面变为 shell@{你的手机型号}:/ $

进入root模式：

$ su

此时，光标前面变为 root@{你的手机型号}:/ #

$ cd /data/data/com.tencent.mm/MicroMsg/{User}/appbrand/pkg

cd指令，是change directory，即转到目标文件夹上进行操作。

{User} 为微信帐号唯一标识，是一串哈希码。

由于不知道自己的标识id，所以先cd到MicroMsg目录下，用 $ ls 命令，显示出有哪些文件夹，再cd进那个帐号文件夹

（上图登陆过两个微信帐户，因此有两个id文件夹）

在pkg文件夹下，用$ ls 命令，罗列出缓存的wxapkg

但此时，/data系统文件夹只可读，无法直接复制。

通过 cd .. 命令，回到根目录。输入：

$ mount -o remount,rw /data

remount是重新挂上文件系统，rw是改为read-write可读写模式。

此时，便可把pkg内的文件复制出去了：

$ cp /data/data/com.tencent.mm/MicroMsg/{User}/appbrand/pkg/{文件名}.wxapkg /mnt/sdcard

/mnt/sdcard是Android的储存卡目录，也就是可以在电脑里打开的那个盘。

（二）拆解

目前比较好的一个拆解的脚本是wxappUnpacker

基于node.js，此处跳过node.js的部署。

把wxappUnpacker下载后，在文件夹shift + 右键，调出cmd。

输入npm install回车，一次性安装所有依赖。

输入node wuWxapkg.js + 文件包路径（注意 / 开头的是绝对路径，没有的是相对路径）回车。

脚本自动拆解出四种后缀文件，再自动调用wuConfig.js  wuJs.js  wuWxml.js  wuWxss.js分别拆解。

最后得出的目录文件，就是开发者所创建的结构

（三）总结

提取出成熟的小程序源码来研究，有助于前端入门者对js css的掌握。

但遗憾的是，反编译后js源码，变量名大部分会被单字母取替，注释也会消失。

使得对代码的理解极其费事，但还是能从框架结构中，推理出主要功能的实现。