背景
随着 C 端流量红利的逐渐消失,端外投放已成为业务寻求增长的重要抓手之一。而不同 App 上存在不同应用场景、不同时期诞生的前端容器:
基于浏览器的 Webview 容器(h5
基于客户端渲染衍生的 React Native、Weex 容器
基于自绘渲染的 flutter 容器
平台开放能力的小程序容器
业务在端外进行跨端时,就需要前端同学对投放目标环境逐一评估和适配。在初期阶段,前端侧通常通过同一业务针对不同目标环境维护多套实现的方式进行支持,这使得工作量成倍增加。效率提升空间下,催生了跨端方案
问题定义
在跨端业务的前端代码中,通常存在大量的跨端 JS API 调用的重复逻辑:
if (isH5) {
if (isXianyu) { // 闲鱼
webXianyuToast();
}else if (isTaobao) { // 淘宝
webTaobaoToast();
} else if(isAlipay){ // 支付宝
webAlipayToast()
}
// ...
} else if(isWeex)
// ...
这些调用从开发到上线通常需要经历的路径:
和业务同学确定需要投放的目标环境。如 H5(支付宝、淘宝、天猫等)
向目标容器维护者询问 API 调用方式
在不同环境下调试、开发
测试同学使用不同机型在不同 App 上适配
每一步都是比较耗时的体力活。假想,能够满足可用性、易用性、丰富性、可扩展性,使得业务直接开发如下代码,正常测试后即可上线。跨端 API 解决方案应该解决什么问题,提供什么能力呢?
import toast from 'uni-toast'
toast