# 布局类型

创建完小程序和新版本后,在 版本管理——设置——程序设置 中有关于布局类型的选择,如下图

布局类型的选择关系到小程序在各端的展现形式,下面主要讲解一下不同选择所表现的效果

# 半屏

半屏布局类型在PC端主要以一个直播间的模态框进行展示,在App端则是直播间底部弹出的半屏窗口,具体展示如下图。

# PC端

# App端

# 推流

该类型是PC主播端独有的一种布局类型,使用该布局类型后,小程序在主播端以原生独立进程弹窗进行展示,可以最小化到系统任务栏,独立于直播间运行。使用独立弹窗加载的小程序还可以拥有使用 白板API 的相关能力,可以将小程序画面内容投屏到直播视频流里。

PS: 该类型小程序可以自定义页面的宽高

# PC端

# 全屏

全屏布局类型在PC端主播端以原生独立进程弹窗进行展示,在App端则是全屏窗口,具体展示如下图。

# PC主播端

# PC观众端

# App端

# 无需加载

这种类型主要是针对某些小程序只运行在PC主播端的情况,例如主播工具之类的小程序。勾选后小程序则不会在观众端运行

# 开发指南

勾选不同布局类型后对应加载的页面代码是有所区别的,具体规则如下:

我们使用小程序开发脚手架工具初始化小程序后项目结构如下图所示

  • 其中 m 目录下的代码是当布局选择半屏类型时或小程序在观众端运行时才会进行加载,观众端包含了PC观众端和App观众端。

  • streamer_pc 目录是布局选择推流或者全屏时在PC主播端(伴侣端)的独立弹窗中运行的代码

  • 全屏布局类型的小程序在PC主播端加载 streamer_pc 目录代码,观众端加载 m 目录代码

  • 如果小程序想要在各端都共用同一套代码,可以将业务代码统一写在 m 目录下,然后在 streamer_pc/app/streamer_pc.js 中引用 m 目录下组件