技术框架
本章节详细介绍虎牙小程序的技术框架，包括项目的组织结构、文件类型、组件、样式、终端能力还有一些技术限制等。
组织结构
在小程序项目里面已经简单介绍过小程序项目的目录结构和具体配置了，其中最关键的是：
project.config.json中关于buildConfig里面的入口配置，其中每一项声明了不同小程序类型的不同入口：
{
/* ... */
"builder": {
"name": "@hyext/builder-beyond",
"config": {
/* ... */
"buildConfig": {
"H5": [ /* 技术栈，支持H5 */
{
"entry": "index.js", /* 对应的入口文件 */
"extType": "app_panel_h5", /* 小程序类型 */
"platform": "web" /* 平台，支持pc/web/app，视小程序类型而定 */
}
]
},
/* ... */
}
}
}
我们可以通过npx hyext config命令重新配置这个小程序项目支持的小程序类型。对于已经初始化过的项目，这个命令生成的代码不一定符合当前项目的一些规范，这时候手动修改project.config.json文件比较合理。就是在buildConfig里面的H5字段中增加对应的入口即可，下表是技术栈、小程序类型、平台之间的关系，供各位参考：
以使用hyext init初始化的project.config.json为例：
{
"name": "foo",
"builder": {
"name": "@hyext/builder-beyond",
"config": {
"hostId": "huyaext",
"webSDKVersion": "latest",
"webTitle": "虎牙小程序",
"designWidth": 750,
"buildConfig": {
"H5": [
{
"entry": "index.js",
"extType": "web_video_com",
"platform": "web"
}
]
}
}
}
}
如果需要增加一个虎牙PC观众端-面板(pc_panel)小程序类型，则只需要手动修改project.config.json：
--- a/project.config.json
+++ b/project.config.json
@@ -29,6 +29,11 @@
"entry": "index.js",
"extType": "web_video_com",
"platform": "web"
+ },
+ {
+ "entry": "index.js",
+ "extType": "pc_panel",
+ "platform": "pc"
}
]
},
然后执行hyext start启动开发服务，在/dist/build-results目录中就会多生成一个pc_panel.json的文件，参考创建小程序中程序设置相关的步骤把这个json拖动过去（前提是这个小程序的权限包含对应的小程序类型）即可生效，在直播间中预览。
- 入口文件：通过上述的配置决定，入口文件中可以自定义
registerApp()传入的React组件，即可渲染自定义的内容了：
import { registerApp } from '@hyext-beyond/core'
import App from './viewer/app' /* 可以修改成自己的组件，其他两行建议不要修改 */
registerApp('quick-start', App)
其他的部分，框架层面就跟一个普通的React项目没有区别了，可以使用React的各种平台无关的生态组件，例如redux、react-query等。
文件类型
虎牙小程序平台支持的文件类型有：
| 类型 | 扩展名 |
|---|---|
| 图片 | *.webp、*.gif、*.jpg、*.jpeg、*.png、*.svg |
| 虎牙小程序样式文件 | *.hycss |
| 脚本文件 | *.js、*.jsx、*.ts、*.tsx |
除了上述文件之外，其他文件不会被构建到线上环境中，例如不是通过import或者require引入的使用相对路径访问的资源等。
组件
虽然虎牙小程序项目是一个“纯前端”的React项目，但是由于代码是跨平台使用的，所以源码中使用的组件必须要平台无关，即html标签（div、span等）是不能使用的。为此，虎牙小程序平台提供了一套基础组件hyui供业务进行布局、渲染，保证代码是跨平台安全的。
样式
为了让开发体验更加一致，虎牙小程序平台提供了一套能兼容WEB和APP的样式方案hycss，如在小程序项目中的viewer/app.hycss：
.container {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
看上去跟普通的css是类似的，不过：
- 需要遵守这个约束;
- 不能层叠，样式只能应用到具体的className;
- 自带自适应布局，根据
project.config.json里面的designWidth作为容器宽度自动计算对应的像素值;
编写平台相关的代码
虎牙小程序平台还提供了一些技术手段供开发者根据自己的业务需求编写一些平台相关的代码，有两种途径。
编译期处理
第一个是使用特殊的文件名标识平台，在编译期进行跨平台的处理，假设已经按照快速开始的步骤把小程序添加到虎牙主站和虎牙APP的直播间，现在我们增加一个文件：
viewer/demo.js
export const a = '我是通用文案'
修改viewer/app.js：
在直播间预览一下，虎牙主站：
虎牙直播APP：
可以看到文案的内容改变了。现在，我们再创建一个文件：
viewer/demo.h5.js
export const a = '我是H5文案'
重启一下开发服务，在虎牙主站预览：
然而在APP上预览则没有变化。
在编译期做平台相关的处理有以下几个特点：
- 仅支持
*.js、*.jsx、*.ts、*.tsx这些后缀的文件做平台区分处理； - H5专用的文件可以使用html标签（除非业务必须这么做，虎牙小程序平台强烈建议不要这么做）；
- RN专用的文件可以使用React Native生态的一些需要
react-native link的组件，默认支持：- react-native-linear-gradient
- react-native-svg
- react-native-webP
- react-native-webview
- react-native-sound
运行期处理
运行期处理的方式会比较多：
global.__os："web"、"ios"、"android";- 在
project.config.json中配置的入口文件中自行引入平台相关的全局变量，如：
/* index.js */
global.ROLE = 'viewer'
/* ... */
/* index_streamer.js */
global.ROLE = 'streamer'
/* ... */
- 通过hyExt.env.getHostInfo()获取宿主相关信息来决定具体终端的逻辑，得异步处理；
终端能力
虎牙直播平台的各个终端通过JS SDK给虎牙小程序提供终端和直播能力，这些能力包括但不限于：
- 获取直播间信息，包括观众、主播、直播间、监听礼物、弹幕、高级用户进场等；
- 帮助主播侧内容生产，包括连麦、AI识别、图层等；
- 偏技术的能力，包括简单的KV存储、消息通道、网络代理等；
在场景文档里面会有详细的例子，帮助我们使用虎牙直播平台的能力，在SDK文档里面会有具体JS SDK API的详细说明。
技术限制
由于虎牙小程序平台是嵌入到直播间里面，对代码执行有一定的安全限制。
虎牙主站/PC主播端/PC观众端/虎牙直播APP（iOS高于等于11.2.0 安卓高于等于11.6.20）/虎牙助手APP（高于等于5.26.10）的安全限制
- 不允许使用以下接口
XMLHttpRequestWebSocketfetchEventSourceFunctionevalalertWorkerSharedWorkerServiceWorkerFileFileListFileReaderWebAssembly
- 不允许插入iframe和embed
- 不允许使用WebRTC
- 不允许动态插入外部脚本或者外部样式表
- 不允许引用指定域名之外的资源，如：图片、字体、媒体等
- 图片地址不允许使用dataURL
虎牙直播APP（iOS低于11.2.0 安卓高于等于11.6.20）/虎牙助手APP（低于5.26.10）的安全限制
- 不允许使用以下js接口
XMLHttpRequestWebSocketfetchEventSourceFunctionevalalertWorkerSharedWorkerServiceWorkerFileFileListFileReader
- 不允许使用以下React Native组件
WebViewLinkingAlertAlertIOSToastAndroidModal
Image组件的图片来源仅支持本地图片和指定域名的图片- 不允许使用base64格式的图片