奇思妙想：小程序wxapkg包一键运行至浏览器？

Posted 2021-10-09 薛定喵君

如题所示，本文探讨的是如何将 wxapkg 小程序代码包运行至浏览器，也就是wxappUnpacker + wept 两个工具组合在一起会产生什么效果。

老粉丝应该都清楚前面一个是什么了，对于后面一个工具可能不太了解。

那么我们先来说说 wept 吧

缘起

记得之前一段时间曾经集中推过几篇文章，即：实现小程序编译运行环境系列。

而 wept 项目则是这个实现的一个典型方案，对于想要开发一个小程序运行时的公司或者个人(个人？能不能 hold 住 ಥ_ಥ) 来说是极具参考价值的。

这里先简要介绍一下 WEPT 项目(在博主刚开始接触小程序开发的时候就有耳闻，觉得挺厉害的)。

WEPT 是一个微信小程序实时开发环境，它的目标是为小程序开发提供高效、稳定、友好、无限制的运行环境。项目后台使用 node 提供服务完全动态生成小程序，前端实现了 view 层、service 层和控制层之间的相关通讯逻辑。支持 ios android Mac, Window 以及 Linux。

WEPT2.0 版本，支持运行微信小程序 小游戏基础库 2.9 后版本功能，同时支持实现 ios Android 三端统一运行环境。

总之就是很叼的样子~

有一次偶然在 wept 的 issue 里看到一个有意思的问题，就是有个同学问，可不可以支持小程序直接从 wxapkg 包启动运行，这个想法挺有意思的，简要说一下效果就是：拿到小程序的 wxapkg 源码包，执行一个命令之后，就可以直接在浏览器里看到小程序的界面，听上去就蛮好玩的吧。

下面我们来说一说如何实现吧。

实现思路

要说如何去实现这个一键从包运行到浏览器的效果其实也是可行的，说白了就是两个过程：
反向编译 + 正向编译

反向就不用多说了，主要是为了得到可以在开发者工具里正常编译的代码。正向呢，对于小程序的编译产物来说其实也不算是正向，因为目的是要运行到浏览器，所以这里的正向指的是把小程序源码编译为浏览器环境可识别的代码。

最终达到如下的编译目的：

因为两个过程都有工具，所以我们只要做个调包侠就可以了。。。下面我们就来试一试，简单写下就是分别调用两个工具。

我们可以预先安装好 wept：

npm i wept -g

然后就可以通过分包调用反编译及 wept 命令来实现从 wxapkg 包直接启动至浏览器端预览小程序界面了，是不是很酷。

至于效果呢，大部分内容其实还好，有些编译错误，不过不影响观赏。

效果演示

下面看看博主录制的演示视频吧。这里选用了微信官方的示例小程序。有兴趣的同学可以尝试其它小程序看看。

视频地址：https://www.bilibili.com/video/BV1SU4y137K6

参考资料

• wxappUnpacker
• wept 项目