更新日期 2023/07/25
一.开发
# 安装依赖
npm install
# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# 启动服务
npm run dev
浏览器访问 http://localhost:80
二.发布
# 构建测试环境
npm run build:stage
# 构建生产环境
npm run build:prod
三.目录结构&打包配置&懒加载
1.为未来微前端版本铺垫,V3版本从新梳理了各模块关系,从新优化了功能模块配置,各个功能模块的api&asset&views都必须在各自的功能模块文件夹下
src下的目录结构示意如下
├─src
│ ├─api (接口文件夹下按模块划分)
│ │ └─basicsModules (基础核心模块api)
│ │ └─hazardManagement (危险源模块api)
│ ├─assets
│ │ └─ZDimages (静态文件夹下按模块划分)
│ │ ├─basicsModules (基础核心模块静态文件)
│ │ └─hazardManagement (危险源模块静态文件)
│ └─views (页面文件夹下按模块划分)
│ └─basicsModules (基础核心模块页面文件)
│ └─hazardManagement (危险源模块页面文件)
2.同时优化了懒加载与打包,但是在加入新增模块时需要同时修改打包配置与加载配置文件
打包配置在 vue.config.js 文件内
├─src
│ └─vue.config.js
配置内容如下自行添加即可
//基础模块
basicsModules: {
name: 'chunk-basicsModules',
test: resolve('src/views/basicsModules'),
priority: 0,
minSize: 0,
minChunks: 1,
enforce:true,
reuseExistingChunk: true
},
懒加载配置在 permission.js 文件内
├─src
│ └─store
│ └─modules
│ └─permission.js
配置内容如下自行添加即可
if(pathName === 'basicsModules'){
return (resolve) => require([`@/views/basicsModules${pathUrl}`], resolve)
}else if(pathName === 'hazardManagement'){
return (resolve) => require([`@/views/hazardManagement${pathUrl}`], resolve)
}
四.二维码相关
1.二维码生成规则
二维码参数由三部分组成
微信小程序二维码标识
需要在微信小程序后台开发配置中配置
同时需要在后台配置开发配置中配置
两个配置需要完全一致
在用户登录后会存储在local storage中字段为'codeOnlineAdd'
参数 code
用于该功能所需参数
功能标识 type
用于识别二维码所属功能,用于后续跳转对应后续业务页面
示例
http://lab.zjznai.com/labAppTest?code=11&type=1
微信小程序二维码标识?参数&功能标识
2.功能标识表
| 功能标识 |
功能名称 |
业务字段 |
备注 |
| type:13 |
电子信息牌-身份认证 |
doorId,subId,macId,code |
安卓生成 - 用于微信公共扫码-电子信息牌身份认证 |
| type:12 |
化学品终端-扫码双人认证 |
doorId,subId,macId,code |
安卓生成 - 用于微信公共扫码-化学品终端-扫码双人认证 |
| type:11 |
化学品终端-扫码单人登录 |
code,subId,macId |
安卓生成 - 用于微信公共扫码-化学品终端-扫码单人登录 |
| type:10 |
实验室关联危险源设备 |
code |
前端生成 - 小程序专项检查扫码 |
| type:9 |
化学品 |
-- |
安卓生成 - 用于微信公共扫码-查看化学品 |
| type:8 |
化学品柜 |
-- |
前端生成 - 小程序化学品柜扫码业务 |
| type:7 |
培训课程 |
-- |
安卓生成 - 用于微信公共扫码-查看培训课程 |
| type:6 |
专项检查 |
-- |
未知生成 - 未知应用方式 |
| type:5 |
实验室详情 |
code |
前端生成 - 用于微信公共扫码-查看实验室详情,小程序安全检查页面扫码 |
| type:3 |
危险源列表 |
code |
前端生成 - 用于微信公共扫码-查看详情 |
| type:2 |
安全制度 |
code |
前端生成 - 用于微信公共扫码-查看详情 |
| type:1 |
MSDS说明书 |
code |
前端生成 - 用于微信公共扫码-查看详情 |
五.功能角色相关说明
在遵从数据权限与页面权限的基础上 增加了特定功能角色-在角色页面配置
前端取特定功能角色的权限字符匹配对应页面是否拥有特定的功能权限
1.功能角色与对应功能
| 功能标识 |
功能名称 |
功能页面 |
备注 |
| performEvacuation |
应急疏散操作 |
应急疏散 |
应急疏散页面下所有的硬件操作与疏散操作与此角色关联 |
| subHardwareControl |
实验室硬件控制 |
实验室列表 |
实验室列表页面硬件控制操作与此角色关联 |
| subVideo |
实验室监控 |
实验室列表 |
实验室列表页面监控视频与此角色关联 |
六.版本相关
1.版本差异字段 VUE_APP_VERSION_DIFFERENCE_FIELD
配置文件在 .env.development 与 .env.production 文件内
├─src
│ └─.env.development (开发配置)
│ └─.env.production (打包配置)
当前差异内容
一.非配置化内容
① 首页配置 西农使用定制化首页 其他学校部署使用后台配置首页
router/index.js 下homeXiNong为定制化西农首页home为后台配置首页
二.配置化内容
所有配置化内容使用VUE_APP_VERSION_DIFFERENCE_FIELD 字段控制
① 西农配置 VUE_APP_VERSION_DIFFERENCE_FIELD = 'xiBeiNongLinDaXue'
化学品首页 chemicalManage/chemicalsStatistics
2.版本分支关系
修改时务必注意版本分支关系,从底层开始迭代
├─master基础分支(于2024/7/30号封版,用于西农项目验收)
├─VERSIONS-FenJiFenLei(新版分类分级-包含电子信息牌图片导出)
│ └─SCHOOL-XiBeiNongLin(山西农大版本分支包含分类分级信息牌导出功能)
├─VERSIONS-AnQuanJianCha(新版安全检查)
├─VERSIONS-FenJiGuanKong(分级管控-迁移版本)
├─VERSIONS-AnQuanJianCha-1206(安全检查1206优化版本)
├─VERSIONS-AppUp(app升级相关版本)
├─VERSIONS-AnQuanJianCha-1223(安全检查1223优化版本)
├─VERSIONS-xiaoJiDaPing/dongTaiPingJi(校级大屏优化PC端-修改视频传参-视频查看记录页面-实验室动态评级-西农定制化首页/化学品首页)
│ └─VERSIONS-DuoAnQuanYuan(实验室-安全员数量修改)
│ └─VERSIONS-HuaXuePin-241202(化学品柜管理查询条件与列表字段修改)
│ └─VERSIONS-majorization-25-01-20(2025/01/20 现场优化版本)
│ └─VERSIONS-JichuGouJia/GuoZiShuJu(基础构架/国资数据-优化版本-增加小程序二维码配置/实验室下拉菜单跳转)
├─VERSIONS-VERSIONS-video/iot-quanXian(合并了以上所有版本内容-修改了实验室列表的视频/IOT操作权限)
│ └─SCHOOL-XiBeiNongLin(用于西农现场部署-没有同步实验室动态评级)
│ └─SCHOOL-zhongGuoHaiGuan(用于中国海关实验室项目)
├─leb-web-dev(当前正在开发的分支)
├─leb-web-test(测试分支)
