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

小程序开发规范:

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

1.目录概述

组件文件

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

图片文件

项目图片文件放在根目录的images文件夹中，组件的唯一图片放在当前组件的images目录中。

模型文件

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

行为文件

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

WXML规范

1、WXML规范

Wxml标记可以尽可能单独出现，例如。

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

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

//建议使用

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

& lt视图& gt...& lt/view & gt；//导航栏

1.CSS规范

rpx和px都可用于开发过程。例如，rpx通常用于间距，px用于字体大小和边框，具体取决于实际情况。

宽度:100rpxfont -大小:14pxCSS代码应该有明显的代码缩进。在每个样式类之间留一条线。

。v-标签{宽度:100%；}。v-容器{ width:100%；}尽量使用简写属性，并将相同的属性放在一起以避免混乱。

/* *使用简写属性* */。v-image { margin:0 auto；}/* *将相同的属性放在块中* */。v-tag { margin -left:10 rpx；Margin-right: 10rpx}采用flex布局，禁止使用float和vertical-align。

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

分组wxss规则之间使用块注释。请不要在代码后直接注释。

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

1.JS规范

命名规范

变量名和函数名由hump命名。在正常情况下，函数名需要以明确的动词作为前缀来指示函数功能，私有函数或属性由下划线来指示。常量需要用const声明。

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

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

//定义常量const a = 1//定义变量let image content = res.data//函数名为getinfo:function（）{ return &；#39;& amp#39;；}//private function _ getinfo:function（）{ return &；#39;& amp#39;；}回调函数规范

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

// promise处理回调let back = new promise（（resolve，reject）=》{ if（/*异步操作成功*/）{ resolve（value）；} else { reject（error）；}});back . then（（RES）= & gt；{ console . log（& amp；#39;回调成功！& amp#39;，RES）；}).catch（（err）= & gt；{ console . log（& amp；#39;回调失败！& amp#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-”开头的组件名称进行命名。如果组件名称由多个单词名称拼接而成，则由“-”连接。在页面页面上使用组件标签时，建议使用单个关闭标签（此约束对于包含slot的组件无效）。

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

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

自动检测

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

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

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

团队产生的所有组件样式都应该编写为类，并且命名必须以v-开头。不允许内联样式和id样式。

。v-容器{ display:flex；Flex -direxion: row}标点符号规范

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

在JS中，反引号``或单引号‘‘的使用是一致的，而不使用双引号。

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

CSS属性中的冒号由空格分隔。

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

执行一致的换行符样式（“unix”），

相关推荐:小程序开发教程

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

• 小程序开发的具体流程是什么（小程序开发入门教程）
• 小程序调用百度云接口实现人脸识别（人脸识别小程序百度云下载）
• 微信小程序开发需要掌握哪些技术（微信小程序开发需要哪些技能）？
• 如何将外部css引入小程序(如何将外部js引入微信小程序)
• 小程序开发的难点是什么（开发小程序难吗）

本文由主机参考刊发，转载请注明：小程序开发规范(小程序实用开发教程)你了解多少 https://zhujicankao.com/118788.html