44

开源|wwto:小程序跨端迁移解决方案——微信转其他小程序

 2 years ago
source link: http://mp.weixin.qq.com/s?__biz=MzI1NDc5MzIxMw%3D%3D&%3Bmid=2247487495&%3Bidx=1&%3Bsn=c2a0409726d4b4f81dccc917ed463b6c
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

开源项目专题系列

(二)

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层结构:编译层、运行层和集成层,架构图如下所示:

640?wx_fmt=png

1. 编译层

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

流程图如下:

640?wx_fmt=png

2. 运行层

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

适配规则:

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

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

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

4. 一样的API不作处理。

适配过程:

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

640?wx_fmt=png

3. 集成层

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

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

几种典型的问题

1. 组件化实现程度差异

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

640?wx_fmt=png

(样式文件模块化前后)

640?wx_fmt=png

(模板文件模块化前后)

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

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

640?wx_fmt=png

(模板文件模块化前后)

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

核心优势

  • 跨端迁移:一套微信小程序代码,其他多个小程序端适用,降低研发成本

  • 快速接入:几乎不需要对微信小程序做任何改动,可以接近零成本获得其他小程序。

  • 简单易用:CLI命令行一键转换,轻松易用,无学习成本

  • 扩展开发:wwto输出的目标小程序可读性强,可二次扩展

  • 覆盖率广:可从微信小程序/插件转为主流的其他小程序/插件:百度、支付宝、头条小程序。

开源意义&未来规划

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

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

如何贡献&问题反馈

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

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

作者简介

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

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

与项目成员零距离交流?

扫码加小秘书 微信 NoProb.png

一切应有尽有 NoProb.png

640?wx_fmt=png

微信号 : jishu-58

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

live

沙龙活动直播

640?wx_fmt=jpeg

2020年58技术沙龙活动在线直播第一弹——《大数据平台建设实践与探讨》系列第四期已准备就绪,欢迎你强势围观!

详情:mag_right:请戳:point_up_2:图片查看,3 月14日本周六19:00,老时间,我们不见不散。

640?wx_fmt=jpeg


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK