如何获取小程序前端源码

  • 如何获取小程序前端源码已关闭评论
  • A+
所属分类:站长杂谈

如何查看他人的小程序前端源代码?

通过查看小程序的前端源代码,能够知道小程序的前端代码结构和样式

一、使用安卓模拟器获取到.wxapkg文件 

1、电脑端安装安卓模拟器(要求自带root权限)

我使用的是夜神模拟器,下载地址:https://www.yeshen.com/cn/download/fullPackage

2、打开安装好的安卓模拟器,并在模拟器中安装QQ、微信、RE管理器

QQ、微信在模拟器自带的应用商店里搜索下载安装即可

RE管理器的下载地址:https://pan.baidu.com/s/1PPBx08rNutXxhlMMJbuTpQ,下载好后直接拖拽进打开的模拟器窗口就会自动安装

3、在模拟器里打开微信,然后在微信中运行你想要获取的小程序

4、下载.wxapkg文件 

直接切回模拟器桌面,运行RE浏览器,来到目录 /data/data/com.tencent.mm/MicroMsg/.../appbrand/pkg/

下载该目录下的.wxapkg后缀的文件:一般小程序的文件不会太大,可以结合时间来判断,长按压缩所选文件,然后再将压缩好的包通过QQ发送到我的电脑

二、使用反编译脚本解包 wxapkg

1、安装nodejs

如果没有安装nodejs,请先安装一下,下载地址:https://nodejs.org/en/

2、下载反编译的脚本

这里提供一个Github上qwerty472123大神写的node.js版本的,地址:https://github.com/qwerty472123/wxappUnpacker

3、将反编译脚本复制到node命令行目录

打开nodejs命令窗口(Node.js command prompt)

打开node命令行之后,可以看到此时命令行所在的目录,把那几个反编译要用到的脚本放在该目录下(后缀.js .json的文件才是有用的文件)

4、在node命令窗口中依次安装如下依赖

npm install esprima

npm install css-tree

npm install cssbeautify

npm install vm2

npm install uglify-es

npm install js-beautify

npm install escodegen

5、解包

node wuWxapkg.js [-d] <files…> //files就是你想要反编译的文件名

例如:node wuWxapkg.js D:\wxapp\_-1465904499_11.wxapkg

6、获取源码

反编译之后的文件目录地址和反编译的文件地址是一样的,可在微信开发者工具中运行源文件

重点:

反编译过程中出现错误: $gwx is not defined和__vd_version_info__ is not defined

修改wxappUnpacker文件中的wuWxss.js

function runVM(name, code) {

// let wxAppCode = {}, handle = {cssFile: name};

// let vm = new VM({

//    sandbox: Object.assign(new GwxCfg(), {

//      __wxAppCode__: wxAppCode,

//      setCssToHead: cssRebuild.bind(handle)

//    })

// });

// vm.run(code);

// for (let name in wxAppCode) if (name.endsWith(".wxss")) {

//    handle.cssFile = path.resolve(frameName, "..", name);

//    wxAppCode[name]();

// }

let wxAppCode = {};

let handle = {cssFile: name};

let gg =new GwxCfg();

let tsandbox = {

$gwx: GwxCfg.prototype["$gwx"],

__mainPageFrameReady__: GwxCfg.prototype["$gwx"],  //解决$gwx is not defined

__vd_version_info__: GwxCfg.prototype["$gwx"],  //解决__vd_version_info__ is not defined

__wxAppCode__: wxAppCode,

setCssToHead: cssRebuild.bind(handle)

};

let vm =new VM({sandbox: tsandbox});

vm.run(code);

for (let namein wxAppCode) {

if (name.endsWith(".wxss")) {

handle.cssFile = path.resolve(frameName, "..", name);

wxAppCode[name]();

}

}

}

作者:高桥雪
链接:https://www.jianshu.com/p/9687994160f0
来源:简书