WXAPKG 解包后如何提取页面逻辑?

前天小程序分发下载执行包,我也下载了一些,用来学习。

按照我的规划,这部分的内容整体会分为4~5次推送完成,首先是配置的提取和页面逻辑的提取,这部分会比较快,很容易就能提取出来,也最先讲,其次是 WXSS 的提取,这部分是相对来说难一些,但是比页面结构提取还是要简单一些的,最后则会更新如何提取页面结构的部分。页面结构部分最终我可能会给出一个函数,通过执行这个函数,就可以提取小程序中的页面。

话不多说,我们开始今天的内容。

我们的页面逻辑在哪?

解压完小程序后,我们可以看到解压出来的程序里有这几个文件。当然,你解压的小程序可能是有所不同的。

但是一定会有的有以下四个:

page-frame.html:存放了我们的页面结构的文件,整个小程序的 WXML 都会处理后放入这个文件,比如你可以看下截图

app-config.json:其实是我们小程序根目录的app.json,处理后就变成了app-config.json。格式化后的代码如下

pages:页面样式存放目录,实际上是将我们的 wxml 处理后,将 wxss 放在这里。

app-service.js:页面逻辑所在位置,我们等下就是要解析这个。

如何看 app-service.js

小程序的App-Service.js有两种状态,一种是没有进行 minify 处理的,另外一种是已经进行了 minify 处理过的。

没有处理过的

处理过的

两种文件无论是否经过 minify 处理,我们都一视同仁,对其进行格式化处理。

这里我使用的是 BeJSON 的 JS 格式化工具(www.bejson.com/jshtml_format/),你自己可以选择合适的使用。

将 app-service.js 文件的代码复制到这里,

然后点击「格式化」,你就可以得到处理后的文件。

将这些代码复制回app-service.js文件中。

找到 app-service.js 文件中的页面逻辑文件布局

首先,我们要说明一下这个文件的加载逻辑,这样有助于你理解如何区分哪些代码是哪个文件的。

在app-service.js文件中,小程序优先加载各个依赖库文件,所以你在最上面看到的都是小程序用到的依赖库,如果你的小程序对此不是特别的依赖,可以不用看。

然后加载的是app.js,也就是我们小程序开发时根目录下的app.js,最后是小程序各个页面的 js 文件,这个加载的顺序和 app-config.json 文件的加载顺序是一致的(这个文件的介绍你可以看看我今天的第二篇推文)。

找找页面逻辑

如果你把所有的函数都压缩起来,你会发现整个文件长这个样子:

我们可以看出,整个文件的关键是 这个函数,我们只要找到这个函数,就能找到我们要的文件了。

我们再打开其中一个看看

在去除了外层函数的包裹和声明后,小程序的app对象一下就出现在了我们的眼前。

同样的,我再找个 page 的定义也看一下。

同样的,我们的 Page 对象也能很轻松的找到。

剩下的就是,打开我们要查看的页面的定义,查看具体的函数代码了。

总结

如何找到小程序的页面逻辑?

解包

找到 app-service.js 文件,将其代码进行格式化,此处推荐 BeJSON 的格式化工具

找到 app-service.js 文件中的 函数,这个函数的中会包含我们要查询的库文件、应用文件和页面文件的页面逻辑部分。

此文章仅用做学习!

本文来自企鹅号 - 西秦说云媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏漫漫前端路

vue-cli 3.0 下发布一个 TypeScript 组件

vue-cli 3.0 提供了一系列功能,包括对 Babel, TypeScript, ESlint, PWA 等开箱即用的支持,同时,它也提供了一个 CLI ...

1062
来自专栏Python小屋

Python批量导入图片生成能治疗颈椎病的HTML5版课件

本文要点:Python文件操作,HTML5的figure元素和CSS3属性的用法。 说明:1):本文图片来自于相关阅读中Python批量导出多个PPT/PPTX...

2704
来自专栏Django中文社区

简单全文搜索

搜索是一个复杂的功能,但对于一些简单的搜索任务,我们可以使用 Django Model 层提供的一些内置方法来完成。现在我们来为我们的博客提供一个简单的搜索功能...

3166
来自专栏静晴轩

使用Ldoc给Lua生成文档

Ldoc介绍   Ldoc是一个Lua的文档生成工具,过去,比较常用的Lua生成文档的工具是LuaDoc,可惜作者自从2008年之后就再也没有发布过新的版本了...

2596
来自专栏性能与架构

手机浏览器中的 DevTools

ruda 是手机浏览器中的开发者工具,是一个JS插件,在自己的页面中引入即可 Eruda 的由来 Eruda 的作者以前在手机中进行页面开发时,感觉日志输出非...

3435
来自专栏北京马哥教育

理解Inode

inode是什么 理解inode,要从文件储存说起。 文件储存在硬盘上,硬盘的最小存储单位叫做”扇区”(Sector)。每个扇区储存512字节(相当于0.5...

2705
来自专栏桥路_大数据

nginx的安装和打点服务器配置

43311
来自专栏码生

shell 命令 干货

934
来自专栏性能与架构

Linux下完胜top的进程监控工具

top 是平时常用的进程监控工具,可以看到CPU、内存、系统负载、进程占用资源等信息 但 top 比较老了,htop 作为进程监控工具的后起之秀,不仅提供了t...

3336
来自专栏互联网软件技术

wangEditor-基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费(2)

1024

扫码关注云+社区