火山引擎内容定制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)

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

小程序/Iframe接入列表页

const iframeDom = document.querySelector('#iframeId');
    
    const handleMessage = (event: MessageEvent) => {
      const { api, callbackApi, ...others } = event.data || {};

      switch (api) {
        case "getAuthInfo":
          /* 传递用户鉴权信息至火上H5端，用于拉取个性化推荐内容 */
          iframeDom?.contentWindow?.postMessage({
            code: 0,
            data: {
              signature: 'xxx',
              timestamp: 'xxx',
              nonce: 'xxx',
              access_token: 'xxx',
            },
            callbackApi: callbackApi,
          }, '*');
          break;
        case "jumpDetailPage":
          /* 列表页跳转详情页前，会postMessage同步客户端。如果返回code=0，则由客户侧控制详情页的跳转 */
          // others参数可参考：https://www.volcengine.com/docs/6392/1167827#jumpdetailpage
          iframeDom?.contentWindow?.postMessage({
            code: 0,
            callbackApi,
          }, '*');
          break;
        default:
          break;
      }

      if (event.data === "test") {
        console.log("test");
      }
    };
    
    window.addEventListener("message", handleMessage);