You need to enable JavaScript to run this app.
导航
分享
最近更新时间:2023.02.23 11:36:06首次发布时间:2021.04.09 18:31:35

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

分享方案

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

分享效果

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

技术实现

分享页结构

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

说明

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

页面html示例

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

参数说明

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

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

分享详情页实现

  1. 火山引擎H5(仅正文部分)+ 客户自行实现其他版块(相关推荐、导流)
    这种形式,火山引擎H5会在iframe onload的时机下,向客户H5壳子以postMessage的方式同步内容高度,这个高度供客户设置iframe高度,此时iframe不可滚动。

注意

  • 监听时机:H5页面建议尽量早通过window.addEventListener添加"message"事件监听。不要在iframe onload时才添加监听器,以避免监听不到contentHeight的情况。
  • 监听频次:由于H5页面内的一些元素是通过接口异步获取的,首次同步的高度可能并不准确,会多次发送消息通知内容高度,因此建议客户能持续监听页面高度变化。

示例

// 客户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