虎牙开放平台文档

小程序项目

虎牙小程序项目就是一个“纯”前端项目，所以不需要指定的开发者工具也能进行开发。我们来看一下执行npx hyext init之后生成的项目大概由哪些部分组成。

目录结构

quick-start$ tree -I node_modules
.
├── index.js                /* 观众端入口 */
├── index_streamer.js       /* 主播端入口 */
├── package-lock.json
├── package.json
├── project.config.json     /* 小程序项目配置 */
├── streamer                /* 主播端业务 */
│   ├── app.hycss
│   └── app.js
└── viewer                  /* 观众端业务 */
    ├── app.hycss
    └── app.js

小程序项目配置

{
  "name": "quick-start",                /* 小程序项目名称 */
  "outputPath": "dist",                 /* 终端配置输出的路径，建议保留默认值 */
  "releasePath": "release",             /* 小程序源码压缩打包的路径，建议保留默认值 */
  "ignore": [ /* ... */ ],              /* 压缩打包忽略的文件，可以在保留默认值的前提下增加自定义的内容 */
  "builder": {                          /* 构建器的配置 */
    "name": "@hyext/builder-beyond",    /* 默认的虎牙小程序构建器，建议保留默认值 */
    "config": {
      "hostId": "huyaext",              /* 虎牙小程序业务标识，必须保留默认值 */
      "webTitle": "虎牙小程序",
      "designWidth": 750,               /* 设计稿页面的宽度 */
      "buildConfig": {                  /* 构建配置 */
        "H5": [                         /* 构建配置，数据结构跟上面的一致，平台需要根据小程序类型指定为web或者pc */
          /* ... */
        ]
      },
      "https": true,                    /* 开发服务是否启用https，由于需要在虎牙直播WEB主站预览小程序，建议保留默认值 */
      "host": "localhost",              /* 开发服务的主机名，可以是IP地址。如果本机有多个IP地址，必须显式指定一个 */
      "useCssLoader": true,             /* 是否启动hycss语法糖，建议保留默认值 */
      "port": 18080,                    /* 开发服务的端口 */
      "enableLint": {                   /* 是否启用静态检查 */
        "stylelint": false,
        "eslint": false
      },
      "compileNodeModules": []          /* 需要编译的业务模块，有一些第三方的组件是通过源码提供的，集成的时候需要在这个字段显式指定 */
    }
  }
}

入口

以观众端入口（./index.js）为例：

import { registerApp } from '@hyext-beyond/core'  /* 引入注册方法 */
import App from './viewer/app'                    /* 引入业务的具体内容，一个React组件 */

registerApp('quick-start', App)                   /* 把这个组件注册到小程序的项目名 */

主播端入口（./index_streamer.js）跟观众端入口唯一的不同就是引入的业务不同而已。

业务内容

由于业务内容就是一个普通的React组件，我们以生成的观众端的模版文件为例。模版生成的业务有两个文件：

import { UI } from '@hyext/hy-ui'         /* 引入跨平台组件 */
import React, { Component } from 'react'  /* 引入React */
import './app.hycss'                      /* 引入hycss样式文件 */

const { View, Text } = UI

class App extends Component {             /* 业务组件，就是一个普通的React组件 */
  render () {
    return (
      <View className="container"><Text>hello world</Text></View>
    )
  }
}

export default App                        /* 导出React组件 */

第一个是React组件的js文件，详细的信息可以查看技术框架的相关内容。

.container {                              /* 仅支持类选择器 */
  display: flex;                          /* 支持大部分的css规则 */
  flex: 1;
  justify-content: center;
  align-items: center;
}

第二个是虎牙小程序平台提供的语法糖，跨平台通用的*.hycss文件，是css的一个子集，详细的信息可以查看技术框架的相关内容。

模版生成的项目结构和相关文件就这么多。当然，这个模版只是渲染了一个普通的React组件，虎牙小程序平台还提供了强大的JS SDK供开发者使用虎牙直播的技术能力，相关的内容可以查看场景文档。