# polyv-mp-live-watch-ui

**Repository Path**: polyv_ef/polyv-mp-live-watch-ui

## Basic Information

- **Project Name**: polyv-mp-live-watch-ui
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-10-10
- **Last Updated**: 2026-03-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Polyv 观看端 Demo

## 一、介绍

- 为了让客户能够更便捷、友好地定制观看页，保利威推出了**POLYV 直播观看 SDK(小程序版，以下简称小程序 SDK)**，并将该 SDK 拆分成 UI 层和逻辑层
- 该开源项目对应 **小程序 SDK** 的 UI 层，需要搭配逻辑层 [@polyv/live-watch-miniprogram-sdk](https://www.npmjs.com/package/@polyv/live-watch-miniprogram-sdk) 一起使用
- **注意:** 使用前请先阅读仓库中的 `LICENSE` 文件和 `CHANGELOG` 文件

## 二、项目说明

该开源项目基于 `typescript@4.x + gulp@4.x` 实现的原生微信小程序应用，除 `@polyv/live-watch-miniprogram-sdk` 外，还集成了其他**保利威 npm 库**和部分第三方开源工具库

| 保利威 npm 库 | 备注  |
| :---------- | :---- |
| [@polyv/utils](https://www.npmjs.com/package/@polyv/utils) | POLYV 工具函数库 |
| [@polyv/eslint-config](https://www.npmjs.com/package/@polyv/eslint-config) | POLYV 前端工程 ESLint 通用配置 |
| [@polyv/async-validator](https://www.npmjs.com/package/@polyv/async-validator)  | 表单验证工具（经改造后可在原生小程序中适用） |
| [@polyv/miniprogram-cli](https://www.npmjs.com/package/@polyv/miniprogram-cli)  | 基于 gulp 开发的小程序脚手架【暂不对外提供文档】 |

## 三、项目运行

项目运行前请**注意**

- 确保 `node` 版本 `^14.15.4 || >=16.0.0`
- 了解保利威基础业务概念，比如：频道号(channelId)
- 由于项目初始化会自动设置 `husky` 钩子，请确保项目根目录存在 `.git` 文件夹，或者通过这篇[文档](https://typicode.github.io/husky/#/?id=custom-directory)指定对应的 `.git` 文件夹位置。如果完全不使用 `git`，请删除 `package.json` 中的 `prepare` 脚本命令

### 第一步：安装

```sh
npm ci #安装依赖，如果 CI 失败，请试一下 npm ci --no-cache --registry=https://registry.npmmirror.com/
```

### 第二步：运行项目

在运行项目前需要在项目根目录的 `project.config.json` 文件补充 `appid` 字段，补充后运行以下命令：

```sh
npm run dev
```

### 第三步：打开项目

打开微信开发者工具的小程序模式，导入项目根目录即可打开。

## 四、项目构建

小程序 Demo 使用到的静态资源（如图片、字体文件）都存放在 static 目录中，运行 dev 时脚手架会创建本地服务并指向 static 目录，详细逻辑可搜索项目中的 `PUBLIC_PATH` 关键字。

因此在 dev 预览小程序时，静态资源引用的是本地服务的地址，如果开发者需要发布小程序，请根据指引进行构建：

### 第一步：发布 static 目录

将根目录的 `static` 发布到在线服务器，并修改 `build/build-config.js` 文件的 `publicPathProd` 为静态文件的访问目录。

### 第二步：执行构建

执行以下命令构建小程序：

```sh
npm run build
```

构建完成后，会输出 `dist` 目录，该目录为小程序的运行代码。

### 第三步：构建 npm

由于项目使用到第三方 npm 包，因此需要在微信开发者工具导入项目根目录，并进行[构建 npm](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html#_2-%E6%9E%84%E5%BB%BA-npm)。

### 第四步：上传代码

微信开发者工具导入项目根目录，并根据[官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/release.html#%E5%8F%91%E5%B8%83%E4%B8%8A%E7%BA%BF)进行发布上线。

## 五、注意事项

### 补充获取 openId 和 unionId 逻辑

在保存用户信息（头像、昵称）时，需要获取用户的 openId 和 unionId，详细可见小程序官方文档：[小程序登录](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html)。

由于需要后端获取 openId 和 unionId，因此本项目仅获取了临时登录凭证 code，开发者需要补充该获取逻辑，详细代码可见 `src/core/procedure.ts` 文件中的 `获取 openId、unionId` 相关逻辑。

### 微信小程序功能开通

1. 请确保您的小程序已申请开通 `<live-player>` 功能，否则无法使用直播功能（详见[微信小程序相关文档说明](https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html)）。

2. 请确保您的小程序已申请开通 `<live-pusher>` 功能，否则无法使用连麦功能（详见[微信小程序相关文档说明](https://developers.weixin.qq.com/miniprogram/dev/component/live-pusher.html)）。

### 配置小程序隐私协议

请确保您的小程序按照官方指引配置用户隐私协议，否则可能无法获取微信用户信息（如昵称、头像），详见[小程序隐私协议开发指南](https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html)。

## 六、开发场景

### 已有原生小程序，如何接入观看页 demo？

- 第一步：修改小程序脚手架配置 `miniprogram.config.js`，将 `outDir` 配置修改到您项目中的一个目录（已 polyv-watch-ui 目录为例），该配置用于脚手架的构建输出目录。

- 第二步：运行项目命令 `npm run build` 进行构建，注意构建前请查看本文档的【第四点：项目构建】发布 static 目录，否则部分资源将无法显示。

- 第三步：将项目中的 `app.json` 文件中的页面配置移到您的项目，并将输出目录作为一个分包进行配置，其中 `channel-login` 页面非必须页面，可根据情况进行删除：

```json
// app.json
{
  "subPackages": [
    {
      "root": "polyv-watch-ui/",
      "pages": [
        "pages-other/pages/enter-page/enter-page",
        "package-splash/pages/splash-normal/splash-normal",
        "package-splash/pages/splash-large/splash-large",
        "package-watch/pages/watch-normal/watch-normal",
        "package-watch/pages/watch-portrait/watch-portrait",
        "pages-other/pages/web-view/web-view",
        "pages-other/pages/error-page/error-page"
      ],
      "plugins": {
        "polyv-live-plugin": {
          "version": "0.9.1",
          "provider": "wxfb2e591959a8bacf"
        }
      }
    }
  ]
}
```

- 第四步：将当前项目的 `package.json` 中的 `dependencies` 下的依赖包安装到您的项目中，并在开发者工具进行[构建 npm](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html#_2-%E6%9E%84%E5%BB%BA-npm)，注意需要将 `miniprogramNpmDistDir` 配置到输出目录：

```json
// project.config.json
{
  "setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./polyv-watch-ui"
      }
    ]
  }
}
```

通过上述步骤，即可将观看端小程序作为分包接入到您的项目中，如果需要进入观看页，可携带频道号参数跳转到 `/pages-other/pages/enter-page/enter-page?channelId=xxxx`。