奇思妙想:小程序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 包直接启动至浏览器端预览小程序界面了,是不是很酷。

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

效果演示

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

参考资料

相关文章
|
30天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
511 1
|
11天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的箱包存储系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的箱包存储系统附带文章源码部署视频讲解等
48 5
|
30天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
203 3
|
4月前
|
JavaScript 前端开发 开发工具
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
|
23天前
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇(三):运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件,模拟了 MongoDB 的核心功能,允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制,MiniMongo 与服务器端的 MongoDB 实现实时数据同步,确保数据一致性,支持发布/订阅模型和响应式数据源,适用于实时聊天、项目管理和协作工具等应用场景。
|
3月前
|
存储 小程序 Java
【小程序分包】小程序包大于2M,来这教你分包啊
本文介绍了如何通过分包解决uniapp小程序包体积过大的问题。由于版本升级导致包体积超过2M,即使压缩静态资源也无法满足发布要求。文章详细讲解了分包的原因、步骤及注意事项,并提供了实操示例,帮助读者理解并实现小程序分包,从而减小主包大小
189 1
【小程序分包】小程序包大于2M,来这教你分包啊
|
3月前
|
监控 小程序 数据处理
揭秘支付宝小程序性能优化秘籍:从加载到运行,每一步都快人一步!
【8月更文挑战第27天】本文深入探讨了支付宝小程序性能优化的关键技术和策略,包括减少网络请求、利用CDN加速、代码按需加载、图片压缩、懒加载以及性能监控等多方面内容,并提供了实用的示例代码,帮助开发者显著提升小程序的加载速度与运行效率,创造更佳用户体验。
79 1
|
3月前
|
Rust 安全 JavaScript
Rust 和 WebAssembly 搞大事啦!代码在浏览器中运行,这波操作简直逆天!
【8月更文挑战第31天】《Rust 与 WebAssembly:将 Rust 代码运行在浏览器中》介绍了 Rust 和 WebAssembly 的强大结合。Rust 是一门安全高效的编程语言,而 WebAssembly 则是新兴的网页技术标准,两者结合使得 Rust 代码能在浏览器中运行,带来更高的性能和安全性。文章通过示例代码展示了如何将 Rust 函数编译为 WebAssembly 格式并在网页中调用,从而实现复杂高效的应用程序,同时确保了内存安全性和跨平台兼容性,为开发者提供了全新的可能性。
138 0
|
5月前
|
安全 JavaScript 前端开发
Wasmer 3.0 发布,可在浏览器外运行 WebAssembly
Wasmer 3.0 发布,可在浏览器外运行 WebAssembly
58 2

热门文章

最新文章