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

环境、开发、调试

git clone 项目地址
sudo npm install
npm run react-start
浏览器访问 http://localhost:8080/ Server指向 ./src-react 目录
修改 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
把浏览器访问 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 //页面

环境、开发、调试

git clone 项目地址
sudo npm install
sudo clam on
浏览器访问 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.

版本发布

确认本地已验收通过
gulp //命令行
git push origin daily/a.b.c //提交文件到分支
git tag publish/a.b.c //创建新版本标签
git push origin publish/a.b.c //发布分支
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

h5-cli

react 开发规范

react 架构模型

目录结构

项目相关工具

环境、开发、调试

关于 git branch

开发新功能

修改bug

切换完新版本后

版本发布规则

测试环境

线上代码发布

less 命名空间

关于组件开发规范

关于数据加载

关于 url 中参数 target=_blank 说明

SPMB

版本功能记录

jq + seajs 开发规范

目录与开发规范

项目相关工具

环境、开发、调试

关于git branch

开发新功能

修改bug

版本发布

版本记录

后端接口文档

其他文档

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Last publish

Collaborators

h5-cli

react 开发规范

react 架构模型

目录结构

项目相关工具

环境、开发、调试

关于 git branch

开发新功能

修改bug

切换完新版本后

版本发布规则

测试环境

线上代码发布

less 命名空间

关于组件开发规范

关于数据加载

关于 url 中参数 target=_blank 说明

SPMB

版本功能记录

jq + seajs 开发规范

目录与开发规范

项目相关工具

环境、开发、调试

关于git branch

开发新功能

修改bug

版本发布

版本记录

后端接口文档

其他文档

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Last publish

Collaborators

Weekly Downloads