目錄概述

• 基礎(chǔ)規(guī)范

  頁(yè)面、樣式抖拦、行為雀鹃、規(guī)范，不用首屏加載的盡量分包

• 圖片文件
  項(xiàng)目圖片文件放置于根目錄的images文件夾下巫延，組件獨(dú)有的圖片放在當(dāng)前組件images目錄下
  大圖進(jìn)行壓縮效五，能用網(wǎng)絡(luò)鏈接的盡量用網(wǎng)絡(luò)鏈接

• 模型文件
  模型文件主要用于編寫(xiě)各類(lèi)業(yè)務(wù)模型地消。項(xiàng)目模型文件放置于根目錄的 models 文件夾下，組件相關(guān)模型放置于components目錄下的models文件夾中

• 組件文件
  所有組件相關(guān)文件統(tǒng)一放在components目錄下

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

• 計(jì)算文件

  • 公用類(lèi)計(jì)算文件放入公共 wxs 內(nèi)容中
  • 私有計(jì)算文件放入當(dāng)前使用文件目錄下
  • 頻繁用戶交互的效果在小程序上表現(xiàn)是比較卡頓的,用wxs 函數(shù)來(lái)響應(yīng)

WXML 規(guī)范

• 標(biāo)簽盡量少
  wxml 標(biāo)簽可以單獨(dú)出現(xiàn)的情況畏妖，盡量單獨(dú)出現(xiàn)脉执，如 input

    <input/>
  

• 減少?zèng)]行代碼量

  控制每行 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)語(yǔ)句添加 key

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

• 循環(huán)語(yǔ)句 和 判斷語(yǔ)句分開(kāi)

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

• 注釋規(guī)范

  除組件外的其他塊級(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)，在使用過(guò)程中針對(duì)屏幕做了適配蜻直，除了邊框線以外盯质，其他都是用rpx

• class名稱(chēng)單詞使用中劃線方式，不使用駝峰命名

  .aa-bb-cc{
    margin: 0 auto;
  }
  

• 盡量使用簡(jiǎn)寫(xiě)屬性概而，并且同一屬性放置在一起呼巷，避免散亂

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

• 同一個(gè)模塊的css文件放在一起，關(guān)鍵樣式需要注釋?zhuān)瑯邮街g使用空行分割

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

• 采用 flex 進(jìn)行布局赎瑰，禁止使用 float 以及 vertical-align

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

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

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

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

JS規(guī)范

命名規(guī)范

• 采用 ES6 關(guān)鍵字 let 定義變量，盡量不使用 var

      // 定義常量
  
      const a = 1
      
      // 定義變量
      
      let imageContent =  res.data
      
      // 函數(shù)命名
      
      getInfo:function(){
        return '';
      }
      
      // 私有函數(shù)
      
      _getInfo:function(){
        return '';
      }
  

• 類(lèi)的命名

  采用駝峰命名法,使用字母開(kāi)頭

  BannerCom.js
  Login.js
  

• 方法命名規(guī)范

  • 私有方法使用下劃線開(kāi)頭

    // 營(yíng)銷(xiāo)管理
      _getPromoteAmount: function() {
      
      },
    
    

  • 點(diǎn)擊事件使用on開(kāi)頭

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

• 函數(shù)名前綴需加上清晰的動(dòng)詞表示函數(shù)功能

• 回調(diào)函數(shù)統(tǒng)一使用 Promise 函數(shù)的方式進(jìn)行編寫(xiě)餐曼，回調(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ī)范

組件名稱(chēng)為多個(gè)單詞 （必要）

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

  應(yīng)用特定樣式和約定的基礎(chǔ)組件 (也就是展示類(lèi)的、無(wú)邏輯的或無(wú)狀態(tài)的組件) 應(yīng)該全部以一個(gè)特定的前綴開(kāi)頭踩娘，比如 Base刮刑、或 v-。
  若組件名稱(chēng)為多個(gè)單詞名拼接而成，采用 ’ - ’ 連接雷绢。組件標(biāo)簽在 page 頁(yè)面使用時(shí)推薦使用單閉合標(biāo)簽（此條約束對(duì)于包含有 >slot 的組件無(wú)效）泛烙。

    v 來(lái)源于法語(yǔ) 單詞 ‘vent’
  

  和父組件緊密耦合的子組件應(yīng)該以父組件名作為前綴命名組件名應(yīng)該以高級(jí)別的 (通常是一般化描述的) 單詞開(kāi)頭，以描述性的修飾詞結(jié)尾习寸。

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

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

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

• externalClasses 命名規(guī)范

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

    v-class-icon
  

• 組件樣式規(guī)范

  團(tuán)隊(duì)所產(chǎn)出的所有組件樣式均應(yīng)采用類(lèi)的寫(xiě)法，且命名必須以 v- 開(kāi)頭霞溪，不允許使用內(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è)空格分隔開(kāi)
  • JS 語(yǔ)句無(wú)需以分號(hào)結(jié)束鸯匹，統(tǒng)一省略分號(hào)
  • JS 中一致使用反引號(hào) `` 或單引號(hào)’ ’ , 不使用雙引號(hào)

說(shuō)明

小程序開(kāi)發(fā)規(guī)范v1.0
聯(lián)合作者：@風(fēng)了個(gè)1
參考