火山引擎提供作者主页H5页面,用于展示作者发布的所有内容作品,客户可以通过webview/iframe加载作者主页。
视频 | 预览图 | |
---|---|---|
示例效果 |
获取个性化内容接口会返回home_page
字段,即火山引擎H5作者主页。
使用 webview 或 iframe 等,直接加载火山引擎H5作者主页。
通过webview快速接入H5应用后,可以通过JSBridge进行相互之间的交互和通讯。部分接口在接入阶段必须支持,否则会影响功能的正常使用,如下文的强依赖接口。
说明
合作方客户端提供接口,火山引擎H5作者主页跳转内容详情页。用户点击H5作者主页的作品列表时,H5作者主页调用该接口,由客户端跳转到具体的内容详情页,如Native实现的小视频详情页。
字段 | 类型 | 说明 | 是否必填 | |
---|---|---|---|---|
data | id | String | 文章ID | 是 |
title | String | 文章标题 | 是 | |
url | String | 文章H5详情页链接 | 是 | |
type | String | 文章类型(profile_article 图文,profile_video 横版短视频,profile_aweme 竖版小视频,profile_thread 短内容) | 是 | |
abstract | String | 文章内容摘要 | 是 | |
shareUrl | String | 文章H5详情页分享链接 | 是 | |
rangeListId | String[] | 用户点击文章的作品区间ID列表,示例:[...前10条, 当前文章, ...后10条] | 是 |
合作方客户端提供接口, H5作者主页实现作者关注。客户接入关注作者能力,并开启H5作者主页关注功能。用户点击H5作者页关注按钮时,H5作者页调用该接口,由客户端完成作者关注状态变更。
字段 | 类型 | 说明 | 是否必填 | |
---|---|---|---|---|
data | authorId | String | 关注作者对应的作者ID | 是 |
action | String | 关注作者:'subscribe' | 是 |
合作方客户端提供接口, H5作者主页关注状态变更结果同步。客户接入关注作者能力,并开启H5作者页关注功能。用户触发关注作者操作后,关注状态变更结果同步到H5作者页注册的方法中。
字段 | 类型 | 说明 | 是否必填 | |
---|---|---|---|---|
data | authorId | String | 当前页面的作者 ID | 是 |
callbackApi | String | H5作者页注册方法,使用evaluateJavaScript构造响应数据,回传关注状态变更信息 | 是 |
字段 | 类型 | 说明 | 是否必填 | |
---|---|---|---|---|
code | Number | 接口调用结果,0代表成功,非0代表失败 | 是 | |
message | String | 接口调用结果描述 | 否 | |
data | [authorId] | Object | 基于作者ID为Key的对象,Value为布尔值,true为关注状态,false为未关注状态 | 是 |
“onSubscribeStateChange”同步作者状态变更信息,示例代码:
webView.evaluateJavascript( "${callbackApi}({ data: { 1234567: true, 7654321: false } })" ) {}
“jumpDetailPage”接口的实现,示例代码(Android版):
// ...其它依赖... import com.google.gson.Gson // 定义JSBridge接口 public class MyJSInterface(private val webView: WebView) { class RequestData ( val data: Any?, val callbackApi: String?, // callbackApi为js回调函数,格式为:'window.toutiao.__callback__···' ) {} @JavascriptInterface fun jumpDetailPage(params: String) { val gson = Gson() val data = gson.fromJson(params, RequestData::class.java) if (data.id !== null && data.rangeListId !== null) { // 如,打开Native小视频列表页,并支持上下滑动切换视频... } } } // Webview初始化支持JSBridge class DemoFragment : Fragment() { // ...其它逻辑... override fun onCreateView(): View { val webview: WebView = _binding!!.webviewHome webview.apply { settings.javaScriptEnabled = true addJavascriptInterface(MyJSInterface(webview), "nativeBridge") } webview.loadUrl(config.url) // ...其它逻辑... } }