小程式開發規範你了解多少

小程式開發規格：

（學習影片分享：程式設計影片）

1、目錄概述

元件檔案

所有元件相關檔案統一放在components目錄下。

圖片檔案

專案圖片檔案放置在根目錄的images資料夾下，元件獨有的圖片放在目前元件images目錄下

模型檔案

模型檔案主要用於撰寫各類型業務模型。專案模型檔案放置於根目錄的models資料夾下，元件相關模型放置於components目錄下的models資料夾中。

行為檔案

行為檔案放在所引用的元件目錄下。

WXML規範

1、WXML規範

wxml標籤可以單獨出現的情況，盡量單獨出現，如73a3ca28445b1c625f2086a50cb8c7df。

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

#相關推薦：小程式開發教學課程

以上是小程式開發規範你了解多少的詳細內容。更多資訊請關注PHP中文網其他相關文章！