目录概述

• 基础规范

  页面、样式、行为、规范，不用首屏加载的尽量分包

• 图片文件

  
  项目图片文件放置于根目录的images文件夹下，组件独有的图片放在当前组件images目录下
  大图进行压缩，能用网络链接的尽量用网络链接

• 模型文件

  
  模型文件主要用于编写各类业务模型。项目模型文件放置于根目录的 models 文件夹下，组件相关模型放置于components目录下的models文件夹中

• 组件文件

  
  所有组件相关文件统一放在components目录下

• 行为文件

  
  行为文件放在所引用的组件目录下

• 计算文件

  • 公用类计算文件放入公共 wxs 内容中
  • 私有计算文件放入当前使用文件目录下
  • 频繁用户交互的效果在小程序上表现是比较卡顿的,用wxs 函数来响应

WXML 规范

• 标签尽量少
  wxml 标签可以单独出现的情况，尽量单独出现，如 input

• 减少没行代码量

  控制每行 HTML 的代码数量在 50 个字符以内，方便阅读浏览，多余的代码进行换行处理，标签所带属性每个属性间进行换行。

• 循环语句添加 key

  
    {{item.id}}
  
  

• 循环语句 和 判断语句分开

  
    {{item.id}}
  
  

• 合理展现分离内容，不要使用内联样式。

  // 推荐使用
  
  
  // 不推荐    
      
  

• 注释规范

  除组件外的其他块级元素，均需注释出其功能，并在其上下空出一行与其他代码进行区分。

  ...view>
  
  // 导航栏    
  ...view>
  ...view>
  

• 基本组件使用优先级

  能用基本组件 view 、text、 button、 input等 减少使用 scroll-view、movable-view 等，减少嵌套

CSS 规范

• rpx和px都能使用到，rpx是基于iPhone 6的逻辑像素点，在使用过程中针对屏幕做了适配，除了

  边框线

  以外，其他都是用rpx

• class名称单词使用中划线方式，不使用驼峰命名

  .aa-bb-cc{
    margin: 0 auto;
  }
  

• 尽量使用简写属性，并且同一属性放置在一起，避免散乱

  /** 使用简写属性 **/
  
  .v-image{
    margin: 0 auto;
  }
  
  /** 同一属性放在一块 **/
  
  .v-tag{
    margin-left: 10rpx;
    margin-right: 10rpx
  }
  

• 同一个模块的css文件放在一起，关键样式需要注释，样式之间使用空行分割

  /* 页面容器 */
  .page-container {
     background: #f4f4f4;
  }
  
  /* 资金容器 */
  .asset-container {
   margin: 20rpx;
  }
  
  

• 采用 flex 进行布局，禁止使用 float 以及 vertical-align

  .container{
    disaplay: flex;
    flex-dirextion: row
  }
  

• 避免使用全局命名 打包文件后会覆盖

• 成组的 wxss 规则之间用块状注释。请勿在代码后面直接注释

  /** 修改 button 默认的点击态样式类 **/
  .button-hover {
    background-color: red;
  }
  

JS规范

命名规范

• 采用 ES6 关键字 let 定义变量，尽量不使用 var

      // 定义常量
  
      const a = 1
      
      // 定义变量
      
      let imageContent =  res.data
      
      // 函数命名
      
      getInfo:function(){
        return '';
      }
      
      // 私有函数
      
      _getInfo:function(){
        return '';
      }
  

• 类的命名

  采用驼峰命名法,使用字母开头

  BannerCom.js
  Login.js
  

• 方法命名规范

  • 私有方法使用下划线开头

    // 营销管理
      _getPromoteAmount: function() {
      
      },
    
    

  • 点击事件使用on开头

    // 联系客服
      onContactServiceTap: function() {
    
      },
    

• 函数名前缀需加上清晰的动词表示函数功能

• 回调函数统一使用 Promise 函数的方式进行编写，回调成功的参数统一为 res，错误参数为 err

      // promise 处理回调
  
      let back = new Promise((resolve, reject) => {
        if (/* 异步操作成功 */){
          resolve(value);
        } else {
          reject(error);
        }
      
      });
      
      back.then((res) => {
          console.log('成功回调！', res);
      }).catch((err) => {
          console.log('失败回调！', error);
      });
  

• 数据绑定变量定义规范

  所有涉及到数据绑定的变量均需在 data 中初始化。禁止在不定义的情况下直接 setData

      Pages({
        data:{
           id : null
        },
      
        onLoad:function(event){
          let id = event.target.dataset.id
          tShopfas.data.id = id
        }
      })
  

组件规范

组件名称为多个单词 （必要）

• 组件名命名规范

  应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、或 v-。

  
  若组件名称为多个单词名拼接而成，采用 ’ - ’ 连接。组件标签在 page 页面使用时推荐使用单闭合标签（此条约束对于包含有 >slot 的组件无效）。

    v 来源于法语 单词 ‘vent’
  

  和父组件紧密耦合的子组件应该以父组件名作为前缀命名

  组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。

• 触发事件规范

  组件点击触发事件建议用冒号分隔开

• externalClasses 命名规范

  命名格式采用如下形式：v-class-{name}，name 可自行定义

    v-class-icon
  

• 组件样式规范

  团队所产出的所有组件样式均应采用类的写法，且命名必须以 v- 开头，不允许使用内联样式以及 id 样式

  .v-container{
    disaplay: flex;
    flex-dirextion: row
  }
  
  

• 标点规范

  • WXML、CSS、JSON 中均应使用双引号
  • CSS 属性中冒号中后面用一个空格分隔开
  • JS 语句无需以分号结束，统一省略分号
  • JS 中一致使用反引号 `` 或单引号’ ’ , 不使用双引号

说明

小程序开发规范v1.0
联合作者：@风了个1
参考