组件库使用介绍

详见在线文档地址：https://frontenddoc-dev.yzone01.com/#/

体验

请使用微信扫一扫以下体验码
组件库文档 - 图1image.png

环境

  1. node = 9.8.0
  2. npm = 5.6.0

构建

编译并预览

进入项目目录开始开发，可以选择小程序预览模式，或者 H5 预览模式，若使用微信小程序预览模式，则需要自行下载并打开微信开发者工具，选择预览项目根目录下 dist 目录。
1、示例-微信小程序

  1. $ npm run dev:weapp

2、示例-H5

  1. $ npm run dev:h5

3、文档站点

  1. $ npm run dev:doc

项目打包

1、 打包小程序示例代码

  1. $ npm run build:weapp

2、打包 H5 示例代码

  1. $ npm run build:h5

3、打包文档站点代码

  1. $ npm run build:doc

4、打包组件库代码

  1. $ npm run build:component

发布

1、发布组件库

  1. $ npm publish

2、发布组件库 beta 版

  1. $ npm run beta

3、发布文档
去sdp 站点上选择分支进行发布

开发流程

组件库文档 - 图3

开发规范

代码规范

1、 安装如下插件，方便代码检查

2、安装 Pretter，方便识别.prettierrc格式化代码
image.png
3、提交代码 commit 时，commit 信息需要遵循 Angular Style Commit Message Conventions。
4、当有测试用例时，请给你提交的代码也添加相应的测试用例。

目录规范

  1. ├── build                  文档配置目录
  2. ├── config                 示例配置目录
  3. |   ├── dev.js             开发时配置
  4. |   ├── index.js           默认配置
  5. |   └── prod.js            打包时配置
  6. ├── dist                   默认构建输出目录
  7. ├── docs                   文档系统源码目录
  8. |   ├── assets             静态资源
  9. |   ├── components         公共组件目录
  10. |   ├── lib                动画，主题变量
  11. |   ├── markdown           API文档源文件
  12. |   ├── pages              页面文件目录
  13. |   ├── view               API文档页面入口
  14. |   ├── babel.lrc          文档系统babel配置
  15. |   ├── app.jsx            文档系统项目入口js文件
  16. |   ├── index.html         文档系统项目入口文件
  17. |   ├── nav.config.yml     菜单配置
  18. |   ├── page-route.js      路由配置
  19. ├── site                   发布文档目录
  20. ├── src                    源码目录
  21. |   ├── assets             示例 i静态资源
  22. |   ├── common             组件 公共方法库目录
  23. |   ├── components         组件 目录
  24. |   ├── main               sdp环境配置文件
  25. |   ├── pages              示例 页面文件目录
  26. |   |   ├── index          示例 index 页面目录
  27. |   |   |   ├── banner     示例 页面 index 私有组件
  28. |   |   |   ├── index.js   示例 index 页面逻辑
  29. |   |   |   └── index.css  示例 index 页面样式
  30. |   ├── style              组件 样式
  31. |   ├── app.scss           示例 总通用样式
  32. |   ├── index.html         示例 入口html文件
  33. |   ├── app.js             示例 入口js文件
  34. |   ├──index.js            组件 全包入口js文件(含样式)
  35. |   ├──project.config.json 示例 小程序配置文件
  36. |   └── ui.js              组件 全包入口js文件(无样式)
  37. └── WEB-INF                sdp发布配置文件
  38. └── package.json

API 规范

  1. 尽量符合简单明了原则，参考 taro-ui 和 antd-mobile 已有的设计方式。
  2. 设计先行，输出用例图和类图，讨论确认后再开发。
  3. 尽量使用基础组件进行开发，保证可以在小程序端利用原生能力
  4. 组件名以 - 分割, 例如 picker-view，文件后缀名统一为 .tsx，对外开放组件名称增加前缀At（规避 taro 构建工具无法区分基础组件的问题）

新增组件流程

组件源码

  1. 在src\components下新增组件名目录，存放 tsx 源码和测试用例
  2. 在src\index.js和src\ui.js引入上一步新增的文件，子组件也需要单独引入，参考AtList和AtListItem
  3. 在src\style\components下新增组件名.scss，存放组件样式，开发时尽量使用变量替换通用样式，组件有依赖，还需把依赖的组件样式引入，保证按需加载正常使用
  4. 在src\style\components\index.scss中引入上一步新增的样式文件
    1. 如果不是 ts 语法写的组件，需要修改@types下的类型文件
    2. 组件必须引入import Taro from '@fish.mobile/taro'，没使用也要引入
    3. 组件必须增加属性static options = { addGlobalClass: true }或者继承AtComponent（import AtComponent from '../../common/component'）
    4. 组件需要支持className和customStyle

示例源码

  1. 在src\pages中组件对应的分类下新增组件示例源码
  2. 在src\app.js中新增组件示例路由
  3. 在src\pages\panel\index.js中新增组件示例菜单

文档源码

  1. 在docs\markdown下新增组件名.md存放 API 文档
  2. 在docs\view中新增组件名目录（大驼峰），引入上一步新增的组件名.md
  3. 在docs\page-route.js中新增组件路由
  4. 在docs\nav.config.yml中新增文档系统菜单
    1. 示例源码需要放入md文档里的示例标题下的js里，样式放到scss里
    2. API参数如果不是全端支持，需要增加两列微信小程序和h5，表明支持程度

遗留问题

  1. 存在缓存，没有使用hash
  2. dev样式重复打包
  3. h5下按需变量覆盖失败
  4. nerv转react后，hook运行报异常
  5. nerv转react后，使用内置输入法输入文本失败
  6. 兼容支付宝小程序