当前位置: 首页 > 后端技术 > Node.js

Antmove起源——好用的小程序多端解决方案

时间:2023-04-04 01:36:00 Node.js

原文地址:https://ant-move.github.io/we...Antmove是一款小程序开发辅助工具,致力于解决跨平台问题小程序开发,借助Antmove,只需要编写一套微信小程序代码(或支付宝小程序代码)即可达到多平台运行的目的,而不用担心如何适配多平台。WHO?Antmove起源于高德小程序团队的一个内部项目。在高德小程序平台成立之初,很多商业伙伴都希望在高德小程序平台(支付宝小程序平台)上线自己的小程序应用。但他们已经有了自己的微信小程序应用,开发一套高德(或支付宝)对企业来说是一种资源负担。基于这个需求,内部实现了一个微信小程序到高德小程序的转换工具,这个工具可以帮助这些企业用户在高德上快速启动他们的应用。基于微信小程序转高德小程序的初期需求,我们发现虽然用户的第一步需求已经解决,但用户的痛点并没有完全解决,真正的小程序的实现小程序的跨平台开发为小程序的跨平台能力提供了解决方案。这也是蚂蚁搬家的目标,也是要解决的问题。什么?Antmove工具为小程序的跨平台开发提供了统一的解决方案。Antmove的目标是为小程序的跨平台开发提供成熟稳定的解决方案。那么它是一款什么样的工具,适用于什么样的场景呢?如果你对小程序没有跨平台的需求,那么你就不需要使用Antmove。Antmove所做的是将applet应用程序编译成其他平台上的applet应用程序。它不是applet的框架,也没有定义新的applet语法,我们认为目前的小程序框架已经发展的非常成熟,功能也很齐全。基于原生小程序,开发者开发小程序应用就足够了。第三方库的引入会增加技术风险,使应用过于复杂。小程序要小而美,技术层也一样。目前支持哪些平台搬家?目前Antmove的开放版本已经放出了微信小程序转支付宝小程序的功能,这也是我们调研中需求最大的。支付宝转微信、支付宝转百度头条目前正在测试中,即将与大家见面。为什么支付宝转百度头条?而不是从微信直接转换到百度头条?下面这个转换链接图可以让我们更清晰直观的了解Antmove的跨平台支持。在Antmove的转换环节,我们实现了微信小程序和支付宝小程序的双向转换,从而实现了以微信小程序为核心或支付宝小程序为核心的跨平台方案。微信小程序和支付宝小程序的可选转换链接设计。支付宝小程序的推出滞后于微信小程序。因此,在整体框架能力支持上,支付宝向微信小程序看齐,然后在框架底层设计上,两者存在差异。从笔者的理解来看,微信小程序框架的原理更接近于Vue.js,而支付宝小程序更接近于React.js。基于此,两个平台在开发体验上存在诸多差异。这也是Antmove支持以两者为核心的转换支持的原因之一,让用户可以选择自己或自己团队的开发体验。Antmove是否支持100%转换?不幸的是,经过整个团队的努力,仍然存在一些工具无法解决或我们不想解决的差异。无法解决的部分是由于不同小程序平台的能力差异造成的;而工具并没有刻意支持这部分是因为我们不想对编译后的输出代码造成太大的影响。我们希望编译后的输出仍然是可编程的、人性化的原生小程序代码,性能损失尽可能低。虽然有些部分需要开发者自己处理,但是完全不用担心。该工具提供了一套机制,可以让开发者以尽可能低的成本实现差异化的兼容性。为什么?小程序发展以来,社区中出现了很多与小程序相关的框架、工具等生态工具,如mpvue、taro、uni-app等工具。他们还提供跨平台解决方案。Antmove和他们有什么异同,有什么优势?第三方框架与原生微信小程序开发框架的性能对比采用原生小程序wepy和mpvue的开发方式。小程序框架的初衷是为了提升小程序的开发体验。程序刚上线,功能不稳定,API变化频繁,功能不完善(不支持组件化开发)。所以当时迫切需要提升小程序的开发体验,但是到目前为止,小程序框架已经发展的非常成熟,针对小程序场景引入了很多功能。原生小程序的开发体验已经足够好了,但是语法扩展功能就显得有点鸡肋了,这也是Antmove选择原生小程序开发方式的原因。无需额外学习成本,即可享受小程序框架完整的功能特性。简化开发流程从技术工程的角度来看,引入第三方框架是有风险的。如果对框架有很强的依赖,需要保证对框架有足够的了解,否则有引入框架层潜在bug的可能。随着开发流程的增加,开发经验也会减少,开发和调试也会变得困难。这也是Antmove相对于框架小程序的跨平台解决方案的优势。转换前后都得到了原来的小程序代码,只需要引入部分polyfill代码。应用性能基于Antmove的跨平台方案,基本可以达到与原生小程序相同的性能体验。而如果使用第三方框架,无论框架再怎么优化,与不吸引人相比,性能肯定会有所下降。用户体验Antmove基本可以做到一键转换的用户体验。同时还支持开发模式的编译日志和运行日志,帮助用户改进应用,了解不同平台的差异,得到非常适合目标平台的代码。团队拥有资源优势,对支付宝小程序框架由外到内都有深入的了解,可以做更多的优化。如何?为了提供更好的跨平台解决方案,Antmove工具主要在编译时、运行时、编译运行结合时做了很多转换处理。下面以微信小程序转支付宝小程序为例,对应Antmove的wx-alipay-plugin。编译时处理Antmove在编译时会将整个应用的目录结构和文件结构转换成对应平台的结构,并根据具体平台输出文件命名规范、样式、模板、逻辑文件、配置文件等。框架相关的特定语法如wxs语法、模块依赖系统(路径解析规则的差异处理)在编译时也会作为目标平台语法处理。编译示例微信小程序获取头像昵称{{userInfo.nickName}}{{motto}}支付宝小程序获取头像昵称{{userInfo.nickName}}{{motto}}RuntimeprocessingRuntimeprocessing主要是为了磨平API、opencapability和App/Page/Componentconstructor的差异编译期有很多组合处理Functions不能仅在编译时和运行时处理。以自定义组件事件传递为例,微信是triggerEvent的形式,类似自定义事件,而支付宝是类似react的机制,基于props。组件间的方法传递需要在编译时将事件转化为支付宝props,在运行时将props函数改为triggerEvent调用。