frontend-docs/患者端公众号-白云.md

南方医务通微信公众号项目

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

项目 Git

Gogs Git address

生产环境分支：master

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-nfywtwe
　
prod 环境
南方医务通公众号 product-fe-nfywtwe

文件目录

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