wap-sdk v0.3.2

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(批阅)

2.item-engin 答题引擎

• 目前支持：考试，作业，练习，刷题的做题。

• 使用方式:如下

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

3.item-report 答题报告

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

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

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

#####  4.item-review 批阅
* 目前支持：考试，作业，练习，刷题的批阅。
* 使用方法：如下

| 参数 | 含义 | 类型 | 默认 | 必传 |
| --- | --- | --- | --- | --- |
| 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.[vant^2.8.6](https://youzan.github.io/vant/#/zh-CN/)
  * 2.[vue-awesome-swiper^4.1.1](https://github.com/surmon-china/vue-awesome-swiper)
  * 3. [scss^1.26.8](https://www.sass.hk/docs/)
  
### 移动端适配
* 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](https://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.11&manage_type=myprojects&projectId=1891550)
  每次更新需要将**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。
  - 带来的好处：不需要把全部的节点渲染出来，题目数量过多可以得到优化。