README

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。
- 带来的好处：不需要把全部的节点渲染出来，题目数量过多可以得到优化。

Usage no npm install needed!

README

wap-sdk介绍

后端开发文档

iconfont库

功能

目录介绍

组件和组件用法介绍

组件用法介绍

1.item 单题组件

2.item-engin 答题引擎

3.item-report 答题报告

4.item-review 批阅

如何开发调试

打包发布

如何定制主题色

用到的插件

移动端适配

iconfont库替换

开发中注意事项

待优化