欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-04 23:03:31
小程序开发时,会有4种文件:.wxss .json .wxs .wxml。 正式上传到腾讯时,目录会被打包,使用时再发放给客户端。 这个文件包后缀是 .wxapkg。只要手机用过这个小程序,文件包就会缓存在手机内。 所以,要获得源码,要做的工作是 提取 + 拆解 这个包。 (一)提取 首先,需要一台 ......

小程序开发时,会有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进那个帐号文件夹

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

(上图登陆过两个微信帐户,因此有两个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分别拆解。

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

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

 

(三)总结

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

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

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

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