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