一、目錄概述

• 基礎(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目錄下。

• 行為文件

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

• 計算文件

公用類計算文件放入公共 wxs 內(nèi)容中
私有計算文件放入當(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 個字符以內(nèi)，方便閱讀瀏覽，多余的代碼進(jìn)行換行處理，標(biāo)簽所帶屬性每個屬性間進(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ìn)行區(qū)分。

    <view>...view>

    // 導(dǎo)航欄    
    <view>...view>
    <view>...view>

• 基本組件使用優(yōu)先級

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

三、CSS 規(guī)范

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

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

    /** 使用簡寫屬性 **/

    .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
    }

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

• 同一個模塊的css文件放在一起，關(guān)鍵樣式需要注視，樣式之間使用空行分割

/* 頁面容器 */
.page-container {
    background: #f4f4f4;
}

/* 資金容器 */
.asset-container {
  margin: 20rpx;
}

• 成組的 wxss 規(guī)則之間用塊狀注釋。請勿在代碼后面直接注釋。

    /** 修改 button 默認(rèn)的點(diǎn)擊態(tài)樣式類 **/
    .button-hover {
      background-color: red;
    }

四、JS規(guī)范

命名規(guī)范

• 變量命名

  變量名以及函數(shù)名統(tǒng)一采用駝峰命名法

    myIncomeDetail

• 類的命名

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

    my-cart-detail
    my-cart-list

• 方法命名規(guī)范

私有方法使用下劃線開頭

// 營銷管理
  _getPromoteAmount: function() {
  
  },

點(diǎn)擊事件使用on開頭

// 聯(lián)系客服
  onContactServiceTap: function() {

  },

函數(shù)名前綴需加上清晰的動詞表示函數(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，錯誤參數(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ī)范

組件名稱為多個單詞 （必要）

• 組件名命名規(guī)范

應(yīng)用特定樣式和約定的基礎(chǔ)組件 (也就是展示類的、無邏輯的或無狀態(tài)的組件) 應(yīng)該全部以一個特定的前綴開頭，比如 Base、或 v-。

若組件名稱為多個單詞名拼接而成，采用 ’ - ’ 連接。組件標(biāo)簽在 page 頁面使用時推薦使用單閉合標(biāo)簽（此條約束對于包含有 >slot 的組件無效）

v 來源于法語 單詞 ‘vent’

和父組件緊密耦合的子組件應(yīng)該以父組件名作為前綴命名

組件名應(yīng)該以高級別的 (通常是一般化描述的) 單詞開頭，以描述性的修飾詞結(jié)尾

• 觸發(fā)事件規(guī)范

組件點(diǎn)擊觸發(fā)事件建議用冒號分隔開

<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)使用雙引號。
CSS 屬性中冒號中后面用一個空格分隔開。
JS 語句無需以分號結(jié)束，統(tǒng)一省略分號
JS 中一致使用反引號 `` 或單引號’ ’ , 不使用雙引號。