前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >奇思妙想:小程序wxapkg包一键运行至浏览器?

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

作者头像
薛定喵君
发布2021-07-19 16:00:11
8230
发布2021-07-19 16:00:11
举报
文章被收录于专栏:薛定喵君薛定喵君

如题所示,本文探讨的是如何将 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:

代码语言:javascript
复制
npm i wept -g

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

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

# 效果演示

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

# 参考资料

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021-07-16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • # 缘起
  • # 实现思路
  • # 效果演示
  • # 参考资料
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档