小程序的開發規范

小編給大家分享一下小程序的開發規范，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

小程序開發規范：

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

以上是“小程序的開發規范”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！