# polyv-web-interactions-receive-sdk-ui-webview

**Repository Path**: lightling/polyv-web-interactions-receive-sdk-ui-webview

## Basic Information

- **Project Name**: polyv-web-interactions-receive-sdk-ui-webview
- **Description**: 保利威互动接收端 WebView 内嵌页
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2024-12-31
- **Last Updated**: 2025-09-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 移动端内嵌页-观看页端

## 简介

保利威各开播端、助教端都可以在直播过程发起签到、抽奖、问卷等直播互动。对应地，在观看端也需要呈现这些互动。为了让保利威云直播观看页以及客户定制观看页都能方便地接入这些功能，我们把互动功能做成了 [SDK](https://help.polyv.net/index.html#/live/js/new_sdk/interactions_receive_sdk/sdk/overview) 以及 [UI 组件](https://help.polyv.net/index.html#/live/js/new_sdk/interactions_receive_sdk/ui/default/overview)。

为了在[移动端SDK](https://help.polyv.net/#/live/android/) 的互动功能同步对齐观看页端，我们将接入互动功能的内嵌页，以webview的形式在APP中展示。
考虑到客户需要对APP内的互动功能进行定制化修改，所以我们的移动端内嵌页项目是开源的，即本项目开源。

## 概览

移动端内嵌页已经接入互动接收功能：

| 功能    | 目录                                               | 备注 |
|-------|--------------------------------------------------| -- |
| 签到    | src/webview/normal-page/components/check-in      | |
| 问卷    | src/webview/normal-page/components/questionnarie | |
| 答题卡   | src/webview/normal-page/components/answer-card   | |
| 公告    | src/webview/normal-page/components/bulletin  | |
| 反馈举报  | src/webview/normal-page/components/feed-back     | |
| 无条件抽奖 | src/webview/normal-page/components/lottery       | |
| 卡片推送  | src/webview/normal-page/components/push-card     | |
| 积分红包  | src/webview/normal-page/components/red-envelope  | |
| 商品库   | src/webview/product-page                         | |
| 条件抽奖 | src/webview/product-page/components/welfare-lottery | |

## 项目本地运行

Node.js 版本要求：v20.10.0。建议使用 [nvm](https://github.com/nvm-sh/nvm) 进行 Node.js 版本管理。本项目根目录下的 `.nvmrc` 文件已指定了所需的 Node.js 版本。

在webview根目录下执行以下命令：

```bash
npm install && npm run dev
```

方式1: 多场景SDK 通过charles代理 把内嵌页地址指向本地开发服务器
方式2: 多场景SDK的内嵌页地址改成本地开发服务器

注意事项：运行webview项目，需要关掉VPN或者代理，因代码里面用了自动获取IP

## 如何接入定制化版本-互动接收端

请参考互动接收端-[开源项目](https://gitee.com/polyv_ef/polyv-web-interactions-receive-sdk-ui-default)

1. 根据项目中的需求，可对互动组件做了定制化修改后，[打包上传](https://www.runoob.com/nodejs/nodejs-npm.html)到npm.js上，依赖包的命名规则可参考：@polyv/interactions-receive-sdk-ui-**
2. 移动端内嵌页项目中，执行 npm i @polyv/interactions-receive-sdk-ui-** --save 安装依赖包。
3. 在移动端内嵌页项目中，修改 @polyv/interactions-receive-sdk-ui-default 中的引入路径，将引入路径改为自己的依赖包路径, 如

```js
// 原本依赖路径
import { CheckIn } from '@polyv/interactions-receive-sdk-ui-default';
// 改为定制版依赖路径
import { CheckIn } from '@polyv/interactions-receive-sdk-ui-**';
```

## 打包发布

1. 相应配置 webpack.lib.config.js 中的资源发布路径 publicPath，才可以正常引用。
2. 在项目根目录下执行 npm run build，打包后的文件在dist目录下。
3. 将dist目录下的文件上传到客户的OSS上，并替换 [移动端SDK](https://help.polyv.net/#/live/android/README)中webview的地址。

dist目录下的文件包括：

1. index.html 在移动端SDK中全屏展示的互动页面，当该页面展示时为最高层级，不会被其他元素遮挡。
2. product.html 在移动端SDK中，用于点击tab后展示商品库页面，该页面被限制为局部展示。