0

0

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

王林

王林

发布时间:2020-12-18 09:33:47

|

2904人浏览过

|

来源于石墨文档

转载

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

小程序开发规范:

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

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规则之间用块状注释。请勿在代码后面直接注释。

/** 修改button默认的点击态样式类**/
.button-hover {
background-color: red;
}

JS规范

1、JS规范

命名规范

变量名以及函数名统一采用驼峰命名法,正常情况下函数名前缀需加上清晰的动词表示函数功能,私有函数或者属性以下划线开头表明。常量需用const 声明。

小邮包 包月订购包年程序
小邮包 包月订购包年程序

小邮包-包月订购包年服务网,该程序由好买卖商城开发,程序采用PHP+MYSQL架设,程序商业模式为目前最为火爆的包月订制包年服务模式,这种包年订购在国外网站已经热火很多年了,并且已经发展到一定规模,像英国的男士用品网站BlackSocks,一年的袜子购买量更是达到了1000万双。功能:1、实现多产品上线,2、不用注册也可以直接下单购买,3、集成目前主流支付接口,4、下单发货均有邮件提醒。

下载

类的命名首字母需大写。

采用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.id
this.data.id = id
}
})

点击事件规范

点击事件函数命名方式为 on + 事件名 或者业务名。

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')、

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

418

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

535

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

311

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

76

2025.09.10

css
css

css是层叠样式表,用来表现HTML或XML等文件样式的计算机语言,不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

524

2023.06.15

css居中
css居中

css居中:1、通过“margin: 0 auto; text-align: center”实现水平居中;2、通过“display:flex”实现水平居中;3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容,供大家免费下载体验。

268

2023.07.27

css如何插入图片
css如何插入图片

cssCSS是层叠样式表(Cascading Style Sheets)的缩写。它是一种用于描述网页或应用程序外观和样式的标记语言。CSS可以控制网页的字体、颜色、布局、大小、背景、边框等方面,使得网页的外观更加美观和易于阅读。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

761

2023.07.28

css超出显示...
css超出显示...

在CSS中,当文本内容超出容器的宽度或高度时,可以使用省略号来表示被隐藏的文本内容。本专题为大家提供css超出显示...的相关文章,相关教程,供大家免费体验。

542

2023.08.01

拼多多赚钱的5种方法 拼多多赚钱的5种方法
拼多多赚钱的5种方法 拼多多赚钱的5种方法

在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变,以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销,利用平台社交电商红利实现盈利。

14

2026.01.26

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Django 教程
Django 教程

共28课时 | 3.5万人学习

Excel 教程
Excel 教程

共162课时 | 13.5万人学习

Kotlin 教程
Kotlin 教程

共23课时 | 2.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号