小程序开发规范
一、目录概述
- 基础规范
页面、样式、行为、规范，不用首屏加载的尽量分包
- 图片文件
项目图片文件放置于根目录的images文件夹下，组件独有的图片放在当前组件images目录下
大图进行压缩，能用网络链接的尽量用网络链接
- 模型文件
模型文件主要用于编写各类业务模型。项目模型文件放置于根目录的 models 文件夹下，组件相关模型放置于components目录下的models文件夹中。
- 组件文件
所有组件相关文件统一放在components目录下。
- 行为文件
行为文件放在所引用的组件目录下。
- 计算文件
公用类计算文件放入公共 wxs 内容中
私有计算文件放入当前使用文件目录下
频繁用户交互的效果在小程序上表现是比较卡顿的,用wxs 函数来响应
二、WXML 规范
- 标签尽量少
wxml 标签可以单独出现的情况，尽量单独出现，如 input
<input/>
- 减少每行代码量
控制每行 HTML 的代码数量在 50 个字符以内，方便阅读浏览，多余的代码进行换行处理，标签所带属性每个属性间进行换行。
<v-music
wx:if="{{classic.type===200}}"
img="{{classic.img}}"
content="{{classic.content}}"
>
<v-music>
- 循环语句添加 key
<switch wx:for="{{objectArray}}" wx:key="unique" >
{{item.id}}
</switch>
- 循环语句 和 判断语句分开
<switch wx:for="{{objectArray}}" wx:key="unique" wx:if="{{item.id > 5}}">
{{item.id}}
</switch>
- 合理展现分离内容，不要使用内联样式。
// 推荐使用
<image class="tag"></image>
// 不推荐
<image style="width:100rpx;height:100rpx"></image>
- 尽量多的使用有必要的注释
除组件外的其他块级元素，均需注释出其功能，并在其上下空出一行与其他代码进行区分。
<view>...view>
// 导航栏
<view>...view>
<view>...view>
- 基本组件使用优先级
能用基本组件
view、text、button、input等 减少使用scroll-view、movable-view等
三、CSS 规范
-
rpx和px都能使用到，rpx是基于iPhone 6的逻辑像素点，在使用过程中针对屏幕做了适配，除了边框线以外，其他都是用rpx -
尽量使用简写属性，并且同一属性放置在一起，避免散乱。
/** 使用简写属性 **/
.v-image{
margin: 0 auto;
}
/** 同一属性放在一块 **/
.v-tag{
margin-left: 10rpx;
margin-right: 10rpx
}
- 采用 flex 进行布局，禁止使用 float 以及 vertical-align。**
.container{
disaplay: flex;
flex-dirextion: row
}
避免使用全局命名 打包文件后会覆盖
- 同一个模块的css文件放在一起，关键样式需要注视，样式之间使用空行分割
/* 页面容器 */
.page-container {
background: #f4f4f4;
}
/* 资金容器 */
.asset-container {
margin: 20rpx;
}
- 成组的 wxss 规则之间用块状注释。请勿在代码后面直接注释。
/** 修改 button 默认的点击态样式类 **/
.button-hover {
background-color: red;
}
四、JS规范
命名规范
-
变量命名
变量名以及函数名统一采用驼峰命名法
myIncomeDetail
-
类的命名
使用字母开头，多个单词使用中划线链接
my-cart-detail
my-cart-list
- 方法命名规范
私有方法使用下划线开头
// 营销管理
_getPromoteAmount: function() {
},
点击事件使用on开头
// 联系客服
onContactServiceTap: function() {
},
函数名前缀需加上清晰的动词表示函数功能
- 采用 ES6 关键字 let 定义变量，尽量不使用 var
// 定义常量
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);
});
- 数据绑定变量定义规范
所有涉及到数据绑定的变量均需在 data 中初始化。禁止在不定义的情况下直接 setData。
Pages({
data:{
id : null
},
onLoad:function(event){
let id = event.target.dataset.id
this.data.id = id
}
})
五、组件规范
组件名称为多个单词 （必要）
- 组件名命名规范
应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、或 v-。
若组件名称为多个单词名拼接而成，采用 ’ - ’ 连接。组件标签在 page 页面使用时推荐使用单闭合标签（此条约束对于包含有 >slot 的组件无效）
v 来源于法语 单词 ‘vent’
和父组件紧密耦合的子组件应该以父组件名作为前缀命名
组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾
- 触发事件规范
组件点击触发事件建议用冒号分隔开
<v-component-tag-name bind:myevent="onMyEvent" />
- externalClasses 命名规范
命名格式采用如下形式：v-class-{name}，name 可自行定义
v-class-icon
- 组件样式规范
团队所产出的所有组件样式均应采用类的写法，且命名必须以 v- 开头，不允许使用内联样式以及 id 样式
.v-container{
disaplay: flex;
flex-dirextion: row
}
- 标点规范
WXML、CSS、JSON 中均应使用双引号。
CSS 属性中冒号中后面用一个空格分隔开。
JS 语句无需以分号结束，统一省略分号
JS 中一致使用反引号 `` 或单引号’ ’ , 不使用双引号。
