一锰霜、目錄概述
- 基礎(chǔ)規(guī)范
頁面、樣式甜橱、行為逊笆、規(guī)范，不用首屏加載的盡量分包
- 圖片文件
項(xiàng)目圖片文件放置于根目錄的images文件夾下岂傲，組件獨(dú)有的圖片放在當(dāng)前組件images目錄下
大圖進(jìn)行壓縮难裆，能用網(wǎng)絡(luò)鏈接的盡量用網(wǎng)絡(luò)鏈接
- 模型文件
模型文件主要用于編寫各類業(yè)務(wù)模型。項(xiàng)目模型文件放置于根目錄的 models 文件夾下譬胎，組件相關(guān)模型放置于components目錄下的models文件夾中差牛。
- 組件文件
所有組件相關(guān)文件統(tǒng)一放在components目錄下。
- 行為文件
行為文件放在所引用的組件目錄下堰乔。
- 計(jì)算文件
公用類計(jì)算文件放入公共 wxs 內(nèi)容中
私有計(jì)算文件放入當(dāng)前使用文件目錄下
頻繁用戶交互的效果在小程序上表現(xiàn)是比較卡頓的,用wxs 函數(shù)來響應(yīng)
二、WXML 規(guī)范
- 標(biāo)簽盡量少
wxml 標(biāo)簽可以單獨(dú)出現(xiàn)的情況脐恩，盡量單獨(dú)出現(xiàn)镐侯，如 input
<input/>
- 減少每行代碼量
控制每行 HTML 的代碼數(shù)量在 50 個(gè)字符以內(nèi)，方便閱讀瀏覽驶冒，多余的代碼進(jìn)行換行處理苟翻，標(biāo)簽所帶屬性每個(gè)屬性間進(jìn)行換行。
<v-music
wx:if="{{classic.type===200}}"
img="{{classic.img}}"
content="{{classic.content}}"
>
<v-music>
- 循環(huán)語句添加 key
<switch wx:for="{{objectArray}}" wx:key="unique" >
{{item.id}}
</switch>
- 循環(huán)語句 和 判斷語句分開
<switch wx:for="{{objectArray}}" wx:key="unique" wx:if="{{item.id > 5}}">
{{item.id}}
</switch>
- 合理展現(xiàn)分離內(nèi)容骗污，不要使用內(nèi)聯(lián)樣式崇猫。
// 推薦使用
<image class="tag"></image>
// 不推薦
<image style="width:100rpx;height:100rpx"></image>
- 盡量多的使用有必要的注釋
除組件外的其他塊級(jí)元素，均需注釋出其功能需忿，并在其上下空出一行與其他代碼進(jìn)行區(qū)分诅炉。
<view>...view>
// 導(dǎo)航欄
<view>...view>
<view>...view>
- 基本組件使用優(yōu)先級(jí)
能用基本組件
view、text屋厘、button涕烧、input等 減少使用scroll-view、movable-view等
三汗洒、CSS 規(guī)范
rpx和px都能使用到议纯，rpx是基于iPhone 6的邏輯像素點(diǎn)，在使用過程中針對(duì)屏幕做了適配溢谤，除了邊框線以外瞻凤，其他都是用rpx盡量使用簡(jiǎn)寫屬性憨攒，并且同一屬性放置在一起，避免散亂阀参。
/** 使用簡(jiǎn)寫屬性 **/
.v-image{
margin: 0 auto;
}
/** 同一屬性放在一塊 **/
.v-tag{
margin-left: 10rpx;
margin-right: 10rpx
}
- 采用 flex 進(jìn)行布局浓恶，禁止使用 float 以及 vertical-align。**
.container{
disaplay: flex;
flex-dirextion: row
}
避免使用全局命名 打包文件后會(huì)覆蓋
- 同一個(gè)模塊的css文件放在一起结笨，關(guān)鍵樣式需要注視包晰，樣式之間使用空行分割
/* 頁面容器 */
.page-container {
background: #f4f4f4;
}
/* 資金容器 */
.asset-container {
margin: 20rpx;
}
- 成組的 wxss 規(guī)則之間用塊狀注釋。請(qǐng)勿在代碼后面直接注釋炕吸。
/** 修改 button 默認(rèn)的點(diǎn)擊態(tài)樣式類 **/
.button-hover {
background-color: red;
}
四伐憾、JS規(guī)范
命名規(guī)范
-
變量命名
變量名以及函數(shù)名統(tǒng)一采用駝峰命名法
myIncomeDetail
-
類的命名
使用字母開頭，多個(gè)單詞使用中劃線鏈接
my-cart-detail
my-cart-list
- 方法命名規(guī)范
私有方法使用下劃線開頭
// 營(yíng)銷管理
_getPromoteAmount: function() {
},
點(diǎn)擊事件使用on開頭
// 聯(lián)系客服
onContactServiceTap: function() {
},
函數(shù)名前綴需加上清晰的動(dòng)詞表示函數(shù)功能
- 采用 ES6 關(guān)鍵字 let 定義變量赫模，盡量不使用 var
// 定義常量
const a = 1
// 定義變量
let imageContent = res.data
// 函數(shù)命名
getInfo:function(){
return '';
}
// 私有函數(shù)
_getInfo:function(){
return '';
}
- 回調(diào)函數(shù)統(tǒng)一使用 Promise 函數(shù)的方式進(jìn)行編寫树肃，回調(diào)成功的參數(shù)統(tǒng)一為 res，錯(cuò)誤參數(shù)為 err瀑罗。
// promise 處理回調(diào)
let back = new Promise((resolve, reject) => {
if (/* 異步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
back.then((res) => {
console.log('成功回調(diào)胸嘴！', res);
}).catch((err) => {
console.log('失敗回調(diào)！', error);
});
- 數(shù)據(jù)綁定變量定義規(guī)范
所有涉及到數(shù)據(jù)綁定的變量均需在 data 中初始化斩祭。禁止在不定義的情況下直接 setData劣像。
Pages({
data:{
id : null
},
onLoad:function(event){
let id = event.target.dataset.id
this.data.id = id
}
})
五、組件規(guī)范
組件名稱為多個(gè)單詞 （必要）
- 組件名命名規(guī)范
應(yīng)用特定樣式和約定的基礎(chǔ)組件 (也就是展示類的摧玫、無邏輯的或無狀態(tài)的組件) 應(yīng)該全部以一個(gè)特定的前綴開頭耳奕，比如 Base、或 v-诬像。
若組件名稱為多個(gè)單詞名拼接而成屋群，采用 ’ - ’ 連接。組件標(biāo)簽在 page 頁面使用時(shí)推薦使用單閉合標(biāo)簽（此條約束對(duì)于包含有 >slot 的組件無效）
v 來源于法語 單詞 ‘vent’
和父組件緊密耦合的子組件應(yīng)該以父組件名作為前綴命名
組件名應(yīng)該以高級(jí)別的 (通常是一般化描述的) 單詞開頭坏挠，以描述性的修飾詞結(jié)尾
- 觸發(fā)事件規(guī)范
組件點(diǎn)擊觸發(fā)事件建議用冒號(hào)分隔開
<v-component-tag-name bind:myevent="onMyEvent" />
- externalClasses 命名規(guī)范
命名格式采用如下形式：v-class-{name}芍躏，name 可自行定義
v-class-icon
- 組件樣式規(guī)范
團(tuán)隊(duì)所產(chǎn)出的所有組件樣式均應(yīng)采用類的寫法，且命名必須以 v- 開頭降狠，不允許使用內(nèi)聯(lián)樣式以及 id 樣式
.v-container{
disaplay: flex;
flex-dirextion: row
}
- 標(biāo)點(diǎn)規(guī)范
WXML对竣、CSS、JSON 中均應(yīng)使用雙引號(hào)喊熟。
CSS 屬性中冒號(hào)中后面用一個(gè)空格分隔開柏肪。
JS 語句無需以分號(hào)結(jié)束，統(tǒng)一省略分號(hào)
JS 中一致使用反引號(hào) `` 或單引號(hào)’ ’ , 不使用雙引號(hào)芥牌。
