互动功能接收端 UI 组件

简介

保利威各开播端、助教端都可以在直播过程发起签到、抽奖、问卷等直播互动。对应地，在观看端也需要呈现这些互动。为了让保利威云直播观看页以及客户定制观看页都能方便地接入这些功能，我们把互动功能做成了 SDK 以及 UI 组件。

考虑到客户可能需要对互动功能的 UI 进行定制，所以我们的 UI 组件是开源的，即本开源项目。

概览

互动功能接收端 UI 组件是基于 Vue.js 2.6 开发的，目前包含以下子组件：

| 功能 | 目录 | 备注 | | --- | --- | --- | | 签到 | src/entry/check-in | | | 问卷 | src/entry/questionnarie | | | 答题卡 | src/entry/answer-card | | | 公告 | src/entry/bulletin | 新版公告 | | 公告 | src/entry/announcement | 旧版公告（废弃，不再维护） | | 报名抽奖 | src/entry/enroll-lottery | | | 反馈举报 | src/entry/feed-back | | | 无条件抽奖 | src/entry/lottery | | | 条件抽奖 | src/entry/welfare-lottery | | | 卡片推送 | src/entry/push-card | | | 商品库 | src/entry/product | | | 商品库 - 弹层卡片 | src/entry/product-bubble | | | 问答 | src/entry/question-answer | | | 图文直播 | src/entry/tuwen | |

项目启动

安装依赖：

npm ci

运行本地开发环境：

npm run dev

传入对应参数，具体请参考文档

使用浏览器打开 https://localhost:24001 即可运行 demo。

目录说明

| 路径 | 说明 | | --- | --- | | build/ | 构建逻辑 | | public/ | demo 页 html 文件 | | src/components/ | 通用组件 | | src/entry/ | 提供各互动功能模块下集成度较高的入口组件，互动模块通常在PC和移动端展示上有区别，命名入口文件名需要带Mobile和Pc进行区分。 | | src/demo/ | demo 组件，展示如何引入及使用对应场景的组件 |

构建

构建命令为：

npm run build

构建后的文件会放置在项目内的 dist 目录中，这些文件包括：

• UMD 规范的 js 文件，位于 dist/lib/；
• CommonJS 规范的 js 文件，位于 dist/lib/；
• 图片、字体等资源文件，位于 dist/assets。

您需要自行把资源文件发布到服务器上，并相应配置 webpack.lib.config.js 中的资源发布路径 publicPath，才可以正常引用。