目录
一、目录规范
1、组件
2、图片
3、模型文件
4、业务文件
5、npm模块包放在node_modules目录下
6、引入的样式库统一放到根目的style目录下
7、所有工具类统一放到根目的utils目录下
二、命名规范
文件名：
常量：
变量：
图片：
css：
组件：
常见的命名参考规范
三、WXML规范
1、组件
2、布局
3、WXML规范
4、注释规范
5、格式化
四、CSS规范
1、小程序中推荐使用rpx，可以自适应屏幕。
2、尽量使用简写属性，并且同一属性放置在一起，避免散乱。
3、采用flex进行布局
4、注释规范
五、JS规范
命名规范
函数
标点规范
六、请求规范
所有组件相关文件统一放在components目录下,不同的框架 使用不同的文件名划分组件归属
项目图片文件放置于根目录的images文件夹下，组件独有的图片放在当前组件images目录下,业务图片放在业务文件的images文件夹下面
全局的数据模型文件，例如：角色，枚举等放到Utils文件夹下
具体的业务文件需要放到pages目录下，且业务文件需要放到相应文件包下面，并以业务命名（方便查找）
所有命名必须使用英文命名
使用中划线分隔，且文件夹的名称和文件名称尽量保持相同
使用大写命名，并以下划线分割
使用驼峰命名
每个英文之间使用下划线分割：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.gif每个英文之间使用中划线分割
组件名称：根据引入的组件库的名称前缀命名命名，例如：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 { } //导航栏: 产品优先使用原生组件
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
推荐使用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.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>除组件外的其他块级元素，均需注释出其功能，并在其上下空出一行与其他代码进行区分。
<!-- 导航栏 --> <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>使用微信开发工具的默认格式 格式化代码
成组的wxss规则之间用块状注释。请勿在代码后面直接注释。
/**修改button默认的点击态样式类**/ .button-hover { background-color: red; }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' }) } })在utils 中封装统一的请求接口，所有请求都调用该接口来发送请求获取业务数据
