You need to enable JavaScript to run this app.
最新活动
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们
导航

分享

最近更新时间2022.07.20 18:14:50

首次发布时间2021.10.18 11:12:18

火山引擎提供分享链接(ShareUrl),客户侧用户可以在客户端内容场景中,点击分享按钮,将内容分享到如:微信好友,朋友圈等应用端外场景。本文主要介绍分享功能的具体技术实现。

分享方案

  • 基于UI合规需求,图文、短视频、小视频的分享详情页在客户域名下;
  • 客户内嵌火山引擎的分享h5页面(ShareUrl),在h5页面内支持点击查看原文超链接,跳转到火山引擎域名下的内容详情页,且跳转后支持返回到原来的分享页面;
  • 分享h5页面只包括正文部分,默认展开全文(不折叠);
  • 客户自主实现顶部UI,导流浮层,二次分享等;

分享效果

场景分享页-客户域名点击“查看原文”跳转到火山引擎域名
图文详情页
短视频详情页

技术实现

分享页结构

推荐 】采用iframe嵌套火山引擎H5方式构成分享页,分享域名属于客户侧。

说明

  • 客户域名链接格式示例:
    https://客户域名?shareUrl=’ + encodeURIComponent(ShareUrl);
  • 分享后打开此链接时,客户域名H5壳子中处理decodeURIComponent(),将decode后的ShareUrl填入到iframe中;

页面html示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>客户域名的H5壳子</title>
</head>
<body>
    <iframe src="ShareUrl"></iframe>
    <p>客户侧自己dom</p>
</body>
</html>

参数说明

分享所需的参数均来自于“获取个性化内容”接口返回的Result结构中的字段,具体如下:

参数描述类型说明
ShareUrl分享页H5页面String
Title内容标题String
Abstract内容简介String
CoverImageList封面图,部分内容没有封面图,建议客户添加兜底图,避免引起展示空图片问题List<Image>

分享详情页实现

  1. 火山引擎H5(仅正文部分)+ 客户自行实现其他版块(相关推荐、导流)
    这种形式,火山引擎H5会在iframe onload的时机下,向客户H5壳子以postMessage的方式同步内容高度,这个高度供客户设置iframe高度,此时iframe不可滚动,建议客户能持续监听页面高度变化;
    示例
// 客户H5 接收信息
window.addEventListener('message', function(event){
        try{
            var data = JSON.parse(event.data || '{}') || {};
            var contentHeight = data.contentHeight;
            document.getElementById('iframeId').style.height = contentHeight + 'px'
        } catch(err){
            console.log(err)
        }
}, false); // 可以看到这里data的格式是一个json字符串:{ contentHeight: 300}
  1. 火山引擎H5(正文+[相关] + 评论+无限滚动)+ 客户浮层(如浮层导流位)
    这种形式下,需要客户将iframe样式设置为:
/* iframe可滚动,并充满整个页面*/
#iframeId{
    width: 100%;
    height: 100vh;
}
/* 导流浮层 */
#fixedUgBanner{
    position: fixed;
}

样式Demo

fe_share_demo.zip
5.01KB