你对小程序开发规范了解多少？

小程序开发规范:

(学习视频分享:编程视频)

1.内容概述

组件文件

所有与组件相关的文件都放在组件目录中。

图片文件

项目文件放在根目录的images文件夹中，组件特有的图像放在当前组件的images目录中。

模型文件

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

行为文件

该行为被放置在引用的组件目录中。

WXML规范

1.WXML规范

wxml标签可以单独出现的地方，尽量单独出现，比如。

ltinput/>；将每行HTML代码的数量控制在50个字符以内，方便阅读和浏览。包装冗余代码，包装标签的每个属性。

ltv-musicwx:if = ；{ { classic.type = = = 200 } } img = { { classic.img } } content = { { classic.content } } gt lt/v-音乐 gt显示合理的分隔内容，不要使用内嵌样式。

//建议使用< image class = 标签 gt lt/image gt；2.注释规范

除组件之外的所有其他块级元素都应该用它们的功能进行注释，并且应该在它们的上下留一条线，以便与其他代码区分开来。

lt视图 gt... lt/view gt；//导航栏< view gt... lt/view gt； lt视图 gt... lt/view gt；CSS规范

1.CSS规范

在开发过程中，rpx和px都可以使用。比如rpx通常用于间距，px用于字体大小和边框等。，开发商根据实际情况决定。

宽度:100rpxfont -size:14px；CSS代码要有明显的代码缩进。在每个样式类之间留一条线。

. v-标签{宽度:100%；} . v-容器{宽度:100%；}尽量使用缩写属性，相同的属性放在一起，避免分散。

/* *使用速记属性* */. v-image { margin:0 auto；}/* *把相同的属性放在一起* */. v-tag { margin -left:10 rpx；Margin-right: 10rpx}采用flex布局，禁止浮动和vertical-align。

。容器{ display:flex；-Dirextion: row} 2。注释规范

wxss规则组用块进行注释。不要在代码后直接注释。

/* *修改button * */. button -hover { background -color:red的默认点击样式类；}JS规范

1.JS规范

命名规范

变量名和函数名由hump命名。一般情况下，函数名的前缀要加一个明确的动词来表示函数function，私有函数或属性要在下划线的开头表示。常量需要用const声明。

类名的第一个字母应该大写。

使用ES6关键字let定义变量，尽量不要使用var。

//定义常量const a = 1//定义变量let image content = res.data//函数名getInfo:function(){ return # 39；'；}//private function _ getInfo:function(){ return # 39；'；}回调函数规范

回调函数以Promise函数的方式编写。成功回调参数为res，错误参数为err。

// promise处理回调let back = newpromise ((resolve，reject)= >；{if (/*异步操作成功*/){ resolve(value)；} else {reject(错误)；}});back . then((RES)= gt；{ console . log( # 39；回调成功！'，RES)；}).catch((err)= gt；{ console . log( # 39；回调失败！'，错误)；});私有函数和回调函数放在生命周期函数之后。

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

Pages ({data: {}，onload: function (event) {}，_ self: function () {}})每个函数之间用一个空行隔开。

数据绑定变量定义规范

数据绑定涉及的所有变量都需要在数据中初始化。禁止直接设置没有定义的数据。

Pages ({data: {id: null}，onload:function(event){ let id = event . target . dataset . id this . data . id = id } })单击事件规范。

单击要命名为on+事件名称或业务名称的事件功能。

OnLike:函数(事件){}组件规范

组件命名规范

使用组件时，以“v-”开头命名组件名称。如果组件名称是几个单词名称的组合，请使用 # 39；- '连接。当在页面页中使用组件时，建议使用单闭标签(此约束对于包含slot的组件无效)。

ltv-电影/ gt；触发事件规范

建议用冒号分隔组件点击触发事件。

自动检测

ltv-component -tag -name bind:my event = ；onMyEvent / gt；外部类的命名规范

命名格式如下:v-class-{name}，名称可自行定义。

v-class -图标组件样式规范

团队制作的所有组件样式都要在类中编写，名称必须以v-开头。不允许内联样式和id样式。

. v-容器{ display:flex；Flex-dirextion: row}}标点规范

JS语句不需要以分号结尾，分号统一省略。

在JS # 39中一致地使用反引号或单引号；'，不带双引号。

在WX、CSS和JSON中应该使用双引号。

CSS中的冒号由空格分隔。

一致的缩进(4个空格)

执行一致的换行样式( # 39；unix # 39)、

推荐:小程序开发教程以上是你对小程序开发规范了解多少的细节。请多关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 小程序开发规范(小程序实用开发教程)你了解多少

本文由主机参考刊发，转载请注明：你对小程序开发规范了解多少？ https://zhujicankao.com/81230.html