创建小程序项目
跟微信小程序不一样的是，虎牙小程序项目就是一个纯前端项目，通过某些配置可以直接在浏览器运行。我们使用@hyext/cli进行初始化项目和启动开发服务。现在我们使用这个工具，初始化一个虎牙小程序项目、启动开发服务、在浏览器中预览。
注：最新版本为
把@hyext/cli安装到全局
$ npm i -g @hyext/cli
$ hyext --version
3.8.2
初始化项目
$ npm init -y
$ hyext init
运行npx hyext init之后，需要回答几个问题：
$ hyext init
将在当前目录创建项目
安装 builder: @hyext/builder-beyond (耗时操作, 请耐心等待)
added 1773 packages, and audited 1774 packages in 1m
64 vulnerabilities (6 low, 12 moderate, 42 high, 4 critical)
To address all issues, run:
npm audit fix
Run `npm audit` for details.
@hyext/builder-beyond 安装完毕.
使用默认小程序运行平台
? 请选择在哪个平台上开发小程序 (Use arrow keys)
nimo海外直播
准心直播
❯ 虎牙直播
中台测试
首先选择运行平台，使用方向键选中“虎牙直播”，回车后：
$ hyext init
将在当前目录创建项目
安装 builder: @hyext/builder-beyond (耗时操作, 请耐心等待)
added 1773 packages, and audited 1774 packages in 1m
64 vulnerabilities (6 low, 12 moderate, 42 high, 4 critical)
To address all issues, run:
npm audit fix
Run `npm audit` for details.
@hyext/builder-beyond 安装完毕.
使用默认小程序运行平台
? 请选择在哪个平台上开发小程序 虎牙直播
? 请选择小程序类型 (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
虎牙主站
❯◉ 面板
◯ 浮窗
◯ 全局面板
◯ 内部H5类型
然后需要选择这个虎牙小程序适用于哪些场景。虎牙小程序平台抽象了一个小程序类型，来区分不同终端的不同场景下小程序的不同交互形式。在这边我们选择虎牙主站-面板（按下空格键选中），然后回车即可。
$ hyext init
将在当前目录创建项目
安装 builder: @hyext/builder-beyond (耗时操作, 请耐心等待)
added 1773 packages, and audited 1774 packages in 1m
64 vulnerabilities (6 low, 12 moderate, 42 high, 4 critical)
To address all issues, run:
npm audit fix
Run `npm audit` for details.
@hyext/builder-beyond 安装完毕.
使用默认小程序运行平台
? 请选择在哪个平台上开发小程序 虎牙直播
? 请选择小程序类型 面板
? 是否使用TypeScript开发小程序 No
builder-beyond-template编译完成，花费28 ms
Project init finished
npm run start
Beyond · 安装SDK: --@latest
npm WARN using --force Recommended protections disabled.
added 3 packages in 6s
这样项目就初始化完成了。
在浏览器中运行起来
# 在项目根目录下执行
$ npm run start
> quick-start@1.0.0 start
> npx hyext start
启动开发服务
使用默认小程序运行平台
StartCmdChecker started on port 6060
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: https://localhost:18080/
<i> [webpack-dev-server] On Your Network (IPv4): https://172.21.40.10:18080/
<i> [webpack-dev-server] On Your Network (IPv6): https://[fe80::1]:18080/
<i> [webpack-dev-server] Content not from webpack is served from '/private/tmp/quick-start/node_modules/@hyext/builder-beyond/static' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'
DONE Compiled successfully in 6762ms
I Your web application is running here
I
I 项目根目录:/private/tmp/quick-start
I
I 本地服务:
I
I 虎牙主站-面板：https://localhost:18080/index_web_video_com.html
webpack 5.93.0 compiled successfully in 6762 ms
控制台输出上面的信息则表示开发服务器已经跑起来了。我们在浏览器中打开上面的地址https://localhost:18080/index_web_video_com.html：
点击高级 -> 继续前往localhost（不安全）：
我们打开项目，尝试修改一下viewer/app.js，把其中<Text>标签中的文字改一下：
返回浏览器页面，就能看到页面自动刷新啦：
到此，在本地预览虎牙小程序的流程已经完毕了。但是，脱离了虎牙直播平台的虎牙小程序是不完整的，下面我们将从如何获取开发者账号、创建小程序、把小程序添加到直播间这几个步骤进行说明。经过这几个步骤之后就可以了解到虎牙小程序真正的实力了。