# 小程序开发规范

背景

卡布达现在有微信原生小程序（混入了vant组件）、mpvue小程序（混入了vant组件）、uni-app小程序

# 命名规范

语义化命名
页面文件夹名字统一用小写字母加短划线： eg: demo-file
组件文件夹名字统一用大驼峰： eg: DemoComponents
变量名采用小驼峰： eg: dataDemo
类名用小写字母加短划线： eg: demo-class
api定义，用小写字母加下划线： eg: demo_api

# eslint 校验规则

//规则
rules = {
  "no-constant-condition": 2, // 禁止在条件中使用常量表达式 if(true) if(2)
  "no-label-var": 2, // label名不能与var声明的变量名相同 (说明：同时出现 no-labels 错误)
  "no-negated-in-lhs": 2, // in操作符的左边不能有! (即 no-unsafe-negation)
  "no-redeclare": 2, // 禁止重复声明变量 (同noDupeArgs.js 禁止参数重复,已添加示例)
  "no-self-compare": 2, // 不能比较自身
  "no-sequences": 2, // 禁止使用逗号运算符
  "no-spaced-func": 2, // 函数调用时函数名与()之间不能有空格
  "no-sparse-arrays": 2, // 禁止稀疏数组，[2, , 2]
  "no-undef": 2, // 不能有未定义的变量
  "no-undef-init": 0, // 变量初始化时不能直接给它赋值为undefined (说明：同时报no-undefined 错误)
  "no-unreachable": 0, // 不能有无法执行的代码
  "no-use-before-define": 2, // 未定义前不能使用
  "no-useless-call": 2, // 禁止不必要的call和apply （说明：同时报 prefer-reflect 错误）
  "computed-property-spacing": [2, "never"], // 是否允许计算后的键名什么的 (说明: 示例未实现)
  "generator-star-spacing": 2, // 生成器函数*的前后空格
  "handle-callback-err": 2, // nodejs处理错误
  "use-isnan": 2, // 禁止比较时使用NaN，只能用isNaN() (说明：同时报id-match错误)
  "valid-typeof": 2, // 必须使用合法的typeof的值
  "vue/order-in-components":0, //component排序
  //html
  "vue/max-attributes-per-line": ["error", { //html属性一行不能超过三个
      "singleline": 5,
      "multiline": 3
  }],
  "vue/attributes-order":0, // 属性排序
  "vue/html-self-closing":0,
  "vue/html-quotes":0, //强制双引号
  "vue/multiline-html-element-content-newline":0,
  "vue/singleline-html-element-content-newline":0,
  "vue/html-closing-bracket-newline":0,
  "vue/mustache-interpolation-spacing":0,
  "vue/name-property-casing":0,
  "vue/no-v-html":0,
  "vue/attribute-hyphenation":0,
  "vue/require-default-prop":0,
  "vue/prop-name-casing":0,
  "no-prototype-builtins":0,
  "vue/require-prop-types":0,
  "no-invalid-this":0
  "space-before-function-paren": 0,
  'arrow-parens': 0,
  'generator-star-spacing': 0,
  'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
  'no-console': 0,
  'eol-last': 0,
  'camelcase': 0,
  'no-unused-vars': 0,
  'quotes': 0,
  'no-unneeded-ternary': 0
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

# 开发规范

页面属性

  data
  filter
  computed
  watch
  onLoad
  onShow
  methods
  onUnload
  onReachBottom
  onPullDownRefresh
  onShareAppMessage

1
2
3
4
5
6
7
8
9
10
11

小程序不能在html部分有复杂的js格式的判断（不生效）
变量，要现在data中定义，data的初始化放在页面卸载的生命周期onUnload
小程序虽然基于vue的项目，不要使用vue的moutend生命周期，小程序有自己的onLoad、onShow
一个容器多个属性，超过5个做换行处理，避免一个容器在一行很长
请求接口的点击事件进行防抖操作
前端尽量去完整的完成表单校验
小程序不等同于web，视觉效果比较突出，要做无数据处理和数据加载的动画交互
封装组件，如果只是为了保持一个页面代码量封装的组件，就写在本页面文件夹的。components,避免公共的components文件夹占用过大
小程序体量太大，已经分了子包，注意按照功能进行模块化，便于他人维护
小程序嵌套于微信的原因，加载量不能过大，尤其类似订单模块，也要限制后台一次性返回太多数据
小程序的图片各种交互设计师给的图也要注意大小，公共的尽可能的放在本地，注意设计师的UI比例
组件要加入注释，注释放在代码上面（上一行），或者后面（下一行），但不要放在代码后面
CSS 代码要有明显的代码缩进
不要使用内联样式，选择使用类，每个样式类之间空出一行
封装的组件定义有效属性，无效属性及时更新删除，避免有传入未赋值的属性组件内不使用
vue的小程序的App.vue 文件用onLaunch而不用onLoad（入口文件不管是冷启动还是热启动都不执行onLoad方法，执行onLaunch）
PS：这些是一些很简单的也不全面的规范，只为抛砖引玉，欢迎补充 @榆钱@鸭梨

← web 开发规范业务组件 →