浮窗

本章节介绍小程序浮窗，如何使用小程序浮窗以及将已有的面板类型小程序改造成浮窗类型小程序。

小程序共有以下四种浮窗终端类型：

• 虎牙主站-浮窗
• 虎牙直播APP-浮窗
• 虎牙助手APP-浮窗
• PC观众端-浮窗

小程序浮窗必须 设置小程序布局(hyExt.panel.setLayout) 之后才能够正常地在直播间进行显示，另外开发者还可以调用Js SDK监听当前直播间小程序容器布局变化消息(hyExt.context.onLayoutChange)。

为了让开发者能够更容易理解小程序浮窗，本章节我们将会通过新建浮窗示例小程序 和 使用@hyext/popup简化浮窗小程序两种方式体验浮窗的基本使用。

看天气小程序是虎牙小程序内部提供的一款工具类的示例小程序（代码仓库），属于面板类型的小程序，运行终端有虎牙主站面板和虎牙直播APP面板。

本章节展示的是通过 @hyext/popup将该面板类型小程序改造成浮窗类型小程序，可以在代码仓库查看改造前项目的详细代码；可以在代码仓库查看改造完成项目的详细代码。

新建小程序

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

• 虎牙直播主站-浮窗
• 虎牙直播APP-浮窗
• 虎牙助手APP-浮窗
• PC观众端-浮窗

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

在小程序中使用组件

• 修改viewer/app.js

在直播间预览

参考在直播间预览的方式，运行npm start，启动开发服务，在直播间添加开发版小程序，使用 虎牙直播主站 和 虎牙直播APP 打开小程序。

• 虎牙主站

• 虎牙直播App

使用@hyext/popup简化浮窗小程序

直接使用hyExt.panel.setLayout()设置浮窗小程序的布局比较繁琐，为了降低浮窗小程序的开发门槛，我们提供了一个npm仓库提供一些React组件供开发者使用。将虎牙小程序提供的示例小程序项目（代码仓库）克隆到本地，进入miniapp/examples/weather-view文件夹，运行指令npm install安装Node.js依赖模块，安装完成后运行npx hyext start启动小程序项目。

参考创建小程序，创建一个小程序和创建一个开发版本，当前终端类型为 “虎牙主站-面板”和“虎牙直播App-面板”，在“程序配置”中上传build-result结果。重新启动小程序后在Web主站直播间预览如下：

改造小程序

开发者申请小程序浮窗权限通过后，需要进行以下操作：

1. 在终端运行指令npx hyext config重新选择要开发的终端为虎牙主站-浮窗和虎牙直播APP-浮窗；

2. 在开发者中心重新配置上传新生成的app_popup.json和web_popup.json文件；

3. 在项目根目录project.config.json文件的compileNodeModules加上@hyext/popup字段。

   { "builder": { "name": "@hyext/builder-beyond", "config": { "compileNodeModules": [ "@hyext/popup" ] } } }

4. 执行指令npm i @hyext/popup安装小程序浮窗依赖@hyext/popup，该依赖提供的组件用来实现浮窗的展示和布局；

5. 代码变动：看天气-浮窗小程序为宽和高为 400 ✖️ 400px，距离播放器左上角距离为 20% ✖️ 20% 的小程序。app端和web端布局一致。 样式和所有尺寸以app端的设计稿为基准。

• 在根目录下新建PopupLayout.js文件

  import { withPopupLayout } from "@hyext/popup"; const CONTIANER_WIDTH = 400; // 小程序容器宽度，即设计稿上小程序的宽度 const CONTAINER_HEIGHT = 400; // 小程序容器宽度，即设计稿上小程序的宽度 // 下载了demo的同学，可以随便改位置 export const MeasureBox = withPopupLayout( (rootLayoutInfo) => { return { left: "20%", top: "20%", }; }, { defaultHeight: CONTAINER_HEIGHT, defaultWidth: CONTIANER_WIDTH, border: false } );

• 在app.js文件中将原来的class App extends Component修改成class WeatherPanel extends Component，并添加以下代码：

  import { LayoutSwitch } from "@hyext/popup"; import { MeasureBox } from "./PopupLayout"; function App() { return ( <LayoutSwitch currentLayoutName="weather"> <MeasureBox name="weather"> <WeatherPanel></WeatherPanel> </MeasureBox> </LayoutSwitch> ) }

在直播间预览

重新启动小程序后预览如下：

• 虎牙直播APP

  

注意事项

• 改造之前的面板类型示例小程序为miniapp/examples/weather-view，若在改造过程中有任何代码问题可参考miniapp/examples/weather-view-popup-version项目代码进行修改；
• 若修改后的浮窗样式显示不正常，开发者可以使用miniapp/examples/weather-view-popup-version项目中的/weather-view/app.hycss文件替换掉当前项目的weather-view/app.hycss文件。

FAQ

Q：为什么我看不到小程序？

A：开发者需要需要在开发者中心申请“进阶型开发者”及以上的权限套餐，具体请参考权限管理：

然后由于浮窗申请权限后，默认的行为是需要按需加载，需要同一个小程序的主播端（PC/助手）向观众端发起请求，相关的内容请参考小程序入口控制

最后检查是否成功设置小程序布局(hyExt.panel.setLayout)且调用接口的结果是resolved的

Q: 为什么我的小程序无法点击?

A：需要向hy-ext@huya.com申请调整小程序的层级

相关链接

• 创建小程序项目
• 创建小程序
• 接口
  • hyExt.panel.setLayout
  • hyExt.context.onLayoutChange
• github仓库
  • 新建的浮窗示例小程序：https://github.com/huya-ext/hyext-examples/tree/master/examples/popup
  • 改造前的看天气小程序：https://github.com/huya-ext/miniapp/tree/master/examples/weather-view
  • 改造后的看天气浮窗小程序：https://github.com/huya-ext/miniapp/tree/master/examples/weather-view-popup-version