前端 domparser未定义怎么解决_开源｜wwto：小程序跨端迁移解决方案——微信转其他小程序...

开源项目专题系列

(二)

1.开源项目名称：wwto

2.github地址：

https://github.com/wuba/wwto

3.简介：wwto是58同城推出的一种小程序跨端迁移解决方案，可以近乎零成本将微信小程序转为其他小程序，提升开发效率、降低维护成本。目前已经投入了我们的生产环境中使用，包括微聊、云账号。

wwto于2020年3月份开源，具备以下特点：

• 转换链路为“微信小程序 —> 其他小程序”(支付宝小程序、百度小程序、头条小程序)；
• 编译时转换syntax语法：wwto会在编译时将语法结构等集中处理，转换为目标小程序的语法结构。
• 运行时转换API：目标小程序运行时加载API适配器，抹平小程序间差异。
• linter检查工具：提供检验规则，发现目标小程序不支持的语法或特性，提醒兼容性问题。
• 支持插件转换：在支持小程序转换的同时，支持插件转换；
• CLI功能：支持命令行CLI，方便易用；
• 命令行执行进程显示日志。

为什么需要wwto

在微信小程序的大火大热背景下，各大互联网公司相继加入小程序流量混战，陆续推出了自己的小程序平台。但目前开发者面临了困境：各个大厂的小程序均有自己的语法结构、API体系等，开发者需要把同一个应用分别开发N次，效率低下，在不同平台间迭代功能繁琐。

为了提升开发效率、改善开发体验，以58 TEG技术实力，开发了一整套小程序迁移解决方案， 取名wwto( wuba wechat mini-program to other mini-program)。一套代码、多端适用，为业务方赋能，用技术手段造福小程序开发者。

对比业界现有微信转其他小程序的工具antmove，wwto不仅支持小程序的转换，还支持插件的迁移。对比多端统一开发框架taro，wwto无需引入框架和框架带来的风险，比如更新维护比原生小程序团队滞后甚至停滞、框架支持不了但原生小程序能支持的功能、性能肯定也会有损耗、额外的学习成本等。

项目架构

wwto分为3层结构：编译层、运行层和集成层，架构图如下所示：

1. 编译层

编译层：将微信小程序语法结构集中处理，编译成目标小程序的语法体系。

流程图如下：

2. 运行层

运行层：以微信小程序的API为基准分别适配目标平台的API，抹平不同小程序之间的差异。

适配规则：

1. 微信拥有的API，但其他平台没有对应的情况：由于平台之间的不兼容，降级为空方法；

2. 其他平台和微信接受的参数名不同，做参数映射；

3. 其他平台和微信API的返回值不同，做结果封装或结果映射；

4. 一样的API不作处理。

适配过程：

首先，小程序内部全局对象替换为对应平台的全局对象；其次，设立一个平台的特定标识，如has_ali_hook_flag，用于辨别目标平台；最后编写兼容。

3. 集成层

集成层：包括集成了CLI工具、日志logger工具、检测器linter。

其中linter较为复杂，包括规则总结，规则包装，按照规则扫描两遍(行检测，文件整体检测)，输出总结。如有些场景中平台功能缺失，是wwto不能处理的，比如头条暂不支持的selectComponent，只能从源代码层面规避。对于这类工具解决不了的问题，我们除了在文档中有说明之外，也会在转换之前，通过linter警告的方式告知开发者，指明源码存在的兼容问题及对应处理方案。

几种典型的问题

1. 组件化实现程度差异

支付宝小程序的组件化是不彻底的，父组件的样式会影响子组件的样式。这个问题从源代码层面可以规避，父子组件不要使用相同的类名，但这个显然是不友好解决办法。本解决方案是：通过postcss对样式文件做模块化处理，对模板则先通过xmldom进行DOMParser，然后遍历DOM节点进行类名的替换，模板与模块化以后的样式文件一一对应则通过页面/组件的路径所计算的hash进行绑定。转换前后对比如下：

(样式文件模块化前后)

(模板文件模块化前后)

2. 接口/属性不一一对应

支付宝小程序组件的生命周期函数与微信小程序完全不一样，也没有一一对应的关系。这种情况无法使用简单的方法名正则替换，本方案是注入支付宝小程序组件的生命周期函数，在这些生命周期函数中在调用微信小程序的生命周期函数，这样以来就避免了方法名替换无法一一对应的问题，也能更方便地书写适配代码。

(模板文件模块化前后)

除此之外，本方案还解决了像生命周期函数/事件回调函数入参不一致，组件不支持triggerEvent方法等一系列问题。

核心优势

• 跨端迁移：一套微信小程序代码，其他多个小程序端适用，降低研发成本
• 快速接入：几乎不需要对微信小程序做任何改动，可以接近零成本获得其他小程序。
• 简单易用：CLI命令行一键转换，轻松易用，无学习成本
• 扩展开发：wwto输出的目标小程序可读性强，可二次扩展
• 覆盖率广：可从微信小程序/插件转为主流的其他小程序/插件：百度、支付宝、头条小程序。

开源意义&未来规划

开源意义：目前小程序生态日渐繁荣和完善，很多公司都推出了各个平台的小程序，多端小程序的开发和维护都耗时耗力，此项目可以帮助开发者快速从微信小程序生成其他平台的小程序。

未来规划：wwto会进一步的提高转换平台的支持力度，保证转换功能稳定可用。同时在社区的共同建设下，会提供更多平台的转换支持，更多新特性&API的转换支持，完善小程序的开发者社区生态。

如何贡献&问题反馈

在小程序标准化统一落实之前，wwto继续履行着跨端迁移的使命。而开源则只是wwto贡献社区的一小步，我们现向广大开发者发出诚挚的邀请，与我们一道共同建设，为小程序开发的效率提升与优雅迁移不断努力。

您可以在 https://github.com/wuba/wwto 了解项目源码、使用方法、启动方式等。欢迎提交 PR 或者 Issue，向我们反馈建议和问题。

作者简介

李中秋，58同城 基础体验技术部 前端资深开发工程师，主要负责前端工具链建设、通用中台系统的开发。

想了解更多开源项目信息？

与项目成员零距离交流？

扫码加小秘书微信

一切应有尽有

微信号 : jishu-58

添加小秘书微信后由小秘书拉您进项目交流群