小程序开发规范

目录

一、目录规范

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规范

命名规范

函数

标点规范

六、请求规范


一、目录规范

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.gif

css:

每个英文之间使用中划线分割

组件:

组件名称:根据引入的组件库的名称前缀命名命名,例如: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 中封装统一的请求接口,所有请求都调用该接口来发送请求获取业务数据

  • 7
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值