目录
一、目录规范
1、组件
所有组件相关文件统一放在components目录下,不同的框架 使用不同的文件名划分组件归属
2、图片
项目图片文件放置于根目录的images文件夹下，组件独有的图片放在当前组件images目录下,业务图片放在业务文件的images文件夹下面
3、模型文件
全局的数据模型文件，例如：角色，枚举等放到Utils文件夹下
4、业务文件
具体的业务文件需要放到pages目录下，且业务文件需要放到相应文件包下面，并以业务命名（方便查找）
5、npm模块包放在node_modules目录下
6、引入的样式库统一放到根目的style目录下
7、所有工具类统一放到根目的utils目录下
二、命名规范
所有命名必须使用英文命名
文件名：
使用中划线分隔，且文件夹的名称和文件名称尽量保持相同
常量：
使用大写命名，并以下划线分割
变量：
使用驼峰命名
图片：
每个英文之间使用下划线分割：footer_logo
图片的名称分为头尾两部分，用下划线隔开，头部表示此图片的大类性质，例如广告，标志，菜单，按钮等
banner：放置在页面顶部的广告，装饰图案等长方形的图片
logo：标志性的图片
button：在页面上位置不固定，并且带有链接的小图片
menu：在页面中某一位置连续出现，性质相同的链接栏目的图片
pic：装饰用的图片
title：不带链接表示标题的图片
例子：
banner_sohu.gif, banner_sina.gif
menu_aboutus.gif,menu_job.gif
title_news.gif
logo_police.gif
pic_people.gifcss：
每个英文之间使用中划线分割
组件：
组件名称：根据引入的组件库的名称前缀命名命名，例如：i-view 使用 i- 开头
自定义的组件使用：my- 开头
引用：
"usingComponents": {
"i-row": "/components/row/index",
"i-container": "/components/container/index",
"i-image": "/components/image/image",
"i-icon": "/components/icon/index",
"i-button": "/components/button/index",
"i-switch": "/components/switch/index",
"i-folding-panel": "/components/folding-panel/index"
},
使用：
<i-container i-class="margin-top margin-bottom margin-right" shadow height="236rpx" width="326rpx"></i-container>常见的命名参考规范
在开发的时候,经常会因为元素命名而头疼，下面整理一些命名参考词：
头部：header
内容：content/container
尾部：footer
导航：nav
侧栏：sidebar
栏目：column
整体布局：wrapper
左右中：left / right / center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：join
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
id的命名规范，页面结构类
容器：container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
导航类
导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题：title
摘要：summary
功能类
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
class/css的命名
颜色：使用颜色的名称或者16进制代码，如：
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
字体大小，直接使用“font+字体大小”作为名称，如：
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
对齐样式，使用对齐目标的英文名称，如：
.left { float:left; }
.bottom { float:bottom; }
标题栏样式，使用“类别+功能”的方式命名，如：
.nav_news { } //导航栏: 新闻
.nav_product { } //导航栏: 产品三、WXML规范
1、组件
优先使用原生组件
1.1、推荐使用iView组件：https://weapp.iviewui.com/docs/guide/start
1.2、icon优先使用iView里的icon组件,也可使用阿里的图标库iconfont： https://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.11&manage_type=myprojects&projectId=749818
2、布局
推荐使用Flex 布局，Flex 布局 是 W3C 在2009年提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。https://www.runoob.com/w3cnote/flex-grammar.html
在根目录下的app.wxss文件中已经定义了大部分flex常用类：
//行
.flex-row {
flex-direction: row;
display: -webkit-flex;
display: flex;
}
//列
.flex-column {
display: -webkit-flex;
display: flex;
flex-direction: column;
}
//两端对齐
.space-between {
justify-content: space-between;
}
//垂直居中
.vertical-center {
align-items: center;
}
//水平居中
.horizontally-center {
justify-content: center;
}3、WXML规范
3.1、wxml标签可以单独出现的情况，尽量单独出现，如<input />
3.2、控制每行HTML的代码数量在50个字符以内，方便阅读浏览，多余的代码进行换行处理，标签所带属性每个属性间进行换行。
<i-image
i-class="avatar-Url"
src="{{userInfo.avatarUrl}}"
errSrc="../../images/head-portrait.png"
/>3.3、合理展现分离内容，不要使用内联样式。
反例：
<image class="tag" style="width:300rpx"></image> 4、注释规范
除组件外的其他块级元素，均需注释出其功能，并在其上下空出一行与其他代码进行区分。
<!-- 导航栏 -->
<view>…</view>
<!-- 家庭成员列表 -->
<view wx:if="{{checkItem==1&&houseInfo.personType==1}}" class="margin-top ">
</view>
<!-- 开门记录 -->
<view wx:if="{{checkItem==2}}" class="margin-top">
</view>
<!-- 报警记录 -->
<view wx:if="{{checkItem==3}}" class="margin-top ">
</view>5、格式化
使用微信开发工具的默认格式 格式化代码
四、CSS规范
1、小程序中推荐使用rpx，可以自适应屏幕。
2、尽量使用简写属性，并且同一属性放置在一起，避免散乱。
/**使用简写属性**/
.i-image{
margin: 0 auto;
}
/**同一属性放在一块**/
.v-tag{
margin-left: 10rpx;
margin-right: 10rpx
}3、采用flex进行布局
.container{
disaplay: flex;
flex-dirextion: row;
}4、注释规范
成组的wxss规则之间用块状注释。请勿在代码后面直接注释。
/**修改button默认的点击态样式类**/
.button-hover {
background-color: red;
}五、JS规范
命名规范
1、变量名以及函数名统一采用驼峰命名法
正常情况下函数名前缀需加上清晰的动词表示函数功能，私有函数或者属性以下划线开头表明。常量需用const 声明。
2、类的命名首字母需大写。
3、采用ES6 关键字const 定义常量 、let定义变量
//定义常量
const APP_NAME = 1
//定义变量
let imageContent = res.data
//函数命名
getInfo(){
let name = "大大"
return '';
}
函数
1、回调函数规范
回调函数使用Promise函数的方式进行编写，回调成功的参数统一为res，错误参数为err。
/**promise 处理回调*/
let back = new Promise((resolve, reject) => {
if (/* 异步操作成功 */){
//成功
resolve(value);
} else {
//失败
reject(error);
}
});
/**回调函数使用*/
testDemo:function(){
back.then((res) => {
console.log('成功回调！', res);
}).catch((err) => {
console.log('失败回调！', error);
});
}2、私有函数以及回调函数统一放置在生命周期函数后。
删除js文件中未用到的生命周期函数，保持代码的整洁。
Pages({
data:{
},
onLoad:function(event){
},
onShow:function(){
},
/**
* 测试函数
* name 姓名
* age 年龄
*/
test:function(name,age){
}
})3、每个函数之间用一个空行分离结构。
4、每个函数都要都要写文档注释
/**
* 测试函数
* name 姓名
* age 年龄
*/
test:function(name,age){
}5、点击事件规范
点击事件函数命名方式为 on + 事件名 或者业务名。
onLike: function(event){
}6、数据绑定变量定义规范
所有涉及到数据绑定的变量均需在data中初始化。禁止在不定义的情况下直接setData。
Pages({
data:{
},
test:function(event){
// 反例，name 在data中未定义
this.setData({
name:'lookdoor'
})
}
})标点规范
JS语句无需以分号结束，统一省略分号
JS中一致使用反引号 ``或单引号' ' , 不使用双引号。
WXML、CSS、JSON中均应使用双引号。
CSS属性中冒号中后面用一个空格分隔开。
执行一致的缩进（4个空格）六、请求规范
在utils 中封装统一的请求接口，所有请求都调用该接口来发送请求获取业务数据
扫一扫
1390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
