博思推广

# 微信小程序开发规范文档

# 目录规范

├── components        # 组件
│
├── config            # 配置文件
│
├── images            # 图片│
│
├── miniprogram_npm   # npm生成库
│
├── models            # Model库
│
├── node_modules      # npm库
│
├── pages             # page页面
│
├── utils             # util实用工具
│
├── wxs               # wxs库
│
├── wxss              # 全局css
│
└── app.js            # 主入口

# 文件命名规范

  1. 目录、文件 全部小写
  2. 单词通过'-'联接
  3. 文件名统一用单数形式

# 组件文件

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

# 图片文件

项目图片文件放置于根目录的 images 文件夹下，组件独有的图片放在当前组件 images 目录下

# 模型文件

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

# 行为文件

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

# WXML 规范

# WXML 规范

wxml 标签可以单独出现的情况，尽量单独出现，如 <input />。

<input />

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

<v-music wx:if="{{classic.type===200}}" img="{{classic.img}}" content="{{classic.content}}"> </v-music>

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

//推荐使用 <image class="tag"></image>

# 注释规范

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

<view>...</view>

//导航栏

<view>...</view>

<view>...</view>

# CSS 规范

# CSS 规范

在开发过程中 rpx 和 px 均可能用到，如通常情况下间距使用 rpx，字体大小和边框等使用 px，开发者根据实际情况而定。

width: 100rpx;
font-size: 14px;

CSS 代码需有明显的代码缩进。每一个样式类之间空出一行。

.v-tag {
  width: 100%;
}

.v-container {
  width: 100%;
}

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

/**使用简写属性**/
.v-image {
  margin: 0 auto;
}

/**同一属性放在一块**/
.v-tag {
  margin-left: 10rpx;
  margin-right: 10rpx;
}

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

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

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

/** 修改button默认的点击态样式类**/

.button-hover {
  background-color: red;
}

# JS 规范

# 命名规范

  1. 变量名以及函数名统一采用驼峰命名法，正常情况下函数名前缀需加上清晰的动词表示函数功能，私有函数或者属性以下划线开头表明。
  2. 常量需用 const 声明。
  3. 类的命名首字母需大写。
  4. 采用 ES6 关键字 let 定义变量，尽量不使用 var
  5. 缩写统一全部大写, 例如: SPU, SKU, ID
//定义常量
const a = 1

//定义变量
let imageContent =  res.data

//函数命名
getInfo:function(){
  return '';
}

//私有函数
_getInfo:function(){
  return '';
}

# 回调函数规范

回调函数统一使用 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);
});

私有函数以及回调函数统一放置在生命周期函数后。

删除 js 文件中未用到的生命周期函数，保持代码的整洁。

Pages({
  data: {},

  onLoad: function(event) {},

  _self: function() {}
})

每个函数之间用一个空行分离结构。 数据绑定变量定义规范 所有涉及到数据绑定的变量均需在 data 中初始化。禁止在不定义的情况下直接 setData。

Pages({
  data: {
    id: null
  },

  onLoad: function(event) {
    let id = event.target.dataset.id
    this.data.id = id
  }
})

# 点击事件规范

点击事件函数命名方式为 on + 事件名 或者业务名。

onLike: function(event){

}

# 组件规范

# 组件名命名规范

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

v 来源于法语 单词 ‘vent’ @林间有风

<v-movies />

# 触发事件规范

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

<v-component-tag-name bind:myevent="onMyEvent" />

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

<v-class-icon />

# 组件样式规范

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

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

# 标点规范

  1. JS 语句无需以分号结束，统一省略分号
  2. JS 中一致使用反引号 ` 或单引号 ' , 不使用双引号。
  3. WXML、CSS、JSON 中均应使用双引号。
  4. CSS 属性中冒号中后面用一个空格分隔开。
  5. 执行一致的缩进（2 个空格）
  6. 执行一致的换行样式（'unix'）

# 贫血模式/充血模式

  1. 多使用 充血模式(对象包括 属性+方法)

#

©2012-2020 bosstg.cn 备案号：滇 ICP 备 15002956 号-1

← REST API 服务接口开发规范 →