虎牙开放平台文档

在直播间预览

在上一步中我们已经创建了一个虎牙小程序并为其配置了一个开发版本。现在我们需要在直播间中预览这个虎牙小程序。

注意：以下步骤均使用上一步创建小程序的账号进行操作。

进入自己的直播间

用当前账号访问虎牙个人中心，如果当前账号不是虎牙平台的主播，会显示：

点击下方“成为主播”卡片：

会跳转到相关页面，根据向导下载虎牙直播PC主播端并完成实名认证后，成为虎牙平台的主播，再次访问虎牙个人中心，则会出现主播信息相关的卡片：

点击该卡片查看当前账号的主播信息：

这里可以看到当前账号的房间号，直接访问https://www.huya.com/${房间号}即可访问当前账号的直播间：

把小程序添加到直播间

回到开发者中心，找到上一个步骤创建的版本，点击右上角按钮：

点击“安装”按钮，跳转到这个小程序版本的详情页面：

点击页面右上方的“添加”按钮，添加完成后点击上方“我的”按钮，进入已安装小程序页面：

可以看到，这个小程序版本已经跟当前账号的直播间关联起来了，下一步我们进入虎牙直播WEB主站的直播间去预览我们的小程序。

在WEB主站预览

访问https://www.huya.com/${房间号}：

在视频下方的互动通道区域会出现我们的小程序的入口。点击这个入口，会弹出小程序面板：

由于是开发版本，会弹出提示弹框，点击“接受”按钮，会看到小程序面板加载中的界面：

注意：如果出现长时间加载中的话，确认一下：
小程序项目的npm start是否在执行中？
是否在浏览器中打开过本地页面的地址并同意开发服务的安全证书的使用？

加载完毕后，小程序的内容就展示出来啦：

在虎牙直播APP预览

到此为止我们已经成功在虎牙直播WEB主站显示我们的小程序面板了。下一步我们需要在虎牙直播APP也显示我们的小程序面板，需要扩展这个版本支持的小程序类型。回到虎牙小程序开发者中心，访问我们的小程序的开发版本的设置页面，进入“程序设置”的tab页，我们可以看到只有“虎牙主站-面板”是选中的：

原因是因为我们创建的虎牙小程序项目中，初始化的时候只选了这个小程序类型。现在我们来扩展一下这个小程序项目，让其支持“虎牙直播APP-面板“。首先，在小程序项目的根目录执行：

$ npx hyext config

会重新显示选择虎牙小程序类型的问答环节，在这里我们同时选中“虎牙主站-面板”和“虎牙直播APP-面板”：


$ npx hyext config
使用默认小程序运行平台
? 请选择小程序类型 (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)

 虎牙直播APP
 ◯ 浮窗
❯◉ 面板

(Move up and down to reveal more choices)

回车之后我们可以看到project.config.json增加了一些配置：