HOME

快速开始

小程序系统结构

小程序系统主要由以下部分构成：

• 小程开发平台：
  • 开发核心：
    • 小程序前端：由宿主基础组件、开发SDK 以及开发者提交的小程序业务逻辑代码组成，可在虎牙直播间内运行
    • 小程序服务后台：小程序平台提供的后台服务，包括小程序API，以及账号创建、小程序创建、上下架、代码构建、审核发布等
  • 开发者中心：面向开发者的小程序管理后台，提供对小程序的配置、版本管理、审核发布等操作功能
• 小程序商店：即虎牙小程序的应用商店，提供小程序搜索，以及主播添加/移除小程序功能
• 小程序：即开发者开发的小程序，包括提交到虎牙开发者中心的小程序前端代码，以及对应的小程序后台（可选）

小程序创建流程

开发者中心

提供简单易用的开发者管理后台，简化开发者对小程序的配置、版本管理、审核发布等流程。了解更多>>

小程序商店

主播在商店能够对其直播间进行小程序的安装与卸载。（暂未开放、敬请期待）

终端显示

形态

虎牙小程序支持在虎牙平台的主要终端运行小程序，开发者可根据具体业务场景设计对应终端的小程序。

具体终端如下：

• 主播端（PC端）: 用于主播在开播时设置小程序面向观众所展示的相关内容，入口放置于开播工具内。

• 观众网页端（WEB端）: 在虎牙主站直播间内展示小程序内容，入口放置于视频下方的互动通道模块，点击即可打开（更多放置入口目前正在开发中，敬请期待）。

• 观众移动端（APP端）: 和观众网页端相似，区别在于在APP端直播间内展示小程序内容，入口放置于公屏右侧的互动通道模块，点击即可打开（更多放置入口目前正在开发中，敬请期待）。

开发技术栈说明

• 小程序终端开发方式主要以WEB前端开发的技术栈为主，包括 HTML+CSS+Javascript 以及 React-Native

• 请务必使用官方提供的脚手架(hyext)进行开发，目前支持框架以及类库包括Vue、React、JQuery以及原生React-Native。

• 虎牙小程序对开发者所使用的框架、插件依赖有所限制，如需新增插件与类库，可发送邮件至hy-ext@huya.com或到github issue反馈，我们会及时跟进。

终端与WEB前端技术栈的对应关系：

主播端	观众网页端	观众APP端
HTML + JS + CSS	HTML + JS + CSS	React-Native

创建你的HelloWorld

1. 安装开发者工具脚手架。

npm install -g hyext

2. 初始化项目并选择框架。

hyext init HelloWorld

3. 引用web端SDK

注意：这个步骤非常重要，忽略掉这个步骤可能导致Web端小程序一直处于加载中的状态。

对于主播端，请在html中引用如下sdk链接:

https://hyext.msstatic.com/hy-ext/1.1.0/hy-ext-pc.js

对于用户端，请在html中引用如下sdk链接:

https://hyext.msstatic.com/hy-ext/1.1.0/hy-ext-web.js

4. 执行命令启动本地服务进行开发调试。

hyext run dev

5. 在开发者中心创建小程序,配置好测试路径以及访问白名单，点击“在商店中查看”按钮进入小程序商店。

6. 在小程序商店进行安装。

7. 进入直播间，在互动通道栏找到配置好的小程序icon,点击打开即可预览。

小程序相关开发导航

• 开发示例
• 开发者中心
• 前端开发指南
• SDK文档
• 开发者后台API