H5列表页

火山引擎内容定制H5应用是以移动H5页面为载体，具有个性化推荐能力的应用。客户侧研发仅需要将获取到的H5地址拼接业务参数后，嵌入到自身产品业务入口中即可，帮助您实现接入的高效率、低成本。

业务参数表

通过webview快速接入H5应用后，可以通过JSBridge进行相互之间的交互和通讯。部分接口在接入阶段必须支持，否则会影响功能的正常使用，如下文的强依赖接口。

强依赖接口

getAuthInfo

合作方客户端提供接口，H5应用调用该接口获取当前用户鉴权信息，实现千人千面个性化内容推荐。

接口入参：

接口返回：

可选交互接口

jumpDetailPage

合作方客户端提供接口，H5列表页调用该接口跳转详情页，保证列表页和详情页切换时，列表页滚动位置始终为用户跳转前的位置。接口不存在时，则H5直接通过location.href进行跳转。

接口入参：

switchTab

火山H5应用提供接口，客户端在用户进行左右滑动时，通过调用该接口实现多频道列表页的频道切换功能，优化用户体验。

接口入参：

接口返回：

refresh

火山H5应用提供接口，客户端调用该接口刷新H5列表页。如果传入category参数，刷新后，页面Tab将定位到具体频道列表上。

接口入参：

接口返回：

示例代码

客户端调用H5应用接口

调用“switchTab”接口切换H5列表页频道，示例代码：

webView.evaluateJavascript(
    "window.toutiao.switchTab({ data: { category: '***' } })"
) {}

客户端实现JSBridge接口

强依赖接口“getAuthInfo”的实现，示例代码(Android版)：

// ...其它依赖...
import com.google.gson.Gson

// 定义JSBridge接口
public class MyJSInterface(private val webView: WebView) {
    class RequestData (
        val callbackApi: String?, // callbackApi为js回调函数，格式为：'window.toutiao.__callback__···'
    ) {}
    class ResponseData (
        val code: Number, // 响应码非0代表异常
        val message: String, // 响应结果描述
        val data: Any,
    ) {}
    @JavascriptInterface
    fun getAuthInfo(params: String) {
        val gson = Gson()
        val data = gson.fromJson(params, RequestData::class.java)
        class AuthInfo (
            val signature: String = "***",
            val timestamp: String = "***",
            val nonce: String = "***",
            val access_token: String = "***",
        ) {}
        if (data.callbackApi !== null && data.callbackApi !== "") {
            webView.post {  webView.evaluateJavascript(
                "${data.callbackApi}(${gson.toJson(ResponseData(0, "success", AuthInfo()))})"
            ){} }
        }
    }   
}

// 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)

        // ...其它逻辑...
    }
}