frontend-docs/患者端公众号-太和.md

南方医院太和分院微信公众号项目

React 单页面公众号应用 —— 主要使用 react.js + redux + redux-saga + webpack 等技术栈，dev 环境使用 express 加载运行，使用中间件处理 proxy 转发。
由于整体框架都处于比较旧的状态，因此 nodejs 版本需要使用低版本的 v10.12.0。

项目 Git

Gogs Git address

Gogs Git submodule address

生产环境分支：publish

QA 环境分支：dev

开发环境分支：视需求版本而定，具体命名规则见文末

项目 Command

node version: v10.12.0, npm/yarn install

// 编译前先获取 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

prod 环境

南方医院太和分院公众号 product-fe-nfthwe

文件目录

.
├── 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 架构，以适应新的写法。