写点什么

实现微信小程序编译和运行环境系列 (进阶篇)

  • 2020-04-30
  • 本文字数:2675 字

    阅读完需:约 9 分钟

实现微信小程序编译和运行环境系列(进阶篇)

前言

距离上一篇初始篇过了一段时间,在初始篇里面主要分享了微信小程序工具 和微信小程序的文件组成,以及小程序架构的基本大纲和描述,看了第一篇的小伙伴应该大概知道了微信小程序运行时候各部分文件职能了,如果不太了解的话可以再去看下githubcsdn

进阶篇内容主要从以下几个方面来分享下微信小程序的架构

  • 核心文件 WAService.js WAWebview.js appservice.js 的解析;

  • 和其他文件在逻辑层和渲染层的⚠️注意事项

  • websocket 通信在微信小程序框架中的应用实现;

  • 通过几个案例和部分代码来实现自己的小程序运行环境;

  • 微信小程序云开发和小游戏架构初步分析(后续会持续更新)。

正文

WAService.js 文件

在第一篇里面有讲到 WAService.js 文件是在逻辑层模版页面里面引入的,但是没有给予过多的介绍,


接下来主要分析下 WAService.js 的代码组成,这个文件算是微信小程序基础库文件里面很核心的文件了,所以微信对它的保护应该很到位了,微信通过了压缩,编译,打包后生成的一坨这个 js 文件(如下图):



直接看完全没什么头绪,看着头很重!!


下面只有让我们来一步一步分解它,让它原形毕露


  • 第一步让它变得看起来稍微美一点,毕竟大家都喜欢美一点的人事物,既然有需求那肯定有解决方案,所以给大家推荐一个工具包 js-beautify,可以先让代码看起来比原来漂亮很多。


直接执行命令(不要对他抱太大期望,美化后的不可能让你一步到位,还是要慢慢咔哧咔哧)。


js-beautify ./WAService.js -r
复制代码


美化后的代码:



  • 看着花花绿绿的还是要舒心很多,但是毕竟人家是一个 6 万多行编译后的大物,想看明白不是一件易事,但我们还是要和它死磕来慢慢消耗它,接下里给大家介绍下个我比较笨的一种方案就是一点点有策略性的手动给他反编译过来(中间的过程只有经历后才能明白其中的痛啊),不过看到结果还是蛮欣慰的。


先给大家看下最终大部分解出来的编译文件如下图:





上面的图是通过分析代码还原的一些人看的代码,然后分类的。


在网上我有看到有人说通过一些工具对 WAService.js 进行格式化后进行 debug 来分析,这种方式也是 ok 的但是有一些门槛问题,对于一些同学来说不太方便也不太能处理,因为你没有调试这些文件的运行环境,在微信开发者工具里面你是看不到 WAService.js 文件的更不要说去调试了,如果非要在开发者工具调试的话方法也是有的,要通过修改微信开发者工具客户端的代码才可以但是一般都不知道怎么去修改基础库代码。


下面介绍一个好理解但是有点痛苦的方式,比较清晰的一个操作是在上面我们让它变得美一点了,现在让它变得有条理一些,推荐使用 vscode 格式化后进行方法折叠。



这样一看其实很清晰了我们可以看到这些我们常听说的一些微信对象,WeixinJSBridge、 NativeBuffer、 wxConsole、 WeixinWorker、Reporter、VirtualDom 等对象都打包一起了,


然后看到对象里面有很多个 function(e,t,n)文件对应的就是每个暴露的方法,下面要做的就是把这些方法的代码手动编译过来,可以给大家一个案例演示下。


下图这个是 VirtualDom 对象文件里面的一个方法:


下图的是上面的代码改成我们正常人读的代码


这个过程对你的 js 水平要有一定要求的,如果你基础不扎实和了解怎么应用的话,还原起来可能会很吃力的,如果你可以完整的编译这些文件的话,你的 js 水平完全可以超越大部分人。


可以先给大家简单分析一点非技术层面的一些疑问,具体的技术层面编译过程,可以熟悉 js 整个编译历史,和 es6 转 es5 的方式推荐大家熟悉下 babel 源码,可以有很多收获 由于本人也还比较小白(高手可以忽略这点),大家可以看到:


var i=n(22)我改成了 const DomIndex=require(’./domIndex’)


这个语句语意可能很多人都可以理解,但我为什么把 22 这个文件写成 DomIndex,其实这里面的变量和命名和对应的文件都不是自己想当然的,这个可以在文件中进行分析得到的,具体怎么分析的这里不过多介绍了,内容就太多了有兴趣可以留言讨论。


使用对 WAService.js 文件分析可以看出大致有 : WeixinJSBridge、 NativeBuffer、 wxConsole、 WeixinWorker、 Reporter、 wx、 exparser、 virtualDOMappServiceEngine 等对象组成的。

WAWebview.js 文件

这个大致和 WAService.js 文件分析方式一样,大家感兴趣的可以自行尝试下,留给大家自己研究,理解的肯定比我写出来的要深刻很多。

appservice.js 文件

这个文件分析的结果可以让我们看到一些浮出水面的东西来,但这个过程比较曲折开始。


在微信小程序工具的渲染层和逻辑层里面和微信基础库都没有发现这个文件,说明可能是运行时注入进去的(猜测的)。



后来在 sources 里面有发现这个文件:



但是文件是空的,页面资源和 network 里面都没有找到对应的文件,一时比较绝望,后来就一直瞎折腾半天后,终于在工具包里面 appservice 找到来这个类似文件,让生活注入了一点希望。



但是一打开还是这一坨不是人看的代码,但奈何不看不行啊(阿弥陀佛)



通过分析研究发现,还是发现了一些蛛丝马迹,看到了这个文件里面存在 webstocket 和 http 通信方式,有通信说明就会和外界有关联,于是大胆尝试了在一些通信相关代码的地方,修改了一点代码和添加了日志



标记三就是稍微在原来微信 appservice.js 的基础上进行了一点修改,然后保存,期待这微信开发者工具上面会有一些不一样的烟火🎆,但奈何关了又开,开了又关半天屁的变化都没有,于是就产生了自我怀疑,难道不应该这样吗,但是还是感觉方向是对的,于是打算在试试终极解决方法《重启电脑》,果然当我在打开开发者工具的时候看到了不一样的烟火🎆,


在 console 里面出现了耀眼的光芒,这里应该算一个突破性进展吧!!!



看到 api 和返回的结果,发现这些其实就是微信提供对外的同步 api,可以看到 getSystemInfo 走的其实是同步的方式,那微信还提供了 getSystemInfoSync 说明也是同步的,他们的底层实现都是同步的不知道这个 api 还提供这两个接口有什么意义 没理解, 然后又试了下其他微信提供的同步方法发现都会出现在这里,其他很多异步 api 的不会走这里都是通过 webstocket 走的,这里可以得出结论这些同步 api 请求都是通过/apihelper/assdk 传输的,大家可以自己测试下拦截这个请求会发现更多内容。


至于这个文件和基础库的关联和最核心的 webstocket 的实现和在文章开头说的案例分析和云开发小游戏架构分析相关,我打算放在下几篇《核心篇》里面来一一分享,本来打算放在一起的,但写起来才发现虽然文字不多但考虑东西太多时间要很久,如果放在一起只是大概概括的话会很快少很多省时省力,但是感觉没太大意义可能对一些想了解的同学没有太大帮助,所以我就想通过我中途的过程和遇到的问题来分析可能会好理解一些


2020-04-30 16:302367

评论

发布
暂无评论
发现更多内容

开源直播课丨高效稳定易用的数据集成框架——ChunJun类加载原理与实现

袋鼠云数栈

开源技术公开课丨Taier工作流的介绍

袋鼠云数栈

面试中经常问到的几个问题,快来看看能答对几道吧(Java)

钟奕礼

java; 编程、

信我,Java面试的苦只吃一次,看完这八股文合集,渣渣也能进大厂

钟奕礼

编程 java;

未来智安加入中国通信标准化协会成为全权会员

未来智安XDR SEC

Android 开发环境的搭建(Android Studio + 逍遥模拟器)

Android Studio 安卓开发 9月月更

Redis进阶知识点(可学习,可复习,可面试)

钟奕礼

java; 编程、

西部省份数字化需求暴涨 首届828 B2B企业节见证企业数字化新浪潮

科技热闻

微服务框架搭建过五关斩六将—第一关(网关)

为自己带盐

微服务 网关 9月月更

如何查询已经执行过的流程信息?

江南一点雨

springboot workflow flowable

好的,DFS,也学废了!

掘金安东尼

前端 9月月更

Groovy closure 与Java function转换

FunTester

[iOS研习记]聊聊iOS中的Mach-O

珲少

他来了!袋鼠云大数据基础平台EasyMR正式上线

袋鼠云数栈

《软件开发的201个原则》思考:7.尽早把产品交给客户

非晓为骁

软件开发201原则

APICloud可视化编程(二)

YonBuilder低代码开发平台

前端开发 APICloud 多端开发

【编程实践】详解MySQL在Python中的使用(1)

迷彩

Python MySQL 数据库 pymysql 9月月更

实战案例,个个是经典,不愧是阿里P7私传“并发编程核心讲义”,竟能讲的如此通透

程序知音

Java 并发编程 多线程 高并发 后端技术

【云原生 | 从零开始学Kubernetes】十二、k8spod的生命周期与容器钩子

泡泡

Docker 云计算 云原生 k8s 9月日更

开发者有话说|要不是家里穷,我也不想当码农

三掌柜

个人成长 个人感悟

Jmix 中 REST API 的两种实现

世开 Coding

Java Spring Boot Jmix 少代码 企业级开发

行走的Offer收割机!首次公布Java10W字面经,Github访问量破百万

Geek_0c76c3

Java 数据库 开源 程序员 面试题

实用五步法教会你指标体系的设计与加工

袋鼠云数栈

模块一作业

知足🐏

01简单架构分析

神奇的叶叔叔

ChunJun&OceanBase联合方案首次发布:构建一体化数据集成方案

袋鼠云数栈

这些Java基础知识,诸佬们都还记得嘛(学习,复习,面试都可)

钟奕礼

编程 java;

如何使用iMazing监督、配置器功能

淋雨

ios iphone

易观分析互联网+慢病管理生态洞察,助力行业升级

易观分析

医疗

红海竞争下,「社交+」在中东泛娱乐 App 市场的出海新机遇

融云 RongCloud

白皮书 泛娱乐 出海

开源项目丨ChengYing 1.1版本重磅发布:新增超多功能,全新优化体验!

袋鼠云数栈

实现微信小程序编译和运行环境系列(进阶篇)_大前端_风逝_InfoQ精选文章