小程序开发规范你了解多少（小程序开发必备知识）

小程序开发规范你了解多少（小程序开发必备知识）

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

小程序开发规范：

（学习视频分享：编程视频）

1、目录概述

组件文件

所有组件相关文件统一放在components目录下。

图片文件

项目图片文件放置于根目录的images文件夹下，组件独有的图片放在当前组件images目录下

模型文件

模型文件主要用于编写各类业务模型。项目模型文件放置于根目录的models文件夹下，组件相关模型放置于components目录下的models文件夹中。

行为文件

行为文件放在所引用的组件目录下。

WXML规范

1、WXML规范

wxml标签可以单独出现的情况，尽量单独出现，如。

-

控制每行HTML的代码数量在50个字符以内，方便阅读浏览，多余的代码进行换行处理，标签所带属性每个属性间进行换行。

-

合理展现分离内容，不要使用内联样式。

//推荐使用-

2、注释规范

除组件外的其他块级元素，均需注释出其功能，并在其上下空出一行与其他代码进行区分。

...//导航栏......-

CSS规范

1、CSS规范

在开发过程中rpx和px均可能用到，如通常情况下间距使用rpx，字体大小和边框等使用px，开发者根据实际情况而定。

width: 100rpx;font-size: 14px;-

CSS代码需有明显的代码缩进。每一个样式类之间空出一行。

.v-tag{width: 100%;}.v-container{width: 100%;}-

尽量使用简写属性，并且同一属性放置在一起，避免散乱。

/**使用简写属性**/.v-image{margin: 0 auto;}/**同一属性放在一块**/.v-tag{margin-left: 10rpx;margin-right: 10rpx}-

采用flex进行布局，禁止使用float以及vertical-align。

.container{disaplay: flex;flex-dirextion: row}-

2、注释规范

成组的wxss规则之间用块状注释。请勿在代码后面直接注释。

js规范

1、JS规范

命名规范

类的命名首字母需大写。

采用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);});-

私有函数以及回调函数统一放置在生命周期函数后。

删除js文件中未用到的生命周期函数，保持代码的整洁。

Pages({data:{},onLoad:function(event){},_self:function(){}})-

每个函数之间用一个空行分离结构。

数据绑定变量定义规范

所有涉及到数据绑定的变量均需在data中初始化。禁止在不定义的情况下直接setData。

Pages({data:{id : null},onLoad:function(event){let id = event.target.dataset.idthis.data.id = id}})-

onLike: function(event){}-

组件规范

组件名命名规范

组件在使用时命名以 “v-”为开头的组件名，若组件名称为多个单词名拼接而成，采用 ' - ' 连接。组件标签在page页面使用时推荐使用单闭合标签（此条约束对于包含有slot的组件无效）

-

触发事件规范

自动检测

-

externalClasses命名规范

命名格式采用如下形式：v-class-{name}，name可自行定义

v-class-icon-

组件样式规范

团队所产出的所有组件样式均应采用类的写法，且命名必须以 v- 开头，不允许使用内联样式以及id样式

.v-container{disaplay: flex;flex-dirextion: row}-

标点规范

JS语句无需以分号结束，统一省略分号

JS中一致使用反引号 ``或单引号' ' , 不使用双引号。

WXML、CSS、JSON中均应使用双引号。

CSS属性中冒号中后面用一个空格分隔开。

执行一致的缩进（4个空格）

执行一致的换行样式（'unix'）、

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。