# 南方医务通微信公众号项目
> React 单页面公众号应用 —— 主要使用 react.js + redux + redux-saga + webpack 等技术栈，dev 环境使用 express 加载运行，使用中间件处理 proxy 转发。
> 由于整体框架都处于比较旧的状态，因此 nodejs 版本需要使用低版本的 v10.12.0。
## 项目 Git
#### [Gogs Git address](https://gogs.ywtinfo.com/ywt/nfwxsite)
#### 生产环境分支：master
#### QA 环境分支：dev
#### 开发环境分支：视需求版本而定，具体命名规则见文末
## 项目 Command
node version: v10.12.0, npm/yarn install
```json
// 编译前先获取 git submodule 中的代码
git submodule update --init --remote
// dev环境
npm run start // 公众号
// qa环境
npm run build:qa // 公众号
// prod环境
npm run build // 公众号
```
## jenkins deploy
分支代码更新后，需要在 jenkins 进行手动构建更新
qa 环境
南方医务通公众号 [qa-nfywtwe](https://jenkins.ywtinfo.com/job/qa-nfywtwe/)
prod 环境
南方医务通公众号 [product-fe-nfywtwe](https://jenkins.ywtinfo.com/job/product-fe-nfywtwe%E5%8D%97%E6%96%B9%E5%8C%BB%E5%8A%A1%E9%80%9A/)
## 文件目录
```javascript
.
├── .babelrc // babel配置
├── .editorconfig // 编辑器配置
├── .eslintignore
├── .eslintrc.js // eslint配置
├── .gitignore
├── .gitmodules // git submodule配置
├── .postcssrc.js
├── .prettierrc
├── README.md
├── build // 构建配置目录
│ ├── build-qa.js // qa环境变量配置
│ ├── build.js // prod环境变量配置
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js // dev环境express启动
│ ├── mock.js // mock数据
│ ├── utils.js // 样式相关构建工具库
│ ├── webpack.base.conf.js // webpack基本构建配置
│ ├── webpack.dev.conf.js // webpack dev环境构建配置
│ ├── webpack.prod.conf.js // webpack prod环境构建配置
│ └── webpack.qa.conf.js // webpack qa环境构建配置
├── config
│ ├── dev.env.js // mobile端项目配置
│ ├── index.js // 项目配置汇总
│ ├── prod.env.js // mobile端prod项目配置
│ ├── qa.env.js // mobile端qa项目配置
│ └── test.env.js // 测试项目配置
├── dist
├── index.ejs // html模板
├── node_modules
├── package-lock.json
├── package.json
├── src
│ ├── assets // 项目资源
│ ├── components // 公共封装组件
| │ ├── Agreement // 文本公告弹窗
| │ ├── AlertTitle // 提示标语
| │ ├── App // APP总容器
| │ ├── ChatItem // 咨询聊天组件
| │ ├── DoctorInfoItem // 医生信息
| │ ├── FilterModal // 信息过滤组件
| │ ├── GHNotice // 富文本公告弹窗
| │ ├── HomePages // 首页公告
| │ ├── HospitalInfoItem // 医院信息
| │ ├── MySegmentedControl // 列表展示
| │ ├── MySwitch // switch组件
│ | └── SexSelect // 性别选择组件
│ ├── const // 常量配置
│ ├── containers // 不同业务页面
| │ ├── App // 项目入口/首页
| │ ├── CheckResult // 检验检查模块
| │ ├── Consult // 咨询模块
| │ ├── DoctorTeam // 医生团队模块
| │ ├── DrugNews // 快讯模块
| │ ├── Fl_up // 随访模块
| │ ├── Global // 医生信息
| │ ├── Guide // 引导模块
| │ ├── Home
| │ ├── Me // 个人中心
| │ ├── MedicalRecord // 诊疗卡中心
| │ ├── NoMatch // 404页面
| │ ├── OnlineOrder // 线上订单
| │ ├── OrderCenter // 订单中心
| │ ├── Pay // 支付页面
| │ ├── PrivateDoctor // 专职医生介绍页面
| │ ├── Report // 远程会诊专家报告
| │ ├── Tools // 签名模块
| │ ├── YuYueGuaHao // 预约挂号-南方医科大学南方医院
│ | └── YuYueGuaHao-TaiHe // 预约挂号-太和
│ ├── entry.js // 项目入口
│ ├── hoc // 高阶函数
│ ├── reducers // redux-reducer
│ ├── routers // 路由配置
│ ├── saga // redux-saga
│ ├── server // 接口相关api
│ ├── ui_module_components // git submodule
│ └── utils // 工具类
└── static // 静态文件夹
├── .gitkeep
├── images
└── pdfjs-dist
```
## 技术/业务要点
- react spa 项目，组件封装度并不高，所以，没有复杂的封装组件。组件使用请直接看代码;
- 从文件目录可以了解，ui_module_components 属于 git submodule 模块，可以使用 git submodule update --init --remote 获取最新代码。可以修改.gitmodules 相关的配置；（PS：编译前先获取 git submodule 中的代码）
- 项目中支付，目前一种是**本地支付**，另一种是跳转**南方太和分院公众号的页面支付**，具体需要根据业务来判断使用哪种支付。
- 此项目新功能比较少，所以开发版本号和需求版本号并用。版本号以 v 开头 x.y.z，分别是主版本号、副版本号、次版本号；
- git 版本控制流程：
1. 从 dev 分支 checkout v 需求版本，完成后合并回 dev；
2. 在 jenkins dev 分支上发布 qa 版本，生成测试包；
3. 测试没问题，把 dev 合并到 master；
4. 在 jenkins master 分支上发布 prod 版本，生成正式包。
- ui_module_components 抽取**南方医务通公众号**和**太和分院公众号**中的共有业务页面，以便开发效率提升。因此，两个项目用的框架技术是一样的；
- 项目框架比较旧，可以升级 react、webpack 架构，以适应新的写法。