wap-sdk

v0.3.2

Published

2 years ago

h5端题库SDK

Downloads

0High
0Medium
0Low

lileiseven

codeages-admin

wap-sdk介绍

后端开发文档

http://item-bank-docs.st.edusoho.cn/developer/

iconfont库

https://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.12&manage_type=myprojects&projectId=1891550&keyword=&project_type=&page=

功能

1.答题
2.计时考试，超时提交
3.答题结果和解析展示
4.答题过程展示解析

目录介绍

build-style 打包样式
doc 相关文档
examples 组件调试目录
lib 打包后的文件
public 静态资源文件
src
- components 组件
  - common 公用组件
  - item 单题组件
  - item-engin 答题引擎
  - item-report 答题报告
  - item-review 批阅
- locale 国际化
- mixins 混入
- plugins 插件
- styles 样式
- utils 工具包
- index.js 插件总入口
vue.config.js

组件和组件用法介绍

第一步：首先 npm i wap-sdk -s
第二步：

import wapSdk from 'wap-sdk';
Vue.use(wapSdk);

组件用法介绍

1.item 单题组件

目前支持：单选，多选，判断，不定项，问答，填空，材料7种题型。
使用方式:如下

    <item 
        item="item"
        mode="do"
        itemUserAnswer="itemUserAnswer"
        needScore="needScore"
    />

参数如下

mode可选参数为 do(答题),report(答题报告),review(批阅)

| 参数 | 含义 | 类型 | 默认 | 是否必传 | | --- | --- | --- | --- | --- | | item | 题目 | Object | {} | 是 | | mode | 模式 | string | do | | | itemUserAnswer | 用户答案 | Object | {} | | | needScore | 是否需要显示分数 | Boolean | true | | | all | 当前试卷所有题数(答题场次用到) | Number | 0 | | | keys | 题目所属模块索引，题目索引 | Array | [] | | | itemUserReport | 用户答题结果 | Object | {} | | | wrongMode | 是否错题模式 | Boolean | false | | | doLookAnalysis | 是否做题时可以查看解析 | Boolean | false | | | current | 当前在哪个题目(答题场次用到) | Number | 0 | | | itemLength | 当前题目包含的子题总数 | Number | 0 | |

| Event | 参数 | 触发条件 | | --- | --- | --- | | changeAnswer | itemUserAnswer，keys | 更改答案 | | itemSlidePrev | | 点击左箭头 | | itemSlideNext | | 点击右箭头 |

2.item-engin 答题引擎

目前支持：考试，作业，练习，刷题的做题。
使用方式:如下

 <item-engine
    assessmentResponse="assessmentResponse"
    mode="do"
    />

| 参数 | 含义 | 类型 | 默认 | 必传 | | --- | --- | --- | --- | --- | | mode | 模式 | String | Do | | | assessmentResponse | 场次报告 | Object | {} | | | answerScene | 场次规则 | Object | {} | 是 | | answerRecord | 答题记录 | Object | {} | | | assessment | 试卷信息 | Object | {} | 是 |

| 事件 | 回调参数 | 触发条件 | | --- | --- | --- | | timeSaveAnswerData | data | 三分钟保存进度 | | reachTimeSubmitAnswerData | data | 自动提交 | | saveAnswerData | data | 手动保存进度 | | getAnswerData | data | 手动提交 |

3.item-report 答题报告

目前支持：考试，作业，练习，刷题的报告和错题查看。

<item-report
   answerScene="answerScene"
   mode="do"
   />

| 参数 | 含义 | 类型 | 默认 | 必传 | | --- | --- | --- | --- | --- | | mode | 模式 | String | Do | | | answerReport | 答题报告| Object | {} | 是 | | answerScene | 场次规则 | Object | {} | 是 | | answerRecord | 答题记录 | Object | {} | | | assessment | 试卷信息 | Object | {} | 是 |

4.item-review 批阅

目前支持：考试，作业，练习，刷题的批阅。
使用方法：如下

<item-review
   answerScene="answerScene"
   mode="do"
   />

| 参数 | 含义 | 类型 | 默认 | 必传 | | --- | --- | --- | --- | --- | | mode | 模式 | String | Do | | | answerReport | 答题报告| Object | {} | 是 | | answerScene | 场次规则 | Object | {} | 是 | | assessment | 试卷信息 | Object | {} | 是 |

| 事件 | 含义 | 参数 | 触发条件 | | --- | --- | --- | --- | | getReviewData |获取批阅数据| data | 提交批阅 |

如何开发调试

第一步：开发都在src的components目录下，可以使用mock数据的方式，进行开发新功能。
开发新模块要在src/index.js中去注册一下新的组件。
第二步：在examples里面去引用，引用的主入口在examples/main.js中，mock的数据可以放在examples/data.js下，然后import导入到对应组件中。

打包发布

开发好确认无误后合并到master分支。
打包编译 npm run lib
修改package.json中的版本号(测试环节发小版本，正式发布可发大版本)
```
  小版本："version": "0.1.2-1"
  大版本："version": "0.1.2"
```
发布包(登录账号密码见npm发布文件)

    npm login
    npm publish

发布好后写上changelog,打上tag。
发布好后在调用方去安装指定版本进行测试

如何定制主题色

第一步： @import '~wap-sdk/src/styles/iconfont/font.scss'; *第二步：引入index.scss进行变量覆盖，加上ibs-wap-vue主要是避免组件内样式污染到外部样式。

.ibs-wap-vue {
	// $primary-color: #fb40d2; //覆盖主题色
	@import '~wap-sdk/src/styles/index.scss';
}

用到的插件

移动端适配

1.使用了vw适配，详见src/styles/common/variable.scss

iconfont库替换

第一步：到网站下载最新的iconfont压缩包。
第二步：把iconfont.css文件名改成iconfont.scss,然后替换src/styles/iconfont/fonts下的文件。
第三步：把iconfont.scss里面的@font-face部分剪切出来，放到src/styles/iconfont/font.scss文件下，同时在地址前加上#{$ibicons-font-path}/

开发中注意事项

1.iconfont 每次更新需要将iconfont.css改成iconfont.scss，并修改@font-face下面url的路径,详见src/styles/iconfont/fonts/iconfont.scss
2.swiper.css 如更改了vue-awesome-swiper的版本号，则需要去node_modules中去拷贝出swiper.css替换src/styles/common/swiper.scss
3.vant中的toast、dialog等组件使用一定要加上getContainer,避免样式污染。

待优化

item-report和item-review
- a.可以把批阅和错题的题目单独整理出来
- b.里面的各种的sectionIndex,itemIndex可以直接用里面的seq。
- 带来的好处：不需要把全部的节点渲染出来，题目数量过多可以得到优化。