让别人的小程序运行在自己的app中

概要

本文包括的内容:

  • 小程序在微信开发者工具中,通过构建生成真正的执行代码和安装包,****.wxapkg。wxml和wxss在构建这一步就被转换成了html和css(virtual-DOM)。微信开发者工具中可以得到构建脚本和各个版本的js运行SDK文件。
  • 小程序是以wxapkg文件的形式下发的,可以拿到wxapkg后解压拿到执行代码。同时解压微信.ipa拿到当前的js运行SDK文件,主要是WAWebView.js和WAService.js。
  • 小程序在App中执行时的时候分为三个不同的模块,View/Service/Natvie,各司其职。
  • 实现过程遇到大量的细节和坑。

介绍小程序原理的文章比较多,这篇讲的比较细:微信小程序架构分析。这篇文章的作者也成功的实现了wept,让小程序运行在自己的webapp里。

参考最多的是微店的Hera,完成度非常高的小程序框架,能够将小程序的demo代码在web/iOS/android运行起来,而且实现了很多工具。Hera的问题是开发于比较早期的版本,不兼容最新的版本了。Hera还有一个问题是他修改了小程序构建之后的目录结构,采用了service.html作为service部分的入口,跟小程序本身的实现尚有有一些区别。所以Hera只能够构建执行自己编写的小程序,不能执行别人编写的小程序。

我的目标是能够运行其它人开发的app,意味着我只能通过逆向的方式拿到wxapkg。但是因为拿不到源码,所以要尽可能在构建环节跟小程序保持一致。

经过数周的挣扎,目前已经实现了运行官方demo。已经达到"可行"的阶段,但是还远远谈不上“可用”,因为需要实现小程序大量的API,这是个体力活,依赖个人的力量难以完成。

构建

官方demo小程序原先的目录分为几类文件:

  • 配置: 在这个目录中,app.json里保存了页面信息、tabbar信息、网络超时配置等等。 config.js保存了腾讯云后台服务解决方案的配置。
  • js文件: js定义了各种函数接口逻辑
  • wxml: 类似于html,定义了页面结构
  • wxss: 类似css
demo
├── app.js
├── app.json
├── app.wxss
├── config.js
├── image
│   ├── green_tri.png
│   ├── ...
├── page
│   ├── API
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   ├── index.wxss
│   │   ├── pages
│   │   │   ├── action-sheet
│   │   │   │   ├── action-sheet.js
│   │   │   │   ├── action-sheet.json
│   │   │   │   ├── action-sheet.wxml
│   │   │   │   └── action-sheet.wxss
│   │   │   ├── ...
│   │   └── resources
│   │       └── ...
│   ├── ...
├── project.config.json
├── util
│   └── util.js
└── vendor
    └── qcloud-weapp-client-sdk
        ├── ...

经过小程序的开发环境构建后,生成了一个*.wxapkg文件。
这个文件可以通过从越狱的iPhone或者root的安卓手机上拿到。有部分人用charles通过https抓包拿到了下载链接,也拿到了包。
拿到后要进行解包。有大神已经通过反编译安卓apk的方式拿到了解包部分的代码,然后用python重写了一遍。源码见wechat-app-unpack

解包后得到的目录如下:

1.wxapkg_dir
├── app-config.json
├── app-service.js
├── app-service.js.map
├── image
│   ├── green_tri.png
│   ├── ...
├── page
│   ├── API
│   │   ├── index.html
│   │   ├── pages
│   │   │   ├── action-sheet
│   │   │   │   └── action-sheet.html
│   │   │   ├── ...
│   │   └── resources
│   │       └── kind
│   │           ├── api.png
│   │           ├── ...
│   ├── ...
└── page-frame.html

转换过程可以分为三部分:

  • 从wxml/wxss到html。 page-frame.html里定义了所有的virtural-dom,来自所有的wxss和wxml的转换,文件非常大。 page.html里很简单,就是从page-frame.html里提取对应的virtual-dom。包括wxss和wxml对应的逻辑。
  • app-service.js是从之前所有的js文件转换而来。
  • app-config.json是从app.json转换而来。

openVendor命令可以在小程序中获取到构建脚本wcc和wcsc, 以及各个版本小程序的执行SDK ****.wxvpkg,这个SDK也可以用wechat-app-unpack解开,解开后里面就是WAService.js和WAWebView.js等代码。

wxml/wxss的构建原理

wxss 转换成了css,wxml转换成了inject_js,实际上就是virtual_dom。
是用什么工具转换的?小程序里是叫wcc和wcsc。在开源工具hera自己实现了一套wxss-transpiler和wxml-transpiler。而hera的前身wept是直接使用wcc和wcsc。
我们为了减少维护成本,直接采用wcc和wcsc。
因为我们没有wcc和wcsc的源码,所以只能借助wxss-transpiler和wxml-transpiler来帮助我们理解wxml/wxss的构建原理。

wxss-transpiler调用了一个PostCSS的插件,用来处理wxss。
PostCSS 提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构(Abstract Syntax Tree,AST),再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的,比如可以支持变量和混入(mixin),增加浏览器相关的声明前缀,或是把使用将来的 CSS 规范的样式规则转译(transpile)成当前的 CSS 规范支持的格式。

wxml-transpiler:实现了一个转译器的工作,比如postcss也是转译器,包括解释器(parser),代码转换器(Transformer),代码生成器(Generator)。这个是闭源的。

  • 根据输入的列表,读取所有文件
  • 调用VUE的HTML Parser,解析输入的标签及属性,生成一颗DOM树。vue解决不了的js语言,用babylon库来处理。(Parse)
  • 在解析组件的标签时,对其上包含的属性值进行解析(边Parse边Transform)
  • 根据已有的AST生成JS文件(Generate)

更多实现原理见这篇文章

模块之前的通信

image

小程序在App中执行时的时候分为三个不同的模块,View/Service/Native,各司其职。

View和Service都在WKWebView中执行,互相无法调用。他们之间通过Native层通信。

Native和WebView之间通过webkit.messagehandler和evaluateJavascript互相调用。

  • WeixinJSBridge.publish: view和service之间的透传,在WKWebView之间传递消息。

  • WeixinJSBridge.subscribe: 注册监听,监听view和service之间的消息调用。

  • WeixinJSBridge.invoke: View或者Service传递消息到Native,然后Native使用逻辑调用js callback。

  • WeixinJSBridge.on:监听Native的事件。

如何执行

这里以iOS为例介绍Native执行过程。安卓类似。

通过解压微信的ipa可以拿到WAService.js和WAWebView.js两个基础库文件,文件内容与hera的service.js/view.js已经有了较大的区别。
我们采用小程序的架构和hera的两个webView的方案,尽可能模仿小程序的执行过程。

View部分

View部分是比较直观的,就是WKWebView加载web页。这里需要在app-config.json里读取到首页的路径,然后加载该页面。这个路径下的xxx/index.html是无法直接加载的,需要做一些处理。要引入本地执行SDK里的index.css和view.js, 然后把page-frame.html里的virtual-dom全部塞进该页面。 然后loadHTML即可。

View所有的WKWebView也是要注册WKUserContentController的,用于通信。
通过反汇编可以得知这个类在微信中叫YYWAWebView,调用js是直接调用-evaluateJavaScript:completionHandler:方法的。

view.js中包含的逻辑:

  • WeixinJSBridge 对象处理消息通信: invoke invokeCallbackHandler on publish subscribe subscribe subscribeHandler。
  • Reporter 对象
  • wxparser 对象,提供 dom 到 wx element 对象之间的映射操作,提供元素操作管理和事件管理功能。
  • virtual dom 渲染算法实现,提供 diff apply render 等方法,该模块接口基本与 virtual-dom 一致,这里特别的地方在于它所 diff 和生成的并不是原生 DOM,而是各种模拟了 DOM 接口的 wx element 对象

Service部分

Service部分的实现,Hera和微信小程序采取的了不同的架构。
Hera的实现较为简洁,跟View部分保持一致,采用了WKWebView,调用-evaluateJavaScript:completionHandler:方法执行js,js回调OC时使用WKScriptMessageHandler。
通过反汇编可以得知这个类在微信中叫WAJSCoreService,js和OC之间的调用是采用JavascriptCore互相调用。

JavascriptCore它首先要加载app-config.json并把这个配置赋给一个全局对象__wxConfig。然后他要加载service.js是SDK基础,再然后他要加载app-service.js,这里面包含了用户编写的js逻辑。最后它发出全局消息
WeixinJSBridge.publish('serviceReady',,);</script>唤起小程序app的初始化。

Service.js中包含的逻辑:

  • 跟 view.js 一样的 WeixinJSBridge 兼容模块
  • view.js 一样的 Reporter 模块
  • appServiceEngine 模块,提供 Page,App,GetApp 接口

Native部分

Native执行的问题比较复杂,因为基本是黑盒,里面发生了什么并不知道。
hera的方案在构建过程就已经跟小程序实际的方案有所区别,会提高维护成本。所以我们只能靠猜测来实现Native的执行过程。

Native部分就是作为入口,运行环境,跳转,转发消息,实现扩展。包括网络模块/摄像头/tabbar实现的都是扩展。
我们可以得知的是消息传递的协议。然后只能通过safari来调试webView,根据协议的名称和出入参来猜测协议的内容。

主要的困难点

  • 由于压缩后的view.js和service.js基本不具备可读性,而virtual-dom又彻底不具备可读性...所以就算猜中了协议,最后也往往是魔改。可维护性极差。
  • 工作量不小,因为调试困难,无法阅读。之后随着小程序SDK升级,能用多久也不可知。加上也有各种微逆向的操作,小程序封上任何一个接口,都会导致扑街。可持续性极差。总之非常佩服微店的同学能把Hera搞出来:)

小程序的性能启发

小程序是颠覆我对Web的固有印象,最初还以为是类似weex或者rn的调用原生的方式,没想到几乎完全是运行在WKWebView之上的。

  • 采用virtual DOM,操作JS比html性能高很多,因为是diff后再操作dom,不需要全部重新渲染,快很多。
  • WKWebView,滑动60fps,在独立于App之外的进程执行。
  • 部分逻辑Native化,比如收发网络请求,比如数据持久化。 逐步用native组件来替换h5组件。比如tabbar。
  • 重用webView以及提前初始化webView等等技巧。

存在的问题:

  • 看消息传递的原理就能发现,传递的过程太长了,尤其是setData:这种传递整个model对象,是两次对象的深拷贝,可能会增加两次json的序列化和反序列化,如果model对象很复杂对性能影响比较大。
  • 页面初始化/响应速度/UI细节还是跟原生有差距。

当然已经比纯web页强很多了。目前来看还是只适合轻量化的应用。受制于架构以及微信的平台,个人认为是对Web的替代和改善。但是就算在可见的未来,还是很难跟native抗衡。

现代浏览器和操作系统之间的界限越来越模糊。App的"下载/安装"过程本身就是一种妥协。只要小程序的体验足够好,应该没有人会拒绝。

推荐阅读更多精彩内容

  • 每个人都有拖延症,有自制力、坚持做一件事情,其实很消耗能量,如果总是失败,其实很伤害自信和意志力。 但如果通过循序...
    曹门霞客行阅读 394评论 7 20
  • 东野圭吾先生的小说以前没怎么看过,偶然机会在朋友的桌头看到一本他的推理小说《嫌疑人x的献身》,一时兴起用了大概一个...
    吃吗带走阅读 83评论 0 0
  • 感赏今天晚上有很多顾客试衣服,这样就提高了顾客买单的几率。 感赏自己因为前天的事情受宇宙爸爸点化,让我认识到了努力...
    离不若阅读 55评论 0 0