在直播间预览在上一步中我们已经创建了一个虎牙小程序并为其配置了一个开发版本。现在我们需要在直播间中预览这个虎牙小程序。
注意:以下步骤均使用上一步创建小程序的账号进行操作。
进入自己的直播间用当前账号访问虎牙个人中心,如果当前账号不是虎牙平台的主播,会显示:
点击下方“成为主播”卡片:
会跳转到相关页面,根据向导下载虎牙直播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
虎牙直播APP
◯ 浮窗
❯◉ 面板
(Move up and down to reveal more choices)
回车之后我们可以看到project.config.json增加了一些配置:
再次执行npm start,把dist/build-result/*.json重新拖入程序设置中的终端类型设置,可以发现“虎牙直播APP-面板”也选中了:
点击“提交”按钮保存配置。现在可以打开特定版本的虎牙直播APP,在搜素中输入房间号,进入这个账号的直播间,会弹出跟WEB主站类似的弹窗:
同样点击“接受”按钮,在视频下方的tab页选择“聊天”:
点击弹幕输入框右侧的“互动面板”:
可以看到小程序的入口了,点击该入口就可以弹出我们的小程序面板了:
在APP上方可以看到开发版本的加载进度,等待加载完成之后就可以看到小程序面板的内容了:
现在我们就可以在这个直播间进行小程序的业务开发了。
了解更多关于虎牙小程序技术框架相关的内容,请查看进阶相关的内容,或者想要进一步了解虎牙小程序能做什么,请查看场景相关的内容。
FAQQ:为啥没看到小程序入口?
A:小程序入口默认并不是常驻的,需要配合主播端开启/关闭入口,详情请参考小程序入口控制相关的内容
Q:为啥没看到弹幕输入框右边那个互动面板的入口?
A:由于直播间模版改版,请参考虎牙直播APP-面板最后注意事项的相关说明