火山引擎提供用于分享的H5详情页链接，客户侧用户可以在客户端内容场景中，点击分享按钮，将内容分享到如：微信好友，朋友圈等应用端外场景。

1. 获取个性化内容接口会返回share_url字段，即火山引擎内容H5分享页面链接，以及其它相关信息。

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

2. 开发H5页面壳子，部署到客户域名下，然后再壳子中使用iframe加载H5详情页正文部分。

3. 自定义的业务模块，如示例中的顶部栏。客户自主实现顶部UI，导流浮层，二次分享等。

4. 客户域名链接格式示例：`https://客户域名?shareUrl=${encodeURIComponent(share_url)}`。

• 分享后打开此链接时，客户域名H5壳子中处理decodeURIComponent()，将decode后的share_url填入到iframe中；

// 客户H5在初始化时添加事件监听，接收火山引擎H5高度信息
window.addEventListener('message', function(event){
    try{
        // 可以看到这里data的格式是一个json字符串：{ contentHeight: xxx}
        var data = JSON.parse(event.data || '{}') || {};
        var contentHeight = data.contentHeight;
        document.getElementById('iframeId').style.height = contentHeight + 'px'
    } catch(err){
        console.log(err)
    }
}, false);

如果需要完整展示火山引擎H5详情页，可以将iframe样式设置为：

/* iframe可滚动，并充满整个页面*/
#iframeId{
    width: 100%;
    height: 100vh;
}
/* 导流浮层 */
#fixedUgBanner{
    position: fixed;
}

fe_share_demo.zip

5.01KB