设为首页 - 加入收藏 织梦模板之家(Mubanzhijia.Com),专注织梦模板设计制作!
热搜: 安卓 电脑桌面壁纸 桌面壁纸 苹果5s
广告位
当前位置: 澳门金沙网上娱乐 > 澳门金沙 > IT资讯 >

澳门金沙娱乐微信小程序“反编译”实战:源码还原

2018-12-24 02:28 [IT资讯] 来源于:未知
导读:在上一篇文章《微信小程序反编译实战(一):解包》中,我们详细介绍了如何获取某一个小程序的.wxapkg包,以及分析了.wxapkg包的结构,最后通过脚本解压获取包中的文件:小程序编译后的代码文件和资源文件,但是由于这些文件大部分被混淆了,可读性很差,所以本

  在上一篇文章《微信小程序“反编译”实战(一):解包》中,我们详细介绍了如何获取某一个小程序的.wxapkg包,以及分析了.wxapkg包的结构,最后通过脚本解压获取包中的文件:小程序“编译”后的代码文件和资源文件,但是由于这些文件大部分被混淆了,可读性很差,所以本文将进一步分析,尽可能地把.wxapkg包的内容还原为“编译”前的内容。澳门金沙娱乐

  注:本文包含一部分源码分析,由于手机屏幕较小,阅读体验可能不佳,建议在电脑上浏览。

  特别感谢:下文使用的还原工具来自于 GitHub 上的开源项目wxappUnpacker,澳门金沙娱乐在此特别感谢原作者的无私贡献。

  我们知道,前端 Web 网页编程采用的是HTML + CSS + JS这样的组合,其中HTML是用来描页面的结构,CSS用来描述页面的样子,JS通常用来处理页面逻辑和用户的交互。类似地,在小程序中也有同样的角色,一个小程序工程主要包括如下几类文件:

  然而,根据上一篇文章介绍,对“知识小集”小程序的.wxapkg解包后得到如下文件:

  所以,我们先尝试分析一下从.wxapkg提取出来的各个文件内容的结构及其用途,然后介绍如何用脚本工具把它们一键还原为“编译”前的源码,并在微信开发者工具中跑起来。

  本节主要以“知识小集”小程序的.wxapkg解包后的源码文件为例,进行分析。

  小程序工程主要包括工具配置fig.json,全局配置app.json以及页面配置page.json三类 JSON 配置文件。其中:

  project.config.json主要用于对开发者工具进行个性化配置以及包括小程序项目工程的一些基础配置,所以它不会被“编译”到.wxapkg包中;

  app.json是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等;

  page.json用于对每一个页面的窗口表现进行配置,页面中配置项会覆盖app.json的window中相同的配置项。

  因此“编译”后的文件app-config.json其实就是app.json和各个页面的配置文件的汇总,它的内容大致如下:

  通过与原工程app.json和各页面配置page.json内容的对比,我们可以得出app-config.json汇总文件的简单整合规律,很容易把它拆分成“编译”前对应的各json文件。

  在小程序项目中JS文件负责交互逻辑,主要包括app.js,每个页面的page.js,开发者自定义的JS文件和引入的第三方JS文件,在“编译”后所有这些JS文件都会被汇总到app-service.js文件中,它的结构如下:

  在这个文件中,原有小程序工程中的每个JS文件都被define方法定义声明,定义中包含JS文件的路径和内容,如下:

  因此,我们同样很容易提取这些JS文件源码,澳门金沙娱乐并恢复至相应的路径位置中。当然,这些JS文件中的内容经过混淆压缩,我们可以使用UglifyJS这样的工具进行美化,但仍很难还原一些原始变量名,不过基本不影响正常阅读和使用。

  在小程序中使用WXML文件描述页面的结构,WXSS文件描述页面的样式。工程中有一个app.wxss文件用于定义一些全局的样式,会自动被import到各个页面中;另外每个页面也都分别包含page.wxml和page.wxss用于描述其页面的结构和样式;同时,我们也会自定义一些公共的xxxCommon.wxss样式文件和公共的xxxTemplate.wxml模板文件供一些页面复用,一般在各自页面的page.wxss和page.wxml中去import。

  当“编译”小程序后,所有的.wxml文件和app.wxss及公共xxxCommon.wxss样式文件的将被整合到page-freme.html文件中,而每个页面的page.wxss样式文件,将分别单独在各自的路径下生成一个page.html文件。

  相比其他文件,page-freme.html比较复杂,微信把.wxml和部分.wxss直接“编译”并混淆成JS代码放入上述文件中,然后通过调用这些JS代码来构造Virtual-Dom,进而渲染页面。

  $gwx用于通过JS代码生成所有.wxml文件,其中每个.wxml文件的内容结构都在$gwx方法中被定义好并混淆了,我们只要传给它页面的.wxml路径参数,即可获取到每个.wxml的内容,再简单加工一下即可还原成“编译”前的内容。

  在$gwx中有一个x数组用于存储当前小程序都有哪些.wxml文件,例如,“知识小集”小程序的x值如下:

  此时我们可以在Chrome中打开page-freme.html文件,然后在Console中输入如下命令,即可得到index.wxml的内容(输出一个JS对象,通过遍历这个对象即可还原出.wxml的内容)

  setCssToHead方法用于根据几段被拆分的样式字符串数组生成.wxss代码并设置到HTML的Head中,同时,它还将所有被import引用的.wxss文件(公共xxxCommon.wxss样式文件)所对应的样式数组内嵌在该方法中的_C变量中,并标记哪些文件引用了_C中数据。另外在page-freme.html文件的末尾,调用了该方法生成全局app.wxss的内容设置到Head中。

  因此,我们可以在每个调用setCssToHead方法的地方提取相应.wxss的内容并还原。

  此外,checkDeviceWidth方法顾明思议,用于检测屏幕的宽度,其检测结果将用于transformRPX方法中将rpx单位转换为px像素。

  rpx的全称是responsive pixel,它是小程序自己定义的一个尺寸单位,可以根据当前设备屏幕宽度进行自适应。小程序中规定,所有的设备屏幕宽度都为750rpx,根据设备屏幕实际宽度的不同,1rpx所代表的实际像素值也不一样。

  上面提到,每个页面的page.wxss样式文件,“编译”后将分别在各自的所在路径下生成一个page.html文件,每个page.html的结构如下:

  在该文件中通过调用setCssToHead方法将.wxss样式内容设置到Head中,所以同样地,我们可以根据setCssToHead的调用参数提取每个页面的page.wxss。

  小程序工程中的图片、音频等资源文件在“编译”后将直接被拷贝到.wxapkg包中,其原始的路径也保留不变,因此我们可以直接使用。

  在上一节,我们完成了.wxapkg包几乎所有文件内容的简要分析。现在我们介绍一下如何通过node.js脚本帮我们还原出小程序的源码。

  在这里需要再次感谢wxappUnpacker作者提供的还原工具,让我们可以“站在巨人的肩膀上”轻松地去完成“反编译”。它的使用如下:

  同时,作者还提供了一键解包并还原的脚本,你只需要提供一个小程序的.wxapkg文件,然后执行如下命令:

  此脚本就会自动将.wxapkg文件解包,澳门金沙娱乐并将包中相关的已被“编译/混淆”的文件自动地恢复原状(包括目录结构)。

  最后,我们在 微信开发者工具 中新建一个空小程序工程,并将上述还原后的相关目录文件导入工程,即可编译运行起来,如下图为“知识小集”小程序.wxapkg还原后的代码工程:

  本文详细分析了.wxapkg解包后的各文件结构,并介绍了如何通过脚本“一键还原”得到任意小程序的源码。

  对于一些简单的,且使用微信官方介绍的原生开发方式开发的小程序,用上述工具基本可以直接还原得到可运行的源码,但是对于一些逻辑复杂,或者使用WePY、Vue等一些框架开发的小程序,还原后的源码可能会有一些小问题,需要我们人肉去分析解决。

(编辑:admin)

网友评论
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
推荐文章
广告位
广告位
广告位

网站地图 | xml地图

友情链接:锘縮ssss鑻忚嫃鑻忚嫃鑻忔墍鎵鎵鎵鎵