🐸components-hybrid

一个基于 mapi 封装的业务 H5 组件库。

components-hybrid 是基于 mapi 而开发的模板组件，提供了更高级别的抽象支持，更加专注于页面，开箱即用。

安装

你需要在你的项目中安装对应的 npm 包并使用。

yarn add components-hybrid
# npm install components-hybrid --save

开发规范

项目使用 git-cz 提交格式化的 commit 记录，用 commitlint 检测 commit 格式是否符合规范。 npm install -g @commitlint/cli

默认情况下 push 到分支 master,beta 这几个分支才会触发自动发布流程，并且只有 feat、fix 和 refactor 提交才会触发版本升级，版本号按照语义化版本规则自动生成。

• 版本号按照 x.y.z 格式组织（git tag 会加上 v 前缀，如 v1.0.0 ）
• bug fix 发布会增加修订版本号（如 1.0.0 –> 1.0.1 ）
• feature 或者 refactor 发布会增加次版本号（如 1.0.0 –> 1.1.0 ）
• break change feature 发布会增加主版本号（如 1.1.1 –> 2.0.0 ，官方建议这种不兼容的升级应该推送到 next 分支开发，之后合并到 master ）

为了让 commit 信息尽可能的好看，减少不必要的 Merge from 提交记录，我们使用 rebase 的方式合并代码，参考以下步骤:

• 在 Gitlab 的项目设置中将 Merge requests 中的 Merge method 设置为 Fast-forward merge ，这样 merge request 审核代码的时候就不会产生 Merge from xxx
• 本地合并远程仓库的代码使用 git pull --rebase ，而不是 git pull ，可以通过以下命令配置以后默认 pull 的规则就是 rebase ，不用每次都加 --rebase : git config --global pull.rebase true

迁移至 dumi

• 为方便按需引入，建议新增组件
  • 组件目录为两级；
  • 文件名改为大写，如 Avatar；
  • 主文件为 index.js;
  • css 样式文件为 index.css/index.module.css；
• 修改步骤
  • 组件目录下新建 index.md 文件 （组件名称、demo 演示、API）；
  • 组件目录下新建 index.d.ts 类型声明文件 生成 API；
  • 在 src/index.js 下导出组件；
  • 完成后在 src/README.md 文件中打 ✅；

组件总览

✅ 已完成

| 组件名称 | 完善状态 | 维护人员 | | :------------------------------------- | :---------------------: | -------: | | LeftSlider 左滑 | ✅ | | | Avatar 头像 | ✅ | | | BannerVertical 竖向轮播 | ✅ | | | BScroll 滚动组件 | 使用包装组件文档，忽略 | | | CircleProcess 圆圈进度条 | ✅ | | | DragPhoto 上传图片 可拖拽 | ✅ 依赖业务封装，销氪APP端可正常使用 | | | TextEllipsis 文字省略 | ✅ | | | MockTap | 方法 | | | HInput 输入框 | ✅ | | | HInputBox 输入框 | ✅ | | | Keyboard | ✅ | | | HPicker | ✅ | | | HScrollView 滚动视图 | ✅ | | | VScrollView 滚动视图 | ✅ | | | ScrollView 滚动视图 | ✅ | | | Skeleton 骨架屏 | ✅ 依赖window.showDialog | | | TabLayoutV2 自动计算间距滚动tab | ✅ | | | HorizontalScrollTabLayout tab 滚动视图 | ✅ | | | HTextArea 文本域 | ✅ | | | CustInput 输入框 | 使用包装组件文档，忽略 | | | VerInput 输入框 | 使用包装组件文档，忽略 | | | ViewPager 视图 | ✅ | | ScaleViewPager | | ScaleViewPager | ✅ | | | ViewPager2 | ✅ | | | HWheel | ✅ | |