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

简介: 本文探讨的是如何将 wxapkg 小程序代码包运行至浏览器

如题所示,本文探讨的是如何将 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 包直接启动至浏览器端预览小程序界面了,是不是很酷。

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

效果演示

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

参考资料

相关文章
|
3月前
|
前端开发 小程序 API
【微信小程序】-- 使用 npm 包 - API Promise化(四十二)
【微信小程序】-- 使用 npm 包 - API Promise化(四十二)
|
3月前
|
资源调度 小程序 前端开发
【微信小程序】-- 使用 npm 包 - Vant Weapp(四十一)
【微信小程序】-- 使用 npm 包 - Vant Weapp(四十一)
|
3月前
|
资源调度 小程序 前端开发
【微信小程序】-- npm包总结 --- 基础篇完结(四十七)
【微信小程序】-- npm包总结 --- 基础篇完结(四十七)
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的箱包存储系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的箱包存储系统附带文章源码部署视频讲解等
38 5
|
1月前
|
JavaScript 前端开发 开发工具
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
|
3月前
|
JSON 小程序 前端开发
小程序中使用npm安装vant组件实现按需引入减少代码包大小,避免触发用户隐私协议
微信小程序按需引入 vant 组件,自动清除项目中未使用的 vant 组件,减少代码包大小,避免因未使用到的 vant 组件触发隐私协议提交审核时被拒
57 1
小程序中使用npm安装vant组件实现按需引入减少代码包大小,避免触发用户隐私协议
|
2月前
|
安全 JavaScript 前端开发
Wasmer 3.0 发布,可在浏览器外运行 WebAssembly
Wasmer 3.0 发布,可在浏览器外运行 WebAssembly
20 2
|
1月前
|
移动开发 小程序 前端开发
php + h5使用 scheme页面跳转微信小程序-其他浏览器一键跳转到微信并打开小程序
php + h5使用 scheme页面跳转微信小程序-其他浏览器一键跳转到微信并打开小程序
38 0
|
2月前
|
监控 小程序 前端开发
基础入门-抓包技术&HTTPS协议&WEB&封包监听&网卡模式&APP&小程序
基础入门-抓包技术&HTTPS协议&WEB&封包监听&网卡模式&APP&小程序
|
3月前
|
小程序 开发工具 开发者
【微信小程序】微信开发者工具 引用 vant-weapp时“miniprogram/node_modules/@babel/runtime/index.js: 未找到npm包入口文件” 解决办法
【微信小程序】微信开发者工具 引用 vant-weapp时“miniprogram/node_modules/@babel/runtime/index.js: 未找到npm包入口文件” 解决办法
190 1

热门文章

最新文章