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

**Repository Path**: weson123/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**: 2023-08-09
- **Last Updated**: 2023-09-18

## 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 是以 WebView 页面的方式展示互动功能。以下简单说明下 移动端 SDK、互动内嵌页 和 互动接收端 SDK、UI 的三者关系：

[移动端 SDK](https://help.polyv.net/#/live/android/)：通过 WebView 嵌入互动内嵌页，并在特定时机调起这个 WebView。如果需要定制内嵌页，在完成定制之后，需要把内嵌页地址换成定制页地址。

互动内嵌页：集成了互动接收端 SDK、互动接收端 SDK UI，以及与移动原生端通信机制的页面。


![img_1.png](img_1.png) 

## 概览

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

| 功能       | 目录                                             | 备注 |
| ---------- | ------------------------------------------------ | ---- |
| 签到       | 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/announcement  |      |
| 反馈举报   | 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                         |      |

## 项目本地运行

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

```bash
npm ci && npm run dev
```

方式 1: [移动端 SDK](https://help.polyv.net/#/live/android/README) 通过代理工具（如 charles 等）， 把内嵌页地址指向本地开发服务器
方式 2:[移动端 SDK](https://help.polyv.net/#/live/android/README) 的内嵌页地址改成本地开发服务器

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

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

1. 根据项目中的需求，可对互动组件做了定制化修改后，[打包上传](https://www.runoob.com/nodejs/nodejs-npm.html)到 npm.js 上，依赖包的命名规则可参考：**/interactions-receive-sdk-ui-**
2. 移动端内嵌页项目中，执行 npm i **/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 '**/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 后展示商品库页面，该页面被限制为局部展示。