# 南方医院太和分院微信公众号项目 > 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 架构,以适应新的写法。