小程序triggerevent 传参_开源wwto:小程序跨端迁移解决方案——微信转其他小程序...
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添加小秘书微信后由小秘书拉您进项目交流群live沙龙活动直播
2020年58技术沙龙活动在线直播第一弹——《大数据平台建设实践与探讨》系列第四期已准备就绪,欢迎你强势围观!
详情?请戳?图片查看,3月14日本周六19:00,老时间,我们不见不散。
END
小程序triggerevent 传参_开源wwto:小程序跨端迁移解决方案——微信转其他小程序...相关推荐
- 前端 domparser未定义怎么解决_开源|wwto:小程序跨端迁移解决方案——微信转其他小程序...
开源项目专题系列 (二) 1.开源项目名称:wwto 2.github地址: https://github.com/wuba/wwto 3.简介:wwto是58同城推出的一种小程序跨端迁移解决方案,可 ...
- 小程序triggerevent 传参_微信小程序——无限递归的层次列表
--上礼拜踩的坑 1.关于为什么不直接操作DOM对象? 因为微信小程序里没有document对象. 2.为什么坑了这多时间? 因为之前看了个过期的帖子,完美避开了解决方案. 下面进入正文,需求是在微信 ...
- 微信小程序 事件传参
微信小程序 事件传参 wxml部分 js 部分 wxml部分 1.先绑定事件 2.在该元素上写上属性 data-index 3.参数值即为要传参数 <text catchtap="de ...
- 支付宝扫码跳转小程序并传参
支付宝扫码跳转小程序并传参 1. 打开支付宝开放平台 支付宝开放平台 打开支付宝开放平台,进入自己的小程序详情页面.点击小程序码>关联普通二维码>添加按钮 2. 输入业务域名 这里我们选择 ...
- shell脚本触发java程序支持传参补跑 +crontab定时器+每天生成日期文件_03
文章目录 1. 脚本升级 2. 执行测试 3. 脚本关键词简述 补充案例 上一篇: shell脚本触发java程序支持传参补跑 +crontab定时器_02 https://gblfy.blog.cs ...
- shell脚本触发java程序支持传参补跑 +crontab定时器_02
文章目录 1. 创建定时任务 2. 查看定时任务是否执行 上一篇: shell脚本触发java程序支持传参补跑_01 https://gblfy.blog.csdn.net/article/detai ...
- shell脚本触发java程序支持传参补跑_01
文章目录 一.java程序 1. 创建java项目 2. 创建包结构 3. 创建java类 4. 编译 5. 编译后的包结构总览 二.shell脚本 2.1. 创建基础目录 2.2. 上传项目到指定目 ...
- Web页面调用本地客户端程序并传参
好久没跟新博客了,今天跟新2019年的第一篇博客,最近在做项目,需求就是Web页面调用本地客户端程序并传参,传参是为了避免客户端再次输入账号密码,直接跳过登录. 翻了不少资料,总的来说好像都要操作注册 ...
- 小程序向webview传参_独家 | 支付宝小程序向个人开发者开放公测
基于兴趣和周围小群体开发的个人小程序,才是为支付宝提供更加多样化的生活服务场景的来源. 文 | Tech星球 (微信ID:tech618) 尹非凡.刘宁宁 2月26日,Tech星球(微信ID:tech ...
- php 小程序页面传参,介绍小程序中传递参数的实现方法
这篇文章主要介绍了微信小程序 参数传递详解的相关资料,需要的朋友可以参考下 微信小程序的推出,无疑将会在移动互联网行业里再次掀起风浪. 有人会质疑小程序会不会火, 会不会火我不知道, 看微信的用户量即 ...
最新文章
- 一个神秘URL酿大祸,差点让我背锅!
- poj1740 A New Stone Game
- Script:partition table into rowid extent chunks
- django from组件 实现增加 删除 编辑(推荐用法)
- 基于numpy实现线性回归问题分析
- iOS 证书错误 Certificates下面的 App Store and Ad Hoc是灰的?? 点不了
- 第一次尝试修复Hbase2出现Region不一致,HBCK2
- 我的世界linux服务器乱码,我的世界服务器控制台使用上箭头乱码解决办法
- WorldCat Search : PHP OCLC Web Services Library
- xp系统windows 组件向导无iis安装选项解决办法
- java 获取密码框密码,获得Windows下的密码框密码--编程学习网
- Spark 机器学习 —— 从决策树到随机森林
- c语音10的n次方_在C语言中,10的n次方怎么表示?
- 中文维基百科数据处理
- php做个抽签人名,基于JS实现的随机数字抽签实例
- 使用python提取英语句子中的英文单词(初学)
- Dynamics CRM 审批流引擎
- EasyClick adb shell命令大全
- eNSP模拟简单网络环境
- 如何学习(Java)
热门文章
- 下列软件包有未满足的依赖关系:无法修正错误,因为您要求某些软件包保持现状,就是它们破坏了软件包间的依赖关系
- Android报错:java.lang.ClassCastException: com.github.mikephil.charting.charts.PieChart cannot be cast
- Eclipse — 更改包名后导致服务器启动报异常
- linux下vim的安装与配置(centos)
- WebFrom 【文件上传】
- MAC系统XAMPP 中 MySQL命令行client配置使用
- 开源协议的几种类型认识
- Xcode之断点调试
- java基础学习总结——流
- selinux --chcon命令