# 南方医院太和分院微信公众号项目
> React 单页面公众号应用 —— 主要使用 react.js + redux + redux-saga + webpack 等技术栈，dev 环境使用 express 加载运行，使用中间件处理 proxy 转发。
> 由于整体框架都处于比较旧的状态，因此 nodejs 版本需要使用低版本的 v10.12.0。
## 项目 Git
#### [Gogs Git address](https://gogs.ywtinfo.com/ywt/nfwx_taihe)
#### [Gogs Git submodule address](https://gogs.ywtinfo.com/ywt/ui_module_components)
#### 生产环境分支：publish
#### 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-nfthwe](https://jenkins.ywtinfo.com/job/qa-nfthwe/)
prod 环境
南方医院太和分院公众号 [product-fe-nfthwe](https://jenkins.ywtinfo.com/job/product-fe-nfthwe-%E5%A4%AA%E5%92%8C%E5%85%AC%E4%BC%97%E5%8F%B7/)
## 文件目录
```javascript
.
├── README.md
├── build // 构建配置目录
│ ├── build-pc.js // pc端prod环境变量配置
│ ├── build-qa-pc.js // pc端qa环境变量配置
│ ├── build-qa.js // mobile端qa环境变量配置
│ ├── build.js // mobile端prod环境变量配置
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server-pc.js // pc端dev环境express启动
│ ├── dev-server.js // mobile端dev环境express启动
│ ├── mock.js // mock数据
│ ├── utils.js // 样式相关构建工具库
│ ├── webpack.base.conf.js // webpack基本构建配置
│ ├── webpack.dev-pc.conf.js // pc端webpack dev环境构建配置
│ ├── webpack.dev.conf.js // mobile端webpack dev环境构建配置
│ ├── webpack.prod-pc.conf.js // pc端webpack prod环境构建配置
│ ├── webpack.prod.conf.js // mobile端webpack prod环境构建配置
│ ├── webpack.qa-pc.conf.js // pc端webpack qa环境构建配置
│ └── webpack.qa.conf.js // mobile端webpack qa环境构建配置
├── config
│ ├── dev-pc.env.js // pc端dev项目配置
│ ├── dev.env.js // mobile端项目配置
│ ├── index.js // 项目配置汇总
│ ├── prod-pc.env.js // pc端prod项目配置
│ ├── prod.env.js // mobile端prod项目配置
│ ├── qa-pc.env.js // pc端qa项目配置
│ ├── qa.env.js // mobile端qa项目配置
│ └── test.env.js // 测试项目配置
├── dist
├── index.ejs // html模板
├── node_modules
├── package-lock.json
├── package.json
├── .babelrc // babel配置
├── .editorconfig // 编辑器配置
├── .eslintignore
├── .eslintrc.js // eslint配置
├── .gitignore
├── .gitmodules // git submodule配置
├── .postcssrc.js
├── .prettierrc
├── src
│ ├── assets // 项目资源
│ ├── components // 公共封装组件
| │ ├── Agreement // 文本公告弹窗
| │ ├── App // APP总容器
| │ ├── ChatItem // 咨询聊天组件
| │ ├── DoctorInfoItem // 医生信息
| │ ├── FilterModal // 信息过滤组件
| │ ├── GHNotice // 富文本公告弹窗
| │ ├── HomePages // 首页公告
| │ ├── HospitalInfoItem // 医院信息
| │ ├── MySegmentedControl // 列表展示
| │ ├── MySwitch // switch组件
| │ ├── ProgressSteps // 进度条组件
| │ ├── Question // 调查问卷
| │ ├── QuickModal // 输入框弹窗组件
| │ ├── SexSelect // 性别选择组件
| │ ├── checkRadioBox // checkbox 组件
| │ └── wxOpenTags // 小程序跳转组件容器
│ ├── const // 常量配置
│ ├── containers // 不同业务页面
| │ ├── App // 项目入口/首页
| │ ├── CheckResult // 检验检查模块
| │ ├── Consult // 咨询模块
| │ ├── DailyPay // 日清单模块
| │ ├── Deposit // 住院押金模块
| │ ├── DoctorTeam // 医生团队模块
| │ ├── DrugNews // 快讯模块
| │ ├── Fl_up // 随访模块
| │ ├── Global // 医生信息
| │ ├── Guide // 引导模块
| │ ├── Home
| │ ├── Inquiry //问卷调查模块
| │ ├── IntelligenceGuide // 问诊引导
| │ ├── Me // 个人中心
| │ ├── MedicalRecord // 诊疗卡中心
| │ ├── NoMatch // 404页面
| │ ├── Notice // 富文本提醒页面
| │ ├── OnlineOrder // 线上订单
| │ ├── OrderCenter // 订单中心
| │ ├── OutpatientPay // 挂号模块
| │ ├── Pay // 支付页面
| │ ├── PlusOrder // 加号模块
| │ ├── Report // 远程会诊专家报告
| │ ├── Tools // 签名模块
| │ ├── WaitingTreatment // 扫码报道模块
| │ ├── YuYueGuaHao // 预约挂号-南方医科大学南方医院
| │ ├── YuYueGuaHao-TaiHe // 预约挂号-太和
| │ ├── YuYueGuaHao-TaiHe-Pc // 预约挂号- PC端
| │ └── invoice // 电子发票
│ ├── entry.js // 项目入口
│ ├── hoc // 高阶函数
│ ├── reducers // redux-reducer
│ ├── routers // 路由配置
│ ├── saga // redux-saga
│ ├── server // 接口相关api
│ ├── ui_module_components // git submodule
│ └── utils // 工具类
└── static // 静态文件夹
├── images
└── pdfjs-dist
```
## 技术/业务要点
- 早期的 react spa 项目之一，组件封装度并不高，所以，没有复杂的封装组件。组件使用请直接看代码;
- 从文件目录可以了解，ui_module_components 属于 git submodule 模块，可以使用 git submodule update --init --remote 获取最新代码。可以修改.gitmodules 相关的配置；（PS：编译前先获取 git submodule 中的代码）
- 早期太和业务还有一个项目是**PC 端医生展示**，由于当时初衷是不想维护太多的仓库，所以就一同合并在此项目代码中；
- mobile 和 pc 端通过环境变量，动态加载不同项目的 routes，从而使界面和业务隔离，两者打包均不产生代码污染；
- 项目中支付，目前一种是**本地支付**，另一种是跳转**南方医务通公众号的页面支付**，具体需要根据业务来判断使用哪种支付。
- 开发版本号以 dv 开头 x.y.z，分别是主版本号、副版本号、次版本号，(vx1.y1.z1)，括号里边是需求版本号；
- git 版本控制流程：
1. 从 dev 分支 checkout dv 版本，完成后合并回 dev；
2. 在 jenkins dev 分支上发布 qa 版本，生成测试包；
3. 测试没问题，把 dev 合并到 master；
4. 在 jenkins master 分支上发布 prod 版本，生成正式包。
- ui_module_components 抽取**南方医务通公众号**和**太和分院公众号**中的共有业务页面，以便开发效率提升。因此，两个项目用的框架技术是一样的；
- 项目框架比较旧，可以升级 react、webpack 架构，以适应新的写法。