北京华网天下

组件独有的图片放在当前组件目录下模型文件换行放

2022-08-24

来源：网络整理

目录规范

1.目录概览

组件文件

所有组件相关文件都放在同一个目录下。

图片文件

项目镜像文件放在根目录下，组件唯一的镜像放在当前组件目录下

模型文件

模型文件主要用于编写各种业务模型。项目模型文件放在根目录下的一个文件夹中微信开发文档小程序，组件相关的模型放在该目录下的文件夹中。

行为文件

行为文件放在被引用的组件目录中。

WXML 规范

1.WXML 规范

wxml标签可以单独出现，尽量单独出现，比如。

将HTML每行代码数控制在50个字符以内，方便阅读和浏览。对冗余代码进行换行处理，标签的属性在各个属性之间进行换行。

合理显示单独的内容，不要使用内联样式。

//推荐使用

2.注释规范

除组件外的其他块级元素需要标注其功能，并在其上方和下方省略一行以与其他代码区分开来。

... //导航栏 ... ...

CSS 规范

1.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，禁止使用-.

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

2.注释规范

阻止 wxss 规则组之间的注释。不要直接在代码后面评论。

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

JS 规范

1.JS 规范

命名约定

变量名和函数名统一为驼峰式。一般情况下，函数名的前缀需要加上明确的动词前缀来表示函数，私有函数或属性以下划线开头。常量需要用 .

声明

类名必须大写。

使用ES6关键字let来定义变量，尽量不要使用var

//定义常量 const a = 1 //定义变量 let imageContent = res.data

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

回调函数规范

回调函数的编写方式与函数相同。成功回调参数为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(){ } })

每个函数之间用空行分隔结构。

数据绑定变量定义规范

所有涉及数据绑定的变量都需要在数据中进行初始化。禁止直接无定义。

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

点击事件规范

点击事件函数的命名方式为on+事件名称或商家名称。

onLike: function(event){ }

组件规格

组件名称命名约定