react 开发规范

• author：Saohui
  • react 开发规范，部分由 Saohui 编写
  • 如果发现问题可以，联系微信号： w_z_w_520

react 架构模型

目录结构

- BaseComponent => 基础组件类的封装，对 React.Component 进行二次封装，包括 loading 机制，错误处理机制
- component => 公共组件的封装，一些常用的基础组件的封装（有一些老的页面组件也放在这，这是因为老版本没有 pageComponent，故放在了这）
- hoc => 用于自动刷新（手机端浏览器，返回后不能自动刷新）
- lib => 一些库函数，工具函数
- module => 基础模块，如：数据请求接口
- pageComponent => 页面组件，方便单页面进行组件化（当一个页面比较复杂的时候，需要进行组件化，但是这部分组件往往复用率比较低，这时候如果放到公共的组件库中，就会加大维护成本）
    - "pageName" => 页面的命名规范遵循和页面名称一致的一个文件夹，然后在里面进行新建 js 文件进行组件开发

项目相关工具

• webpack
• less
• git
• nodejs
• babel

环境、开发、调试

1. git clone 项目地址
2. sudo npm install
3. npm run react-start
4. 浏览器访问 http://localhost:8080/ Server指向 ./src-react 目录
5. 修改 host 文件使用，我们的域名进行本地开发测试
   • 127.0.0.1 a.uat.yuantutech.com
   • 127.0.0.1 a.daily.yuantutech.com
   • 127.0.0.1 a.s.yuantutech.com
   • 127.0.0.1 a.test.yuantutech.com
6. 把浏览器访问 localhost 改为 a.uat.yuantutech.com

关于 git branch

开发新功能

git checkout -b daily/a.b.c 升级b 比如当前线上版本号1.0.0 新功能的版本应该为 1.1.0.

修改bug

git checkout -b daily/a.b.c 升级c 比如当前线上版本号1.0.0 新功能的版本应该为 1.0.1.

切换完新版本后

• 修改 package.json 中的版本号
• npm run dev
• 然后就可以进行开发了

版本发布规则

测试环境

• npm run dev // 打包测试环境代码
• git add . // 添加到 git 本地缓存区
• git commit -m 'xxx' // 添加到 git 本地仓库
• git push origin daily/x.x.x // 把本地代码提交到服务器
• 这时候就可以打开浏览器，访问 uat.yuantutech.com/yuantu/x.x.x/xxx.html

线上代码发布

• git merge master // 合并主分支
• npm run dist // 打包线上环境代码
• git add . // 添加到 git 本地缓存区
• git commit -m 'xxx' // 添加到 git 本地仓库
• git push origin daily/x.x.x // 把本地代码提交到服务器
• git tag publish/x.x.x // 添加版本 tag
• git push origin publish/x.x.x // 把 tag 提交到远程
• 这时候已经发布版本完成，访问 s.yuantutech.com/yuantu/x.x.x/xxx.html
• 最后需要把代码合并到主分支
• git checkout master // 切到主分支
• git merge daily/x.x.x // 把代码合到主分支
• npm run dev
• git push origin master

less 命名空间

• 当你新建一个页面后，需要进行样式的自定义时，需要在本 less 文件中包一个模块名称相同的 class 选择器
• 然后给页面组件的顶层的元素的 className 加上这个 class

例如：有一个页面叫 page-name.js

page-name.less

.page-name {
    // 这里面写你的样式
}

page-name.js

...
export default class PageName extends Smart... {
    render () {
        return <div className="page-name">
        </div>
    }
}

关于组件开发规范

在开发组件过程中，我们把代码分为两个区域

• render 区
• 业务逻辑 区

例如

...
export default class xxx extends Smart... {

    constructor ( props ) {
        super( props )
    }

    ... // 这边是业务逻辑区

    /***** render 区开始 *****/

    renderItem () {
        return <div>...</div>
    }

    render () {
        return <div className="page-name">
        </div>
    }
}

关于数据加载

• 数据加载，没有特殊情况统一把借口调用放入一下文件（jsonp）
  • UserCenter => 普通借口第阿勇
  • Aolsee => 广告类借口调用

关于 url 中参数 target=_blank 说明

• 此参数用于告诉客户端，此页面需要过场动画，为必填项

SPMB

• 关于我们 1521
• 下载慧医 1522
• 反馈详情 3011
• 意见反馈 1523
• 意见反馈2 3010
• 意见反馈3 3012
• 意见反馈4 1524
• 意见反馈首页 1528
• 意见反馈问题详情 1529
• 法律须知 1530
• 隐私声明 1525
• 常见问题 3000
• 预约挂号规则 1526
• 就诊人 1502
• 收货地址管理 1520
• 收货地址list 1707
• 账单详情 1511
• 账单list 1510
• 绑定就诊卡 1701
• 医生首页 1211
• 重设密码 1531
• 找回密码 1532
• 健康档案 1731
• 健康档案2 1700
• 健康档案3 1555
• 健康档案详情 1730
• 添加健康档案 1560
• 住院充值 1705
• 新版区域首页 1050

• 住院记录 1000
• 医院首页 1001
• 挂号确认 1005
• 登录 1541
• 登录2 1541
• 消息中心 1601
• 消息2 1600
• 预约挂号记录 1100
• 我的 1500
• 导航 3001
• 网络诊间 1704
• 资讯详情 1706
• 查看就诊卡 1702
• 就诊人列表 1501
• 缴费 1201
• 缴费详情 1201
• 诊间排队信息 1703
• 充值 1400
• 选择预约挂号类型 1002
• 预约详情2 1101
• 新用户注册 1550
• 报告单详情 1301
• 报告单 1300
• 选择科室 1003
• 科室首页 1212
• 选择医生 1013
• 选择时间 1004
• 登录 1541
• 接种计划 1601
• 疫苗接种 1708
• 搜索科室/医生 1709
• 搜索详情页 1711
• windvane-test 1551
• 1710
• 视频问诊－处方单照片上传(prescription/detail.html) 1711
• 卡片详情页面 1712
• bind-card-jump.html 1713
• 住院记录 1800
• 住院记录-日清单列表 1801
• 住院记录-日清单明细 1802
• 应用列表 1006
• 医院列表 1019
• 选择医生 1380
• 爽约记录 1552
• 就诊评价列表 1514
• 就诊评价 1512
• 医院选择 1243
• 资讯列表 1540
• 缴费列表 1200
• 支付结果查询 1521
• 隐私声明 1252
• 充值 1487
• 选择医生 1340
• 首页搜索 1473
• 科室->医生列表 1911
• 医生简介 1912
• 追加评价 1513
• 我的关注列表 1515
• 绑定手机 1104
• 创建在线咨询 1314

版本功能记录

• 1.3.7 搜索功能

• 1.3.16 合并1.3.7

• 1.3.27 => 1.3.19 预约收费版本 + 线上版本 + 预约确认页面产品重构

• 1.3.25 预约确认页面产品重构

• 1.3.32 微信内支付

• 1.3.31 医生科室搜索与开发

• 1.3.34 医保卡绑定和缴费

• 1.3.31 医生科室搜索与开发

• 1.3.32 微信内支付

• 1.5.15 广州番禺医保卡支付

• 1.9.7 医院/科室首页产品迭代重构

jq + seajs 开发规范

目录与开发规范

使用 Nodejs 在本地进行开发和调试，使用 gulp 把 ./src 的开发文件部署到 ./build 目录。使用打git标签的方式进行发布上线.

项目相关工具

• less
• gulp
• git
• nodejs
• clam
• http://juicer.name/docs/docs_zh_cn.html

-root
    -.clam 
    -build //打包以后的线上文件
    -src //开发目录
        -libs //基础库
        -mods //模块
        -pages //页面

环境、开发、调试

1. git clone 项目地址
2. sudo npm install
3. sudo clam on
4. 浏览器访问 http://localhost/ Server指向 ./src 目录

关于git branch

开发新功能

git checkout -b daily/a.b.c 升级b 比如当前线上版本号1.0.0 新功能的版本应该为 1.1.0.

修改bug

git checkout -b daily/a.b.c 升级c 比如当前线上版本号1.0.0 新功能的版本应该为 1.0.1.

版本发布

1. 确认本地已验收通过
2. gulp //命令行
3. git push origin daily/a.b.c //提交文件到分支
4. git tag publish/a.b.c //创建新版本标签
5. git push origin publish/a.b.c //发布分支
6. git branch -d daily/a.b.c //删除开发分支

版本记录

• 1.1.49 工单系统

后端接口文档

http://121.41.48.217/yuantu/usercenter/wikis/home

其他文档

• 远图客户端(H5,android,ios)架构图 https://www.processon.com/diagraming/55f66289e4b0a8c6fae3f1f4
• 客户端(android,ios)功能图 https://www.processon.com/view/link/55f8b85fe4b0b8d618962e8d
• 前端开发和发布流程 https://www.processon.com/diagraming/55f7739ee4b0a8c6faed1b88