search

douzi8 / lechebang

乐车邦h5文档
2 stars 1 forks source link

H5代码提交规范 #19

Open douzi8 opened 6 years ago

douzi8 commented 6 years ago

安装模块

  1. eslint安装 eslint规则介绍

    npm install eslint@4.0.0 -g

  2. babel-eslint安装

    npm install babel-eslint@7.2.3 -g

  3. imageOptim安装

    • 先下载imageOptim安装包,在执行以下命令 
      npm install -g imageoptim-cli@2.3.5

      需要注意，安装好的软件必须直接放在mac的Applications目录下面 打开imageOptim软件进行有损压缩 opn set

  4. svgo安装

    npm install -g svgo

  5. prettier安装

    npm install -g prettier

  6. css-prettier安装

    npm install -g css-prettier

  7. html-prettier安装

    npm install -g html-prettier

  8. eslint-plugin-lcb-mini

    npm install -g eslint-plugin-lcb-mini

业务项目

  1. 小程序模块clone

    git clone {{git@git.lcbint.cn:weixin/all.git}} && cd {{all}} && cp hooks/* .git/hooks/

  2. h5模块clone

    git clone {{git@git.lcbint.cn:h5/ping.git}} && cd {{ping}} && cp hooks/* .git/hooks/

Lizard框架提交

  1. 微信小程序框架clone

    git clone git@git.lcbint.cn:weixin/lizard.git && cd lizard && git checkout 2.0.0 && cp hooks/* .git/hooks/

  2. h5框架clone

    git clone git@git.lcbint.cn:development/h5.git && cd h5 && git checkout 0.8.0 && cp hooks/* .git/hooks/
douzi8 commented 6 years ago

小程序提交校验规则

wxml

  1. 使用wx:for的时候，必须强制指明wx:key属性
  2. wx:key必须符合循环key规范
  3. image,include标签src引用本地资源的使用必须使用/xx绝对路径
  4. 标签class属性不能为空
  5. 文本节点，不能存在兄弟元素
  6. input元素有placeholder属性的时候，必须设置placeholder-class="input-placeholder"，
  7. input元素不能使用placeholder-style
  8. input设置了bindfocus属性，必须同时设置bindblur属性
  9. input设置了type属性，值必须是text,number,idcard,digit中的一种
  10. input如果设置class属性，值只能是form2-input, form2-input-right(二选一),show-dots
  11. input不能使用disabled属性，使用input-disabled组件替代
  12. icon标签, 不能使用type="success" (ios8,9真机显示不出来),改用/lizard/style/icon/里面的图标
  13. class属性form2-item-l,form2-item,flex-wrap, flex-center-wrap只能取其一
  14. 所有属性值，不能存在大写，验证规则: /[a-z-:]/
  15. 不能使用import, template,div, ul, li,span,a, del标签，百度和支付宝API不对等
  16. wx:if 和id属性不能共存 (百度不支持)，id建议修改为class="js-xx"
  17. 组件里的模板，禁止使用wxs标签
  18. wxs标签，必须设置src属性
  19. 读取wxs标签的module属性，禁止提交没有使用的wxs标签
  20. 自定义组件不允许配置data-xx属性（百度不支持），改成使用id标识
  21. icon标签不能使用bindtap属性
  22. swiper-item下面的image标签，不能使用mode="widthFix"

html

  1. 使用v-for的时候，必须强制指明:key属性
  2. 标签class属性不能为空
  3. 文本节点，不能存在兄弟元素
  4. flex布局(flex-wrap,flex-column-wrap,form2-item,form2-item-l)的儿子元素都要使用div包裹

wxss

注意：框架目录的base.wxss和layout.wxss不参与校验，人工校验规则即可

  1. 没有使用的css代码，必须删掉

  2. 只能使用::after, :after, :: before,: before,:first-child,:last-child,:nth-child(n),:nth-last-child(n)伪类

  3. 禁止使用1rpx值，可以改为1px

  4. 使用align-items, transition, transform, animation,justify-content必须同时写出-webkit-前缀

  5. 使用-webkit-transition属性时候，transform值必须带-webkit-前缀

    -webkit-transition: -webkit-transform .2s ease 0s;

  6. 除了css selector为.flex-wrap, .flex-column-wrap, .flex-center-wrap, .flex-multi-row, .form2-item, 都不能定义display: flex

  7. 除了css selector为flex, 都不能定义flex属性

  8. 定义了width属性，就不允许定义padding-left, padding-right属性, 如果使用padding定义，则这两项属性必须为0

  9. 定义了height属性，就不允许定义padding-top, padding-bottom属性， 如果使用padding定义，则这两项属性必须为0

  10. position的值不能是fixed (H5代码校验)

  11. vertical-align的值不能是middle,推荐使用flex-center-wrap类名

  12. page-top,page-bottom不能有父元素，除非父元素是block

  13. 元素标签名字规范只能是小写字母，-

  14. 禁止使用icon标签，请使用svg替代

小程序js

  1. 页面js不能引用模块入口的js (百度小程序)

JSON

  1. 配置组件引用只能使用绝对路径，比如/lizard/component/debug/index
  2. pages目录下面的json文件，必须引用"ui-debug": "/lizard/component/debug/index"组件
  3. pages目录下面的json文件，navigationBarTextStyle属性只能使用black或者white
youtiao66 commented 5 years ago

npm install -g imageoptim-cli@1.15.4 npm install -g eslint-plugin-lcb-min