虎牙开放平台文档

小程序入口控制

本章节介绍如何通过主播端小程序或者小程序API控制观众端面板交互类型小程序的入口。这个场景的背景是：

业务有一个“使用中”的状态，例如一个游戏业务，主播需要手动开启游戏、结束游戏，在这个过程中业务就处于“使用中”的状态；
比较好的体验是，观众端的小程序入口在业务处于“使用中”的状态时才显示出来，否则应该不显示入口；

为了满足上面的业务场景，虎牙小程序平台：

观众端小程序类型，（如果有）入口是默认隐藏的；
需要主播使用主播端小程序类型，例如PC主播端-面板，控制观众端小程序类型入口的显示/隐藏；

下面给出一个简单的例子供参考。

注：如果您的业务是需要一直显示入口的，例如一个数据面板、或者观众互动工具，并没有“运行中”的概念，请联系小程序平台进行评估。

准备工作

参考创建小程序项目，初始化一个小程序项目，其中小程序类型选择：

虎牙直播主站-面板
虎牙直播APP-面板
PC主播端-面板

参考创建小程序，创建一个小程序和创建一个开发版本。

新增示例组件

新建两个文件，src/common.js：

import React, { useState, useEffect } from 'react'
import { UI } from '@hyext/hy-ui'

import './common.hycss'

const { View, Text, Button } = UI

export const Example = () => {
  const [showResult, setShowResult] = useState('未开始')
  const [hideResult, setHideResult] = useState('未开始')

  const showEntrance = async () => {
    try {
      setShowResult('处理中')
      await hyExt.action.showEntrance({
        extTypes: 'web_video_com,app_panel'
      })
      setShowResult('成功')
    } catch (err) {
      setShowResult(`失败：${err.message}`)
    }
  }
  const hideEntrance = async () => {
    setHideResult('处理中')
    try {
      await hyExt.action.hideEntrance({
        extTypes: 'web_video_com,app_panel'
      })
      setHideResult('成功')
    } catch (err) {
      setHideResult(`失败：${err.message}`)
    }
  }
  return (
    <View className='example'>
      <Button onPress={showEntrance}><Text>显示入口</Text></Button>
      <Text>显示入口结果：{showResult}</Text>
      <Button onPress={hideEntrance}><Text>隐藏入口</Text></Button>
      <Text>隐藏入口结果：{hideResult}</Text>
    </View>
  )
}

src/common.hycss：

.example {
  width: 600px;
}

其中：

使用React.useState()创建了两个状态，分别记录显示和隐藏观众端小程序入口的操作状态，保罗未开始、处理中、处理成功/失败；
创建了两个按钮，点击的时候调用hyExt.action.showEntrance()和hyExt.action.hideEntrance()来控制观众端小程序入口的显示状态；
UI显示这些操作的状态；

在小程序中使用组件

修改viewer/app.js：

--- a/streamer/app.js
+++ b/streamer/app.js
@@ -1,5 +1,6 @@
 import { UI } from '@hyext/hy-ui'
 import React, { Component } from 'react'
+import { Example } from '../src/common'
 import './app.hycss'
 
 const { View, Text } = UI
@@ -7,7 +8,9 @@ const { View, Text } = UI
 class App extends Component {
   render () {
     return (
-      <View className="container"><Text>hello world</Text></View>
+      <View className="container">
+        <Example />
+      </View>
     )
   }
 }

在直播间中预览

参考在直播间预览的方式，运行npm start，启动开发服务，在直播间添加开发版小程序，使用PC主播端打开小程序：

同时在虎牙主站或者虎牙直播APP，进入同一个直播间，都找不到小程序的入口：

我们保持观众端的状态，点击主播端小程序上面的“显示入口”按钮，可以看到操作状态的变更：

回到观众端，可以看到入口出现了：

入口出现后，我们点击入口可以正常打开小程序面板。点击主播端小程序上面的“隐藏入口”按钮，可以看到操作状态的变更：

这时候回到观众端，发现入口再一次被隐藏了。

控制浮窗加载

某些虎牙终端还支持浮窗类型的小程序，默认状态下浮窗小程序是不会加载的，所以就算主播添加了小程序，在用户层面也是看不到效果的。要在观众端使用浮窗小程序，需要和上述类似的操作步骤，在主播端调用接口通知观众端加载浮窗小程序。基于上面的小程序，首先在project.config.json中增加一个虎牙主站的浮窗小程序类型：

--- a/project.config.json
+++ b/project.config.json
@@ -34,12 +34,17 @@
             "entry": "index_streamer.js",
             "extType": "pc_anchor_panel",
             "platform": "pc"
+          },
+          {
+            "entry": "index_popup.js",
+            "extType": "web_popup",
+            "platform": "web"
           }
         ]
       },

然后按浮窗的步骤增加一个入口index_popup.js和对应的组件viewer/app-popup.js：

/** index_popup.js **/
import { registerApp } from '@hyext-beyond/core'
import App from './viewer/app-popup'

registerApp('streamer-control', App)

/** viewer/app-popup.js **/
import { UI } from "@hyext/hy-ui";
import React, { Component } from "react";
import "./app.hycss";

const { View, Text } = UI;

class App extends Component {
  componentDidMount() {
    hyExt.panel.setLayout({
      x: 0.25,
      y: 0.25,
      width: 0.5,
      height: 0.5,
      visible: true,
      animate: false,
      alpha: 1,
    });
  }
  render() {
    return (
      <View className="container" style={{ backgroundColor: '#97DBAE' }}>
        <Text>浮窗</Text>
      </View>
    );
  }
}

export default App;

这样这个小程序就支持浮窗了。执行npm run start，在dist/build-result目录中会生成web_popup.json这个文件。打开对应小程序版本的版本设置，找到程序配置，把这个json文件拖入到开发配置中，会看到对应的浮窗小程序类型的相关配置：

再次进入上述预览的虎牙主站直播间，发现什么事情都没发生，我们需要在主播端增加对应操作才能在观众端加载这个小程序的浮窗类型：

--- a/examples/streamer-control/src/common.js
+++ b/examples/streamer-control/src/common.js
@@ -8,6 +8,8 @@ const { View, Text, Button } = UI
 export const Example = () => {
   const [showResult, setShowResult] = useState('未开始')
   const [hideResult, setHideResult] = useState('未开始')
+  const [loadResult, setLoadesult] = useState('未开始')
+  const [unloadResult, setUnloadResult] = useState('未开始')
 
   const showEntrance = async () => {
     try {
@@ -31,12 +33,46 @@ export const Example = () => {
       setHideResult(`失败：${err.message}`)
     }
   }
+  const loadPopup = async () => {
+    try {
+      setLoadesult('处理中')
+      await hyExt.backend.commonOperate({
+        key: 'controlPanelLoad',
+        param: {
+          extTypes: 'web_popup',
+          visible: true,
+        },
+      })
+      setLoadesult('成功')
+    } catch (err) {
+      setLoadesult(`失败：${err.message}`)
+    }
+  }
+  const unloadPopup = async () => {
+    try {
+      setUnloadResult('处理中')
+      await hyExt.backend.commonOperate({
+        key: 'controlPanelLoad',
+        param: {
+          extTypes: 'web_popup',
+          visible: false,
+        },
+      })
+      setUnloadResult('成功')
+    } catch (err) {
+      setUnloadResult(`失败：${err.message}`)
+    }
+  }
   return (
     <View className='example'>
       <Button onPress={showEntrance}><Text>显示入口</Text></Button>
       <Text>显示入口结果：{showResult}</Text>
       <Button onPress={hideEntrance}><Text>隐藏入口</Text></Button>
       <Text>隐藏入口结果：{hideResult}</Text>
+      <Button onPress={loadPopup}><Text>加载浮窗</Text></Button>
+      <Text>加载浮窗结果：{loadResult}</Text>
+      <Button onPress={unloadPopup}><Text>卸载浮窗</Text></Button>
+      <Text>卸载浮窗结果：{unloadResult}</Text>
     </View>
   )
 }

在原来的组件上新增了两个按钮和对应的操作结果展示。修改完成后打开主播端面板，点击“加载浮窗”按钮，可以看到浮窗代码加载起来的效果：

点击“接受”后，在视频区域会显示对应的浮窗小程序的内容：