@kmqakj/weapp-study-player

v1.0.2

Published

4 months ago

昆明企安科技学时监管小程序SDK

0High
0Medium
0Low

ashuicoder

微信小程序学时监管 SDK 说明文档

描述

@kmqakj/weapp-study-player用于微信小程序点播课的实时学时监管

使用场景

1、课程视频学习时使用，集成了 Video 播放器、学时监管、随机验证等； 2、只需引入组件，传入对应参数，即可开始学习，不需要再自己写视频学习逻辑。

支持验证方式

1、FACE 拍照人脸验证； 2、LIVINGBODY 活体验证； 3、SLIDER 滑块拖动验证； 4、NUMBER 数字验证； 5、IDCARD 学员身份证号后四位验证。

使用教程

微信小程序原生使用：

安装插件
```
npm install @kmqakj/weapp-study-player
```

构建 npm

在微信开发者工具中，选择“工具”->“构建npm”

引入组件在需要使用的页面的 json 文件中引入组件

{
  "usingComponents": {
    "qa-player": "@kmqakj/weapp-study-player/components/qa-player/qa-player"
  }
}

使用组件在需要使用的页面的 wxml 文件中引入组件
```
<qa-player></qa-player>
```

在 uni-app 中使用

安装插件
```
npm install @kmqakj/weapp-study-player
```
构建脚本

由于uni-app并不支持直接引入微信小程序原生组件，需要使用脚本把 npm 安装的包复制到特定目录。

在项目根目录新建scripts/pkg-copy.js文件，内容如下：

// scripts/pkg-copy.js
// 本脚本用于将原生 npm 组件复制到 wxcomponents 文件夹
const fs = require("fs-extra");
const path = require("path");

// 需要复制的包
const pkgList = [
  {
    from: "@kmqakj/weapp-study-player/src",
    to: "weapp-study-player",
  },
];

const npmPath = path.join(__dirname, "../node_modules");
const distPath = path.join(__dirname, "../src/wxcomponents");

function copyPkg(pkg) {
  const from = `${npmPath}/${pkg.from}`;
  const to = `${distPath}/${pkg.to}`;
  fs.copySync(from, to);
}

// 复制所有包
pkgList.forEach(copyPkg);

在package.json新增脚本：

{
  "scripts": {
    "postinstall": "node scripts/pkg-copy"
  }
}

执行npm install会把包复制到src/wxcomponents目录下

引入组件在配置微信小程序的 page 的 json 文件中引入组件（一般是在pages.json中）：

{
  "path": "xxxxx",
  "style": {
    "usingComponents": {
      "qa-player": "/wxcomponents/weapp-study-player/components/qa-player/qa-player"
    }
  }
}

使用组件在需要使用的页面的 vue 文件中使用组件
```
<qa-player></qa-player>
```

参数说明

baseUrl

类型：string 说明：自定义接口请求地址(末尾不带斜杠/)，例：https://xxx.com，末尾不能带/。请求地址须在微信小程序后台配置Request白名单、Upload白名单。

videoSty

类型：string，选填说明：播放器样式，默认width: 100%; height: 420rpx

options

类型：object，必填说明：学习所需参数，见下方

appId

类型：string，必填说明：接口鉴权 appId，对接的时候会给。

options 参数说明：

| 字段 | 类型 | 描述 | 是否必传 | | ------------- | ---------------- | ------------------------------------- | -------- | | url | String | 视频地址，如.mp4、.m3u8 | | | appKey | String | 学时监管的 appkey，授权使用，对接提供 | 是 | | courseCode | String | Number | 课程 id | 是 | | courseName | String | 课程名称 | 是 | | duration | Number | 当前视频时长 | 是 | | durationAll | Number | 该岗位的需修学时 | 是 | | sectionCode | String | Number | 课程小节 id | 是 | | sectionName | String | 课程小节名称 | 是 | | trainPostCode | String | Number | 培训岗位 code | 是 | | trainPostName | String | 培训岗位名称 | 是 | | trainTypeEnum | String | 培训类型（值只能是下面两个） | 是 | | | 'SEND_JXJY' | 继续教育 | | | | 'SEND_GQPX' | 岗前培训 | | | idCard | String | 学员身份证 | 是 | | studentName | String | 学员姓名 | 是 | | studyId | Number | String | 学员 id | 是 | | poster | String | 视频封面 | 否 |

事件

bind:error

类型：function 说明：视频播放 video 抛错时会显示错误提示弹窗，点击重试触发该事件，此时可重新获取视频数据，或自定义业务逻辑

bind:end

类型：function 说明：当前视频播放结束后触发

使用说明

请参照使用教程正确引入组件，以下仅为代码示例，根据实际场景传入正确的参数

原生开发

在js 中初始化插件，并处理好组件需要的参数

Page({
  data: {
    baseUrl: 'xxxx',
    appId: 'xxxx',
    videoSty: "width: 100%; height: 420rpx", // video样式
    options: {
      appKey: "xxxxxxxxxxxxxxxxx", // APPKEY
      courseCode: "xxxxxxx", // 课程CODE/课程版本id
      courseName: "xxxxxxx", // 课程名称
      duration: "1623", // 当前视频时长(秒)
      durationAll: "27", // 总视频时长(小时)
      sectionCode: "xxxxxxx", // 课程小节CODE
      sectionName: "xxxxxxx", // 课程小节名称
      trainPostCode: "xxxxxxx", // 培训岗位code
      trainPostName: "xxxxxxx", // 培训岗位名称
      idCard: "xxxxxxxxxxxxxxxxxx", // 身份证号码
      studentName: "xxx", // 学员名称
      trainTypeEnum: "SEND_GQPX", // 继续教育:SEND_JXJY，岗前培训：SEND_GQPX
      studyId: "xxxxxxx", // 继续教育任务ID或岗前培训计划ID
      url: "https://xxx.com/xxx/xxx.mp4",  // 视频地址
      poster: "https://xx.com/xxx/xxx.png", // 视频封面
    },
  },
  methods: {
    /**
     * @todo 播放出错处理
     * @description 视频播放video抛错时会显示错误提示弹窗，点击重试触发该事件，此时可重新获取视频数据，或自定义业务逻辑
     */
    onError() {},
    /**
     * @todo 视频播放结束
     * @description 视频播放结束触发
     */
    onEnd() {},
  },
});

4、study.wxml 中使用 qa-player（在 json 文件中定义的组件名称）组件，传入所需参数

<qa-player baseUrl="{{baseUrl}}" appId="{{appId}}" options="{{options}}" bind:error="onError" bind:end="onEnd"></qa-player>

UNIAPP 开发

基本与原生一致

3、在页面中使用 qa-player（在 json 文件中定义的组件名称）组件，传入所需参数

<template>
  <qa-player
    :baseUrl="baseUrl"
    :appId="appId"
    :options="options"
    @error="onError"
    @end="onEnd"
  ></qa-player>
</template>
<script setup>
const baseUrl = "xxxxx";
const appId = "xxxxx";
const options = ref({
  appKey: "xxxxxxxxxxxxxxxxx", // APPKEY
      courseCode: "xxxxxxx", // 课程CODE/课程版本id
      courseName: "xxxxxxx", // 课程名称
      duration: "1623", // 当前视频时长(秒)
      durationAll: "27", // 总视频时长(小时)
      sectionCode: "xxxxxxx", // 课程小节CODE
      sectionName: "xxxxxxx", // 课程小节名称
      trainPostCode: "xxxxxxx", // 培训岗位code
      trainPostName: "xxxxxxx", // 培训岗位名称
      idCard: "xxxxxxxxxxxxxxxxxx", // 身份证号码
      studentName: "xxx", // 学员名称
      trainTypeEnum: "SEND_GQPX", // 继续教育:SEND_JXJY，岗前培训：SEND_GQPX
      studyId: "xxxxxxx", // 继续教育任务ID或岗前培训计划ID
      url: "https://xxx.com/xxx/xxx.mp4",  // 视频地址
      poster: "https://xx.com/xxx/xxx.png", // 视频封面
});

/**
 * @todo 播放出错处理
 * @description 视频播放video抛错时会显示错误提示弹窗，点击重试触发该事件，此时可重新获取视频数据，或自定义业务逻辑
 */
const onError = () => {};
/**
 * @todo 视频播放结束
 * @description 视频播放结束触发
 */
const onEnd = () => {};
</script>