背景
今年九月时,闲鱼将原有的社区产品 “鱼塘” 升级为 “会玩” 社区。对于一个社区型的产品,分享功能可以借助用户的社交圈子进行传播,提升产品的曝光量,吸引新用户关注,拉拢老用户留存。但闲鱼原有的分享功能更多的是从商品分享的角度来设计的,不适合会玩社区中用户创建的画报分享,为此我们开发新版的分享组件。
下文将介绍新版分享组件的实现。
具体实现
分享组件时序图

如上面图中所示,我们将新版的分享组件分为了分享页面、分享底层 API
和回流页三个部分:
•分享页面:前端通过 Weex 实现分享页面,在保证两端的体验一致的情况下,还拥有不错的可扩展性;
•分享底层 API:客户端提供分享所需的底层能力,通过 JSBridge 的方式让前端调用;
•回流页:提供统一的拉端能力;
画报生成
传统认知中认为分享的内容是最重要的,但实际上分享的形式同样重要。
分享形式对比

相比于以前图文链接的分享形式,画报分享能够将更多的内容展示给被分享者,提高分享的吸引力。
对于画报的生成,其要解决的就是将给定的若干张图片拼接成一张定宽的长图,我们可以通过归纳法来解决这个问题:
1.通过图片的宽高大小关系来将图片分成横图(宽 ≥ 长)和长图(长 > 宽);
2.处理只有 1 张图的情况,我们只需要将这个图片缩放到所需的定宽即可;
3.处理只有 2 张图的情况,这个时候我们排列方式如下:


API给前端调用 下面是我们抽象的分享基础能力。


在完成分享之后另外一个重要的环节就是回流,此次的分享也改进了回流流程:


URL Scheme的方式唤起客户端,而新版的我们采用了
Universal Link。
URL Scheme与
Universal Link对比

Universal Link理解成被 App 注册的
https链接。当 App 安装时,系统会去注册的域名下检查是否存在相关的验证的文件,如果存在,那么以后浏览器在处理该域名的下的链接时就会调用对应的 App 的做处理。

Universal Link必须在页面发生跨域时才生效(未跨域的情况下,会被浏览器当作正常的浏览行为处理),所以在调用时需要特地的切换一个域名。如闲鱼分享的域名为
pages.goofish.com,配置了
Universal Link的域名为
pages.2.taobao.com。
Universal Link可以让我们更好的把控回流过程中的异常处理(如未安装 App),同时减少了二次确认的环节,降低此处的跳失率。

UI组件,然后以约定的数据结构来拼装页面,以满足不同分享场景的接入。
UI组件的拆解如下:


hybrid的方式开发分享页面,既满足了双端一致的体验,又拥有动态化的能力,方便后续接入更多的分享场景;最后还减少了回流的环节,提升用户的回流率。
References
[1]躺平: https://www.tangping.com/?tbpm=1
文章转载自闲鱼技术,如果涉嫌侵权,请发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。




