介绍
小编给大家分享一下小程序的开发规范,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
小程序开发规范:
1,目录概述
组件文件
所有组件相关文件统一放在组件目录下。
图片文件
项目图片文件放置于根目录的图像文件夹下,组件独有的图片放在当前组件图片目录下
模型文件
模型文件主要用于编写各类业务模型。项目模型文件放置于根目录的模型文件夹下,组件相关模型放置于组件目录下的模型文件夹中。
行为文件
行为文件放在所引用的组件目录下。
WXML规范
1, WXML规范
WXML标签可以单独出现的情况,尽量单独出现,如& lt;输入/祝辞。
& lt; input /祝辞 控制每行HTML的代码数量在50个字符以内,方便阅读浏览,多余的代码进行换行处理,标签所带属性每个属性间进行换行。
& lt; v-music
天气:如果=皗{classic.type===200}},
img=皗{classic.img}},
内容=皗{classic.content}},
比;
& lt;/v-music> 合理展现分离内容,不要使用内联样式。
//推荐使用
& lt; image 类=皌ag"祝辞& lt;/image> 2,注释规范
除组件外的其他块级元素,均需注释出其功能,并在其上下空出一行与其他代码进行区分。
& lt; view>……& lt;/view>//导航栏
& lt; view>……& lt;/view>
& lt; view>……& lt;/view> CSS规范
1, CSS规范
在开发过程中rpx和px均可能用到,如通常情况下间距使用rpx,字体大小和边框等使用px,开发者根据实际情况而定。
宽度:,100 rpx;
字体大小:14 px; CSS代码需有明显的代码缩进。每一个样式类之间空出一行。
.v-tag {
宽度:100%;
}
.v-container {
宽度:100%;
} 尽量使用简写属性,并且同一属性放置在一起,避免散乱。
/* *使用简写属性* */.v-image {
保证金:0,汽车;
}/* *同一属性放在一块* */.v-tag {
margin-left: 10 rpx;
rpx margin-right: 10
} 采用flex进行布的局,禁止使用浮动以及vertical-align。
.container {
disaplay: flex;
flex-dirextion:行
} 2,注释规范
成组的wxs规则之间用块状注释。请勿在代码后面直接注释。
/* *,修改按钮默认的点击态样式类* */.button-hover {
背景颜色:红色;
} JS规范
1, JS规范
命名规范
变量名以及函数名统一采用驼峰命名法,正常情况下函数名前缀需加上清晰的动词表示函数功能,私有函数或者属性以下划线开头表明。常量需用常量声明。
类的命名首字母需大写。
采用ES6关键字让定义变量,尽量不使用var
//定义常量
const a =1//定义变量
let imageContent =, res.data//函数命名
getInfo:函数(){
return & # 39; & # 39;;
}//私有函数
_getInfo:函数(){
return & # 39; & # 39;;
} 回调函数规范
回调函数统一使用保证函数的方式进行编写,回调成功的参数统一为res,错误参数为犯错。
//,promise 处理回调
let back =, new 承诺((解决,,拒绝),=祝辞,{
if (/*,异步操作成功,*/){
解决(价值);
},{else
拒绝(错误);
}
});
back.then ((res),=祝辞,{
console.log(& # 39;成功回调! & # 39;,,res);
}).catch ((err),=祝辞,{
console.log(& # 39;失败回调! & # 39;,,错误);
}); 私有函数以及回调函数统一放置在生命周期函数后。
删除js文件中未用到的生命周期函数,保持代码的整洁。
页面({
数据:{
},
onLoad:函数(事件){
},
_self:函数(){
}
}) 每个函数之间用一个空行分离结构。
数据绑定变量定义规范
所有涉及到数据绑定的变量均需在数据中初始化。禁止在不定义的情况下直接setData。
页面({
数据:{
id :零
},
onLoad:函数(事件){
let id =event.target.dataset.id
时间=this.data.id id
}
})
