项目技术文档

930 阅读3分钟

基础内容

  • 项目名称:贵州继续教育
  • git仓库地址以及分支情况: 1617763632(1).png
  • 项目文件结构: 1617763732(1).png

项目的启动和打包方式

frontlearning-centermccnew-managementwebApp
启动phpStudy打开或者直接打开npm run servenpm run devnpm run devHBulilder编辑器运行
打包---npm run buildnpm run buildnpm run build:prodHBulilder发行操作

项目的测试和正式访问地址

项目上线注意:(上不同的环境需要手动切换到对应的地址)

  • learning-center:全局搜索把带有japitest的文件切换为图示地址:(需要更改一处) 1617764849(1).png
  • new-management:同上(这个需要更改两处)
  • webApp:本地测试正式地址如下所示 1617764656(1).png

文件目录结构

  • 自行根据地址的路由来按照文档查吧,基本地址栏的最后一个就是文件的页面名称,由于项目多人做过,因此存在部分差异。
  • webApp主要代码文件在pages.json配置底部tabbar和顶部title(相当于vue的router),pages文件夹为主要页面代码,components/my-common为pages中需要用到的自定义组件代码,common文件夹存放的是请求封住等工具类文件。

提示: webApp中的组件除了如下图文件夹是手撸的代码其他文件夹的都是uni-app插件市场下载的插件。无需更改

1617765239(1).png

配置文件

  • 请求封装操作:

    • learning-center——api/request.js
    • new-management——api/request.js + utils/request.js(别问我为什么写两个我也是个接手怪好吧)
    • webApp——common/httpRequest.js
    • 其他自行查找
  • 配置代理文件:

    • 有可能配置代理的位置:api/root.js或者vue.config.js (每个项目都可能不一样,自行根据提供的可能位置查找)

    • webApp和其他不一样:本地配置代理:manifest.json——源码视图,可以看到

其他注意事项:

  • webApp如果使用了打包就需要切换到线上(测试或者正式地址才能正常访问)
  • webApp调试
  • webApp笔记

主要代码部分

  • 考试模块:
    • 为什么learing-center中的学士管理的我的学时中的头像为什么单独发了一个获取图片二进制流获取请求。参考
  • 视频模块:7分靠文档3分靠技巧弄的
    • 功能点:
      • 视频类型(courseType)为专区(10)的时候不做防挂机处理即不需要弹窗,但是需要暂停视频
      • 防挂机处理(webApp会存在video层级过高问题,因此目前采用的当用户是全屏显示的话就把用户退出全屏再弹窗选择框,并且选择框位置不在video标签区域中)
      • 防拖拽,未学完的视频不能拖拽到他最大的播放视频位置(重点bug区域)
      • 暂停,播放完成需要发送保存进度请求
      • 实时保存进度,当前为总视频时间(视频总时长大于30s)的5%的时候发送保存请求