Skip to content
liaozhuojie edited this page Jun 16, 2019 · 66 revisions

快速开始

小程序系统结构

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

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

小程序创建流程

开发者中心

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

小程序商店

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

终端显示

形态

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

具体终端如下:

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

  • 主播端(虎牙助手): 用于主播在虎牙助手APP开播时设置小程序面向观众所展示的相关内容,入口放置于虎牙助手APP工具内。

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

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

开发技术栈说明

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

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

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

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

主播端(PC端) 主播端(虎牙助手) 观众网页端(WEB端) 观众移动端(APP端)
HTML+JS+CSS React-Native HTML+JS+CSS React-Native

创建你的HelloWorld

  1. 安装开发者工具脚手架。
npm install -g hyext
  1. 初始化项目并选择框架。
hyext init HelloWorld

  1. 引用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
  1. 执行命令启动本地服务进行开发调试。
hyext run dev

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

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

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

小程序相关开发导航

Clone this wiki locally
You can’t perform that action at this time.