msb_course v1.2.0

msb-courseware

interactive courseware 美术宝互动课件项目

Project setup

npm run init

# Compiles and hot-reloads for development
本地开发
npm run dev

# build for production with minification
上线发布

# Compiles and minifies for production
npm run build

编译加载器
npm run build:sdk

# build for production and view the bundle analyzer report
暂无

# Lints and fixes files
运行编码规范
npm run lint

# Repair of non conformance
修复不符合规范
npm run lint:fix

###
本地预览 暂无

###
1.课件加载方式
function registercallback (sdk: any, statusCode: any): void {
  if (statusCode !== 200) { return }
  sdk.render && sdk.render('#app', {
    width: window.innerWidth,
    height: window.innerHeight,
    curoseuUrl: ['a.com', 'b.com'],
  })
}

axios.get('https://imgvip.meishubao.com/viptest/sdk-load.json?' + (+new Date())).then((res) => {
  new Function('{' + res.data + '}')(registercallback, {
    name: 1,
  })
}).catch((e) => {
  console.error('加载错误', e)
})

2.npm包方式引入
import sdk from 'msb-courseware'
const vm = sdk.render('#app', {
  width: 845,
  height: 633,
  classType: '1v1',
  role: 1,
  // @ts-ignore
  staticCdn: ['https://imgvip.meishubao.com'], // 若cdn不存在则预加载图片不会启动
})


## 课件包含方法

``` bash
#
设置课件数据
sdk.setCourseInfo([
  {
    picImg: ''
  }
])

#
设置课件页码
sdk.setPageIndex(1)

#
反页到课件上一页
sdk.setPrevPage()

#
反页到课件下一页
sdk.setNextPage()

#
使用picId翻页
sdk.setPageId()

#
初始化设置配置
sdk.setInitConf()

#
调整大小
sdk.resize()

#
接收信令
sdk.receiveSignall()

#
获得课件当前所有数据
sdk.getAllData()

示例
sdk.receiveSignall({
  chooseNum: 2,
  isRight: false,
  pageIndex: 2,
  type: 'select:option',
})

## 事件触发统一在vm.render返回的vm上触发
# 事件绑定形式为
课件包含事件
vm.$on('page:ready', function ({ outer }) {})

``` bash
#
课件数据为空
empty:course

#
视频课件数据为空
empty:courseType

#
课件数据配置为空
empty:config

#
课件发信令
send:signall

#
课件区域大小
stage:size

#
课件视频播放器初始化完成
video:init

#
视频播放中
video:playing

#
视频播放
video:play

#
视频播放总时间
video:duration

#
视频播放当前
video:currentTime

#
点击选择题选项
select:option