目錄規范

• 基礎規范

頁面、樣式、行為、規范，不用首屏加載的盡量分包

• 圖片

項目圖片文件放置于根目錄的images文件夾下，組件獨有的圖片放在當前組件images目錄下

• 組件文件

所有組件相關文件統一放在components目錄下。

• 模型文件

模型文件主要用于編寫各類業務模型。項目模型文件放置于根目錄的 models 文件夾下，組件相關模型放置于components目錄下的models文件夾中。

• 行為文件

行為文件放在所引用的組件目錄下

• 公共方法

所有與公共方法相關的放到utils

WXML 規范

• 標簽盡量少

wxml 標簽可以單獨出現的情況，盡量單獨出現，如 input

• 減少沒行代碼量

控制每行 HTML 的代碼數量在 50 個字符以內，方便閱讀瀏覽，多余的代碼進行換行處理，標簽所帶屬性每個屬性間進行換行。

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

• 循環語句添加 key

<switch wx:for="{{objectArray}}" wx:key="unique" >{{item.id}}</switch>

• 循環語句 和 判斷語句分開

<switch wx:for="{{objectArray}}" wx:key="unique" wx:if="{{item.id > 5}}">{{item.id}}</switch>

• 合理展現分離內容，不要使用內聯樣式。

// 推薦使用<image class="tag"></image>// 不推薦 <image style="width:100rpx;height:100rpx"></image>

• 注釋規范

均需注釋出其功能，并在其上下空出一行與其他代碼進行區分。

``` <view>...view>// 標題欄 <view>...view> <view>...view> ```

• 基本組件使用優先級

能用基本組件 view 、text、 button、 input等 減少使用 scroll-view、movable-view 等，減少嵌套

CSS 規范

• rpx和px都能使用到，rpx是基于iPhone 6的邏輯像素點，在使用過程中針對屏幕做了適配，除了邊框線以外，其他都是用rpx

• CSS代碼需有明顯的代碼縮進。

button {width: 287px;border-radius: 40rpx;background-color: #076BFF;color: #fff;display: flex;align-items: center;justify-content: center; }

• 盡量使用簡寫屬性，并且同一屬性放置在一起，避免散亂

/** 使用簡寫屬性 **/.v-image{margin: 0 auto;}/** 同一屬性放在一塊 **/.v-tag{margin-left: 10rpx;margin-right: 10rpx}

• 采用 flex 彈性布局，禁止使用 float 以及 vertical-align。

.container{disaplay: flex;align-items: center;justify-content: center;}

• 同一個模塊的css文件放在一起，關鍵樣式需要注釋，請勿在代碼后面直接注釋

/* 頁面容器 */ .page-container {background: #f4f4f4; }/* 資金容器 */ .asset-container {margin: 20rpx; }

• 避免使用全局命名 打包文件后會覆蓋

JS規范

• 命名規范

變量名以及函數名統一采用駝峰命名法
myIncomeDetail

• 類的命名

使用字母開頭，多個單詞使用中劃線鏈接
my-cart-detail

• 方法命名規范

1.私有方法使用下劃線開頭

_getPromoteAmount: function() {}

2.點擊事件函數命名方式為 on + 事件名 或者業務名

onContactServiceTap: function() { },

3.函數名前綴需加上清晰的動詞表示函數功能

• 采用 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);});

• 數據綁定變量定義規范

所有涉及到數據綁定的變量均需在 data 中初始化。禁止在不定義的情況下直接 setData

Pages({data:{id : null},onLoad:function(event){let id = event.target.dataset.idthis.data.id = id} })

組件規范

• 組件名命名規范

應用特定樣式和約定的基礎組件 (也就是展示類的、無邏輯的或無狀態的組件) 應該全部以一個特定的前綴開頭，比如 Base、或 v-。
組件在使用時命名以 “v-”為開頭的組件名，若組件名稱為多個單詞名拼接而成，采用 ’ - ’ 連接。組件標簽在page頁面使用時推薦使用單閉合標簽（此條約束對于包含有slot的組件無效）

``` v 來源于法語 單詞 ‘vent’ ```> 和父組件緊密耦合的子組件應該以父組件名作為前綴命名

• 觸發事件規范

組件點擊觸發事件建議用冒號分隔開

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

• externalClasses 命名規范

命名格式采用如下形式：v-class-{name}，name可自行定義

v-class-icon

• 組件樣式規范

所有組件樣式均應采用類的寫法，且命名必須以 v- 開頭，不允許使用內聯樣式以及id樣式

.v-container{disaplay: flex;flex-dirextion: row }

• 標點規范

WXML、CSS、JSON 中均應使用雙引號。
CSS 屬性中冒號中后面用一個空格分隔開。
JS 語句無需以分號結束，統一省略分號
JS 中一致使用反引號 `` 或單引號’ ’ , 不使用雙引號。

總結

以上是生活随笔為你收集整理的微信小程序开发规范的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。