您好,登錄后才能下訂單哦!
小編給大家分享一下小程序的開發(fā)規(guī)范,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
小程序開發(fā)規(guī)范:
1、目錄概述
組件文件
所有組件相關(guān)文件統(tǒng)一放在components目錄下。
圖片文件
項(xiàng)目圖片文件放置于根目錄的images文件夾下,組件獨(dú)有的圖片放在當(dāng)前組件images目錄下
模型文件
模型文件主要用于編寫各類業(yè)務(wù)模型。項(xiàng)目模型文件放置于根目錄的models文件夾下,組件相關(guān)模型放置于components目錄下的models文件夾中。
行為文件
行為文件放在所引用的組件目錄下。
WXML規(guī)范
1、WXML規(guī)范
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>
合理展現(xiàn)分離內(nèi)容,不要使用內(nèi)聯(lián)樣式。
//推薦使用 <image class="tag"></image>
2、注釋規(guī)范
除組件外的其他塊級(jí)元素,均需注釋出其功能,并在其上下空出一行與其他代碼進(jìn)行區(qū)分。
<view>...</view> //導(dǎo)航欄 <view>...</view> <view>...</view>
CSS規(guī)范
1、CSS規(guī)范
在開發(fā)過程中rpx和px均可能用到,如通常情況下間距使用rpx,字體大小和邊框等使用px,開發(fā)者根據(jù)實(shí)際情況而定。
width: 100rpx; font-size: 14px;
CSS代碼需有明顯的代碼縮進(jìn)。每一個(gè)樣式類之間空出一行。
.v-tag{ width: 100%; } .v-container{ width: 100%; }
盡量使用簡(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 }
2、注釋規(guī)范
成組的wxss規(guī)則之間用塊狀注釋。請(qǐng)勿在代碼后面直接注釋。
/** 修改button默認(rèn)的點(diǎn)擊態(tài)樣式類**/ .button-hover { background-color: red; }
JS規(guī)范
1、JS規(guī)范
命名規(guī)范
變量名以及函數(shù)名統(tǒng)一采用駝峰命名法,正常情況下函數(shù)名前綴需加上清晰的動(dòng)詞表示函數(shù)功能,私有函數(shù)或者屬性以下劃線開頭表明。常量需用const 聲明。
類的命名首字母需大寫。
采用ES6 關(guān)鍵字let定義變量,盡量不使用var
//定義常量 const a = 1 //定義變量 let imageContent = res.data //函數(shù)命名 getInfo:function(){ return ''; } //私有函數(shù) _getInfo:function(){ return ''; }
回調(diào)函數(shù)規(guī)范
回調(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ù)以及回調(diào)函數(shù)統(tǒng)一放置在生命周期函數(shù)后。
刪除js文件中未用到的生命周期函數(shù),保持代碼的整潔。
Pages({ data:{ }, onLoad:function(event){ }, _self:function(){ } })
每個(gè)函數(shù)之間用一個(gè)空行分離結(jié)構(gòu)。
數(shù)據(jù)綁定變量定義規(guī)范
所有涉及到數(shù)據(jù)綁定的變量均需在data中初始化。禁止在不定義的情況下直接setData。
Pages({ data:{ id : null }, onLoad:function(event){ let id = event.target.dataset.id this.data.id = id } })
點(diǎn)擊事件規(guī)范
點(diǎn)擊事件函數(shù)命名方式為 on + 事件名 或者業(yè)務(wù)名。
onLike: function(event){ }
組件規(guī)范
組件名命名規(guī)范
組件在使用時(shí)命名以 “v-”為開頭的組件名,若組件名稱為多個(gè)單詞名拼接而成,采用 ' - ' 連接。組件標(biāo)簽在page頁(yè)面使用時(shí)推薦使用單閉合標(biāo)簽(此條約束對(duì)于包含有slot的組件無效)
<v-movies />
觸發(fā)事件規(guī)范
組件點(diǎn)擊觸發(fā)事件建議用冒號(hào)分隔開
自動(dòng)檢測(cè)
<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ī)范
JS語句無需以分號(hào)結(jié)束,統(tǒng)一省略分號(hào)
JS中一致使用反引號(hào) ``或單引號(hào)' ' , 不使用雙引號(hào)。
WXML、CSS、JSON中均應(yīng)使用雙引號(hào)。
CSS屬性中冒號(hào)中后面用一個(gè)空格分隔開。
執(zhí)行一致的縮進(jìn)(4個(gè)空格)
執(zhí)行一致的換行樣式('unix')、
以上是“小程序的開發(fā)規(guī)范”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。