在线教育白板 demo
功能点
- Web 白板
- Web 音视频
- 聊天室
- IM
互动流程
- nim 登录
- 连接聊天室
- 开启音视频
- 开启白板
特殊约定
白板、音视频房间都以聊天室ID为房间号码
技术栈
- webpack
- 包管理：Yarn || Npm
- UI 库：React
- UI 组件：自写 -> 参考 antdesign 和 weui
- 字体图标：iconfont
- 路由：React-Router
- JS：ES6 / ES7
- babel
- postcss
- 样式：Less / CSS
- 状态管理：Mobx / Mobx-React
- 音视频 SDK：网易云信实时音视频 SDK
- 白板 SDK: 网易云信白板 SDK
开发环境
# 安装依赖
npm install
# 启动开发环境
npm start备注：命令行会自动打开浏览器，如果没有自动打开请手动复制 https://localhost:8080 至浏览器地址栏打开
打包部署
- 测试环境: yarn build:test
- 预发布环境: yarn build:pre
- 线上环境: yarn build:prod
目录介绍
├── demo 临时的字体图标参考
├── sdk SDK引用
├── src
│ ├── assets 静态资源
│ │ ├── css 自定义样式
│ │ └── images 图片
│ ├── component 单一组件区域，包括 `input`, `button` 等基础组件
│ ├── ext 扩展程序，是三大功能各自的方法操作集合输出，方便模块调用
│ ├── config 配置文件，后期填补
│ ├── module 模块，和业务相关
│ ├── pages 页面
│ ├── router 路由配置
│ ├── store 全局状态管理输出
│ ├── util 工具组件
│ └── index.js 入口脚本
└── index.html 主页入口请注意
ext文件夹和store文件夹的关系:
两个文件夹内容本质都是为了三大功能的集合管理，两个文件夹各司其职，共同配合
ext: 逻辑输出，主要完成各大功能的逻辑流程和各种操作
store: 状态输出，主要管理和存储各个功能逻辑和页面模块需要共享的一些数据