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

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

小程序开发规范:

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

1、目录概述

组件文件

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

图片文件

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

模型文件

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

行为文件

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

WXML规范

1、WXML规范

wxml标签可以单独出现的情况,尽量单独出现,如<input />。

<input />

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

<v-music
wx:if="{{classic.type===200}}"
img="{{classic.img}}"
content="{{classic.content}}"
>
</v-music>

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

//推荐使用
<image class="tag"></image>

2、注释规范

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

<view>...</view>
//导航栏
<view>...</view>
<view>...</view>

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 声明。

类的命名首字母需大写。

采用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的组件无效)

<v-movies />

触发事件规范

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

自动检测

<v-component-tag-name bind:myevent="onMyEvent" />

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

相关

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服![email protected] 2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励! 3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负! 4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!

立业阁 微信小程序教程 小程序开发规范你了解多少 https://www.liyege.cn/xcxkfgfnljds.html

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整, 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘
查看详情

相关文章