特别提示:我所上传的图片是静态图片 因此效果体现不出来 此项目是极具视觉效果 属于定制型项目
优点:体积小 Vue快速开发 无需搭配后台 只需与对接人员 使用双向通信Socket即可 并且是从0到1的项目
1、项目框架Vue 使用Vue脚手架搭建架子 编写router路由 App定义路由入口 安装依赖
2、由于是大屏展示 较多动画是轮播图 我使用的是Swiper插件 由此做轮播器
3、考虑到一期项目是客户手拿pad进行控制五块大屏 因为使用vuex进行数据管理
4、项目中要进行双向通信 因此我使用websocket进行通信控制 定义指令字段 导出请求指令
5、多次编写全局组件 提高代码质量避免冗余 方便自己维护
6、使用vue的过渡标签包裹组件 进行功能切换动画
7、三种模式 1、团队模式展示 2、领导模式展示 3、自定义展示
8、使用H5热点区域标签 规划图片中的坐标 搭配element ui 对话框进行 点击放大效果
9、利用计时器进行时间控制无操作进入屏保状态 并自动轮播
10、后期和公司ios开发配合写入socket地址 发送指令 进行双向控制
11、后期进行pad书写文字可英文可中文可中英文混排 进行判断英文和中文 从而进行空格的控制 定义好公共
方法 获取到后端返回的空格符和换行符进行搭配正则while循环处理字符串
12、三次现场调式 于六月8日上线 完成一期开发 并研讨二期制作 二期后台管理系统