微信小程序開發(fā)規(guī)范文檔

一雏蛮、項目目錄規(guī)范

項目名

項目名要求使用語義清晰涎嚼，簡短，統(tǒng)一使用英文小寫挑秉，并且使用-隔開法梯，后綴要加-wx以區(qū)分是小程序項目，例如：dp-esa-wx犀概、dp-cbell-wx立哑。

項目結構

├─ miniprogram               # 小程序源碼目錄
  ├─ miniprogram_npm         # 構建后的npm依賴包
  ├─ components              # 組件目錄
  ├─ config                  # 配置文件
  ├─ assets                  # 靜態(tài)資源
  ├─ pages                   # 頁面目錄
    ├─ home                  # 頁面文件夾
      ├─ index.wxml          # 頁面wxml結構
      ├─ index.json          # 頁面json
      ├─ index.js            # 頁面js
      ├─ index.less          # 頁面樣式
    ├─ other
      ├─ index.wxml
      ├─  index.json
      ├─ index.js
      ├─ index.less
    ...
  ├─ utils                   # 工具方法文件夾
  ├─ app.js                  
  ├─ app.json
  ├─ app.less
  ├─ sitemap.json            # 小程序檢索相關配置
├─ node_modules              # 依賴包
├─ .gitignore                # git相關配置
├─ package.json              # 項目依賴json
├─ project.config.json       # 項目配置文件

頁面目錄

1. 由歷史原因和個人習慣導致目錄命名不統(tǒng)一，語義不清晰姻灶，不同成員在維護時難以快速識別铛绰。

目錄命名應遵循以下規(guī)范：
- 盡量簡短
- 采用英文小寫方式
- 單詞間以下劃線連接
- 英文語義需與當前目錄實現(xiàn)的功能保持一致
- 如有復數(shù)，應采用復數(shù)命名
- 不應該出現(xiàn)數(shù)字和除下劃線以外的特殊符號
示例：

// Bad
├─ pages/
├─ About/
├─ grouplist/
├─ group-list/
├─ group_list3/
├─ groupList/
├─ gl/
├─ yong_hu/

// Good
├─ pages/
  ├─ about/
  ├─ group_list/
  ├─ users/

2. 小程序規(guī)定产喉，一個頁面由wxml捂掰，wxss，js镊叁，json四個文件組成尘颓。為了方便開發(fā)者減少配置項，描述頁面的四個文件必須具有相同的路徑與文件名晦譬。

示例：

// Bad
├─ home/
  ├─ index.wxml
  ├─ index.wxss
  ├─ index.js
  └─ index.json
// Good
├─ home/
  ├─ home.wxml
  ├─ home.wxss
  ├─ home.js
  └─ home.json

3. 非公共組件和資源可放入對應頁面的的文件下的components和images里疤苹。

示例：

├─ home/
  ├─ home.wxml
  ├─ home.wxss
  ├─ home.js
  └─ home.json
├─ mine/
  ├─ components/
    ├─ avatar/
      ├─ avatar.wxml
      ├─ avatar.wxss
      ├─ avatar.js
      └─ avatar.json
    ├─ images/
      └─ avatar.png
    ├─ mine.wxml
    ├─ mine.wxss
    ├─ mine.js
    └─ mine.json

二、JS文件規(guī)范

1. 強類型檢查敛腌，使用===代替==

0 == false   // true
0 === false  // false
2 == "2"     // true
2 === "2"    // false

// 例子
const value = "500"
fi (value === 500) {
  console.log(value); // 沒有打印輸出 
}

if (value == 500) {
  console.og(value); // 打印出：500
}

2. 變量

給變量命名時卧土，應該要使變量名具有代表意圖的象征，使人易于搜索并且容易理解像樊。

// Bad
let daysSLV = 10;
let y = new Date().getFullYear();

let ok;
if (user.age > 30) {
  ok = true;
}
//本人解釋：y,ok這些什么玩意兒呢尤莺，30又是什么意思呢？

// Good
const MAX_AGE = 30; //哦生棍，是最大的年齡
let daysSinceLastVisit = 10;
let currentYear = new Date().getFullYear();//哦颤霎，是當前年份

···

const isUserOlderThanAllowed = user.age > MAX_AGE;

不要在變量名中增加沒必要的額外單詞

// Bad
let nameValue;
let theProduct;

// Good
let name;
let product;

不要強行記憶變量的上下文

// Bad
const users = ["John", "Marco", "Peter"];
users.forEach(u => {
  doSomething();
  doSomethingElse();
  // ...
  // ...
  // ...
  // ...
  // 這u什么玩意兒呢？
  register(u);
});

// Good
const users = ["John", "Marco", "Peter"];
users.forEach(user => {
  doSomething();
  doSomethingElse();
  // ...
  // ...
  // ...
  // ...
  register(user);
});

變量名不要加上下文重復的單詞

// Bad
const user = {
  userName: "John",
  userSurname: "Doe",
  userAge: "28"
};

...

user.userName;

// Good
const user = {
  name: "John",
  surname: "Doe",
  age: "28"
};

...

user.name;

3. 函數(shù)

統(tǒng)一使用省略function函數(shù)標識符的寫法

// Bad

// 變量函數(shù)
var getData = function(params) {
  // do something
}
// 定義函數(shù)
getData: function(params) {
  // do something
}
// 參數(shù)函數(shù)
getData: function(id, callback) {
  // do something
}
// 調用
this.getData(id, functiion(res) {
  // do something
});
// Good

// 變量函數(shù)
var getData = (params) => {
  // do something
}
// 定義函數(shù)
getData(params) {
  // do something
}
// 參數(shù)函數(shù)
getData(id, callback) {
  // do something
}
// 調用
this.getData(id, (res) => {
  // do something
});

函數(shù)名應該是動詞或者短語涂滴，代表某種行為友酱，描述它們在做什么

// Bad
notif(user) {
  // implementation
}

// Good
notifyUser(emailAddress) {
  // implementation
}

避免使用大量的參數(shù)，理想的情況就是使用兩個或者更少的參數(shù)柔纵。參數(shù)越少缔杉，測試就越容易

// Bad
getUsers(fields, fromDate, toDate) {
  // implementation
}

// Good
getUsers({ fields, fromDate, toDate }) {
  // implementation
}

getUsers({
  fields: ['name', 'surname', 'email'],
  fromDate: '2019-01-01',
  toDate: '2019-01-18'
});

函數(shù)應該使用默認參數(shù)，而不是條件語句

// Bad
createShape(type) {
  const shapeType = type || "cube";
  // ...
}

// Good
createShape(type = "cube") {
  // ...
}

（至于為什么搁料，在阮一峰ES6入門-函數(shù)參數(shù)的默認值中有說明）

一個函數(shù)應該做一件事或详，避免在一個函數(shù)中執(zhí)行多個操作系羞。

// Bad
notifyUsers(users) {
  users.forEach(user => {
    const userRecord = database.lookup(user);
    if (userRecord.isVerified()) {
      notify(user);
    }
  });
}

// Good 
notifyVerifiedUsers(users) {
  users.filter(isUserVerified).forEach(notify);
}

isUserVerified(user) {
  const userRecord = database.lookup(user);
  return userRecord.isVerified();
}

使用Object.assign設置默認對象

// Bad
const shapeConfig = {
  type: "cube",
  width: 200,
  height: null
};

createShape(config) {
  config.type = config.type || "cube";
  config.width = config.width || 250;
  config.height = config.width || 250;
}

createShape(shapeConfig);

// Good
const shapeConfig = {
  type: "cube",
  width: 200
  // Exclude the 'height' key
};

createShape(config) {
  config = Object.assign(
    {
      type: "cube",
      width: 250,
      height: 250
    },
    config
  );

  ...
}

createShape(shapeConfig);

不要使用標記作為參數(shù)，因為它們告訴你該函數(shù)正在做的比它應該做的更多霸琴。

// Bad
createFile(name, isPublic) {
  if (isPublic) {
    fs.create(`./public/${name}`);
  } else {
    fs.create(name);
  }
}

// Good
createFile(name) {
  fs.create(name);
}

createPublicFile(name) {
  createFile(`./public/${name}`);
}

不要污染全局變量椒振。如果需要擴展現(xiàn)有對象，請使用ES6類和繼承沈贝，而不是在現(xiàn)有對象的原型鏈上創(chuàng)建函數(shù)

// Bad
Array.prototype.myFunc = function myFunc() {
  // implementation
};

// Good
class SuperArray extends Array {
  myFunc() {
    // implementation
  }
}

4. 條件語句

避免負面條件

// Bad
isUserNotBlocked(user) {
  // implementation
}

if (!isUserNotBlocked(user)) {
  // implementation
}

// Good
isUserBlocked(user) {
  // implementation
}

if (isUserBlocked(user)) {
  // implementation
}

使用條件語句盡量短點杠人。這可能是微不足道的，但值得一提宋下。此方法僅用于布爾值嗡善，并且如果您確定該值不是未定義的或為null

// Bad
if (isValid === true) {
  // do something...
}

if (isValid === false) {
  // do something...
}

// Good
if (isValid) {
  // do something...
}

if (!isValid) {
  // do something...
}

盡可能避免switch分支，請改用多態(tài)和繼承学歧。

// Bad
class Car {
  // ...
  getMaximumSpeed() {
    switch (this.type) {
      case "Ford":
        return this.someFactor() + this.anotherFactor();
      case "Mazda":
        return this.someFactor();
      case "McLaren":
        return this.someFactor() - this.anotherFactor();
    }
  }
}

// Good
class Car {
  // ...
}

class Ford extends Car {
  // ...
  getMaximumSpeed() {
    return this.someFactor() + this.anotherFactor();
  }
}

class Mazda extends Car {
  // ...
  getMaximumSpeed() {
    return this.someFactor();
  }
}

class McLaren extends Car {
  // ...
  getMaximumSpeed() {
    return this.someFactor() - this.anotherFactor();
  }
}

5. ES6類

類是JavaScript中的新語法糖罩引，跟原型對象一樣，只是它現(xiàn)在看起來不同枝笨，你應該更喜歡它們而不是ES5的使用構造函數(shù)袁铐。

// Bad
const Person = function(name) {
  if (!(this instanceof Person)) {
    throw new Error("Instantiate Person with `new` keyword");
  }

  this.name = name;
};

Person.prototype.sayHello = function sayHello() { /**/ };

const Student = function(name, school) {
  if (!(this instanceof Student)) {
    throw new Error("Instantiate Student with `new` keyword");
  }

  Person.call(this, name);
  this.school = school;
};

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
Student.prototype.printSchoolName = function printSchoolName() { /**/ };

// Good
class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    /* ... */
  }
}

class Student extends Person {
  constructor(name, school) {
    super(name);
    this.school = school;
  }

  printSchoolName() {
    /* ... */
  }
}

使用方法鏈接，許多庫如jQuery和Lodash都使用這種模式横浑。因此剔桨，您的代碼將不那么冗長。在你的類中徙融，只需在每個函數(shù)的末尾返回它洒缀，你就可以將更多的類方法鏈接到它上面。

// Bad
class Person {
  constructor(name) {
    this.name = name;
  }

  setSurname(surname) {
    this.surname = surname;
  }

  setAge(age) {
    this.age = age;
  }

  save() {
    console.log(this.name, this.surname, this.age);
  }
}

const person = new Person("John");
person.setSurname("Doe");
person.setAge(29);
person.save();

// Good
class Person {
  constructor(name) {
    this.name = name;
  }

  setSurname(surname) {
    this.surname = surname;
    // Return this for chaining
    return this;
  }

  setAge(age) {
    this.age = age;
    // Return this for chaining
    return this;
  }

  save() {
    console.log(this.name, this.surname, this.age);
    // Return this for chaining
    return this;
  }
}

const person = new Person("John")
    .setSurname("Doe")
    .setAge(29)
    .save();

6欺冀、常規(guī)的避免
一般來說树绩，盡量不要重復自己，就是說不應該編寫重復的代碼隐轩，也不要在你身后留下尾巴饺饭，比如未使用的函數(shù)和死代碼赶袄。
由于各種原因躬络，你最終可能會有重復的代碼。比如坯沪，你可能有兩個略有不同的東西悴灵，它們有許多共同之處扛芽，有時期限不足的迫使你創(chuàng)建包含幾乎同樣代碼的單獨函數(shù)。
關于死代碼称勋，這正如它的名字。它沒有做任何事情涯竟，因為在某些開發(fā)階段赡鲜，你已經(jīng)決定不再用它空厌，您應該在代碼庫中搜索這些不需要的函數(shù)和代碼塊并刪除。我建議你银酬，一旦你決定不再需要它嘲更，就馬上刪除它，以防你以后可能會忘記它的用途揩瞪。

(以上JS規(guī)范大量參考http://www.reibang.com/p/2346cb6b7279)

三赋朦、WXSS文件規(guī)范

1. 注釋

基本語法
- 注釋代碼以/*開始，以*/結束
- 注釋不能嵌套
- 示例
```
/* 單行注解 */

/*
 * 多行注解
 * 1234567
 */
```

注釋內(nèi)容

對于一般性注解李破，書寫簡單的短語宠哄；對于較長的注解，書寫完整的句子嗤攻。
Bad

/* 這是用戶頭像的樣式 */
.avatar {
  width: 200rpx;
  height: 200rpx;
}

Good

/* 用戶頭像 */
.avatar {
  width: 200rpx;
  height: 200rpx;
}

注釋位置
- 注釋應該寫在被注釋代碼塊的上一行毛嫉，或者單行注釋時放在單行后面，不要放在代碼塊的{后
```
/* Modal header */
.modal-header {
  ...
}

.modal-header {
  /* 50px */
  width: 50px;

  color: red; /* color red */
}
```

注釋格式

注釋內(nèi)容的第一個字符和最后一個字符皆為一個空格字符
Bad

/*用戶昵稱*/
.name {
  ...
}

Good

/* 用戶昵稱 */
.name {
  ...
}

/*
 * Modal header
 */
.modal-header {
  ...
}

單行注釋

.name { /* 用戶昵稱 */
  color: #fff; /* 顏色 */
  wight: 80rpx; /* 寬 */
}

Good

/* 用戶昵稱 */
.name {
  /* 顏色 */
  color: #fff;

  widht: 80rpx;         /* 寬 */
  heigth: 80rpx;        /* 高 */
}

模塊注釋

/* 模塊A -------------------------------------------------- */
.modules_a {}

/* 模塊B -------------------------------------------------- */
.modules_b {}

Good

/* 模塊A
----------------------------------------------------------- */
.modules_a {}

/* 模塊B
----------------------------------------------------------- */
.modules_b {}

2. 代碼規(guī)范

代碼風格
代碼格式化
樣式書寫一般有兩種：一種是緊湊格式 (Compact)
```
.jdc{ display: block;width: 50px;}
```
一種是展開格式（Expanded）
```
.jdc{
  display: block;
  width: 50px;
}
```
開發(fā)約定：統(tǒng)一使用展開式書寫樣式妇菱。
代碼大小寫
樣式選擇器承粤，屬性名，屬性值關鍵字全部使用小寫字母書寫闯团，屬性字符串允許使用大小寫辛臊。
```
/* 推薦 */
.jdc{
   display:block;
}

/* 不推薦 */
.JDC{
   DISPLAY:BLOCK;
}
```
選擇器
盡量少用通用選擇器 *
不使用 ID 選擇器
不使用無具體語義定義的標簽選擇器
```
/* 推薦 */
.jdc {}
.jdc li {}
.jdc li p{}

/* 不推薦 */
*{}
#jdc {}
.jdc div{}  
```
代碼縮進
統(tǒng)一使用兩個空格進行代碼縮進，使得各編輯器表現(xiàn)一致（各編輯器有相關配置）
```
.jdc {
  width: 100%;
  height: 100%;
}
```
分號
每個屬性聲明末尾都要加分號房交；
```
.jdc {
  width: 100%;
  height: 100%;
}
```

代碼易讀性
左括號與類名之間一個空格彻舰，冒號與屬性值之間一個空格

/* 推薦 */
.jdc { 
  width: 100%; 
}
/* 不推薦 */
.jdc{ 
  width:100%;
}

逗號分隔的取值，逗號之后一個空格

/* 推薦 */
.jdc {
  box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}

 /* 不推薦 */
.jdc {
  box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}

為單個css選擇器或新申明開啟新行

/* 推薦 */
.jdc, 
.jdc_logo, 
.jdc_hd {
  color: #ff0;
}
nav{
  color: #fff;
}

/* 不推薦 */
.jdc,jdc_logo,.jdc_hd {
  color: #ff0;
}.nav{
  color: #fff;
}

顏色值 rgb() rgba() hsl() hsla() rect() 中不需有空格涌萤，且取值不要帶有不必要的 0

/* 推薦 */
.jdc {
  color: rgba(255,255,255,.5);
}

/* 不推薦 */
.jdc {
  color: rgba( 255, 255, 255, 0.5 );
}

屬性值十六進制數(shù)值能用簡寫的盡量用簡寫

/* 推薦 */
.jdc {
  color: #fff;
}

/* 不推薦 */
.jdc {
  color: #ffffff;
}

不要為 0 指明單位

/* 推薦 */
.jdc {
  margin: 0 10px;
}

 /* 不推薦  */
.jdc {
  margin: 0px 10px;
}

屬性值引號
css屬性值需要用到引號時淹遵，統(tǒng)一使用單引號

/* 推薦 */
.jdc { 
 font-family: 'Hiragino Sans GB';
}

/* 不推薦 */
.jdc { 
 font-family: "Hiragino Sans GB";
}

屬性書寫順序
建議遵循以下順序：
1. 布局定位屬性：display / position / float / clear / visibility / overflow
2. 自身屬性：width / height / margin / padding / border / background
3. 文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他屬性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
```
.jdc {
  display: block;
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  margin: 0 10px;
  padding: 20px 0;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  color: #333;
  background: rgba(0,0,0,.5);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}
```
mozilla官方屬性順序推薦

CSS3瀏覽器私有前綴寫法
CSS3 瀏覽器私有前綴在前，標準前綴在后

.jdc {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

四负溪、WXXL文件規(guī)范

1. 選擇器(class)命名規(guī)范

class選擇器命名基本規(guī)則
以字母開頭透揣，全部字母小寫
盡量簡短、明確
單個名字如果由多個詞組成川抡，單詞間以下劃線_連接
```
<text class="image_url"> ... </text>
```
層級關系以中劃線-連接
```
<text class="notice-title"> ... </text>
```

繼承式命名
為了保證我們設計的class樣式既能重復利用辐真，又能避免沖突。我們采用繼承式來給class樣式命名崖堤。
每個頁面一般都可以分成幾個模塊侍咱，我們把每個模塊最外層的class名作為祖先，模塊內(nèi)部的class樣式名用祖先名作為前綴密幔，它們以中劃線-連接楔脯。（通過這種方式來表示class樣式的作用域

// home是祖先模塊，user和event是home的直接子模塊
<view class="home">
    <view class="home-user">
        // 用戶信息
    </view> 
    <view class="home-event">
        // 動態(tài)詳情
    </view> 
</view>

在頁面結構里胯甩，模塊內(nèi)部可以有子模塊昧廷，子模塊下面可以有孫子模塊堪嫂，以此類推。class樣式命名也按這個層級木柬。

// home是祖先模塊皆串，user和event是home的直接子模塊
// user下面又有兩個子模塊name和signature
<view class="home">
    <view class="home-user">
        <view class="home-user-name">
              // 用戶信息
        </view>
        <view class="home-user-signature">
            // 個性簽名
        </view> 
    </view> 
    <view class="home-event">
        // 動態(tài)詳情
    </view> 
</view>

縮寫
當頁面結構復雜，層級過多眉枕，樣式名的前綴就會太多太長恶复，我們需要對前綴進行縮寫。
當樣式名的前綴太多(一般超過2個)或太長速挑，我們把每兩個前綴作為一組谤牡，取每個前綴的第一個字母合在一起組成新的前綴，前綴與前綴或class樣式之間以中劃線-連接梗摇⊥赜矗縮寫時要保證新的前綴具有唯一性和可辨識性。

// home是祖先模塊伶授，user和event是home的直接子模塊
// user下面又有兩個子模塊name和signature
<view class="home">
    <view class="home-user">
        // hu就home-user的縮寫
        <view class="hu-name">
            // 用戶信息
        </view>
        <view class="hu-signature">
            // 個性簽名
        </view> 
    </view> 
    <view class="photos-desc">
    // he 是photos-desc縮寫
    <view class="he-photos">
        <image class="he-photos-image" src="..."></image> 
        <view class="he-photos-desc">
            // pd 是photos-desc的縮寫
            <text class="he-pd-text">...</text>
            </view>
        </view> 
        <view class="he-video">
              ...
        </view> 
    </view> 
</view>

常用命名推薦

ClassName 含義
about 關于
account 賬戶
arrow 箭頭圖標
article 文章
aside 邊欄
audio 音頻
avatar 頭像
bg,background 背景
bar 欄（工具類）
branding 品牌化
crumb,breadcrumbs 面包屑
btn,button 按鈕
caption 標題断序，說明
category 分類
chart 圖表
clearfix 清除浮動
close 關閉
col,column 列
comment 評論
community 社區(qū)
container 容器
content 內(nèi)容
copyright 版權
current 當前態(tài)，選中態(tài)
default 默認
description 描述
details 細節(jié)
disabled 不可用
entry 文章糜烹，博文
error 錯誤
even 偶數(shù)违诗，常用于多行列表或表格中
fail 失敗（提示）
feature 專題
fewer 收起
field 用于表單的輸入?yún)^(qū)域
figure 圖
filter 篩選
first 第一個疮蹦，常用于列表中
footer 頁腳
forum 論壇
gallery 畫廊
group 模塊诸迟，清除浮動
header 頁頭
help 幫助
hide 隱藏
hightlight 高亮
home 主頁
icon 圖標
info,information 信息
last 最后一個，常用于列表中
links 鏈接
login 登錄
logout 退出
logo 標志
main 主體
menu 菜單
meta 作者愕乎、更新時間等信息欄阵苇，一般位于標題之下
module 模塊
more 更多（展開）
msg,message 消息
nav,navigation 導航
next 下一頁
nub 小塊
odd 奇數(shù)，常用于多行列表或表格中
off 鼠標離開
on 鼠標移過
output 輸出
pagination 分頁
pop,popup 彈窗
preview 預覽
previous 上一頁
primary 主要
progress 進度條
promotion 促銷
rcommd,recommendations 推薦
reg,register 注冊
save 保存
search 搜索
secondary 次要
section 區(qū)塊
selected 已選
share 分享
show 顯示
sidebar 邊欄感论，側欄
slide 幻燈片绅项，圖片切換
sort 排序
sub 次級的，子級的
submit 提交
subscribe 訂閱
subtitle 副標題
success 成功（提示）
summary 摘要
tab 標簽頁
table 表格
txt,text 文本
thumbnail 縮略圖
time 時間
tips 提示
title 標題
video 視頻
wrap 容器比肄，包快耿，一般用于最外層
wrapper 容器，包芳绩，一般用于最外層

2. 注釋規(guī)范

注釋
代碼是由人編寫并維護的掀亥，我們要盡可能保證寫的代碼能夠自描述、注釋良好并且易于他人理解妥色。好的注釋能夠傳達上下文關系和代碼目的搪花。
注釋代碼以結尾。
標準寫法
```

```
錯誤寫法
```




```
單行注釋
一般用于簡單的描述，如狀態(tài)描述撮竿，屬性描述等丁稀。書寫時應遵循以下規(guī)范：
注釋內(nèi)容前后各一個空格字符
注釋位于注釋代碼上面
單獨占一行
推薦：
```

<div> ... </div>
```
不推薦：
```

<view> ... </view>


<view> ... </view>

<view> ... </view> 

<view>  
    ... 
</view>
```

代碼塊注釋
一般用于描述某一塊代碼的名稱或開始，結束位置倚聚。書寫時應該遵循以下規(guī)范
注釋內(nèi)容前后各一個空格字符
表示代碼塊開始，表示代碼塊結束
代碼塊與代碼塊之間相隔一行
推薦：

<!-- S Comment Text A --> 
<div class="mod_a">
    ...
</div>
<!-- E Comment Text A -->
  
<!-- S Comment Text B --> 
<div class="mod_b">
    ...
</div>
<!-- E Comment Text B -->

不推薦：

<!-- S Comment Text A -->
<div class="mod_a">
    ...
</div>
<!-- E Comment Text A -->
<!-- S Comment Text B --> 
<div class="mod_b">
    ...
</div>
<!-- E Comment Text B -->

嵌套代碼塊注釋
用于代碼塊內(nèi)嵌套的代碼塊的注釋凿可，注釋格式由

<!-- 注釋內(nèi)容 開始 -->
<!-- 注釋內(nèi)容 結束 -->

改為

<!-- /注釋內(nèi)容 -->

推薦：

<!-- 個人主頁 開始 -->
<view>
    <view class="personal_info">
        ...
    </view>
    <!-- /個人信息 -->
      
    <view class="personal_event_list">
        ...
    </view>
    <!-- /動態(tài)列表 -->
      
</view>
<!-- 個人主頁 結束 -->

不推薦：

<!-- 個人主頁 開始 -->
<view>
    <!-- 個人信息 開始 -->
    <view class="personal_info">
        ...
    </view>
    <!-- 個人信息 結束 -->
      
    <!-- 動態(tài)列表 開始 -->
    <view class="personal_event_list">
          ...
    </view>
    <!-- 動態(tài)列表 結束 -->
      
</view>
<!-- 個人主頁 結束 -->

3. 代碼規(guī)范

標簽
小程序視圖層開發(fā)基于小程序框架為開發(fā)者提供的一系列基礎組件惑折，這些基礎組件通常以雙標簽或單標簽的形式使用。
雙標簽包括起始標簽<標簽>枯跑，結止標簽</標簽>和屬性惨驶，內(nèi)容在這兩個標簽之內(nèi)
單標簽只有一個<標簽/>，有屬性敛助，沒有內(nèi)容
小程序規(guī)定粗卜，標簽名有多個詞時，詞之間以連接符-連接纳击。
```
<tag-name property="value">
    內(nèi)容放這里...
</tag-name>

<tag-name property="value"/>
```
編碼時要遵循標簽的語義续扔，要盡量使用最少的標簽并保持最小的復雜度。
代碼大小寫
所有標簽和屬性焕数，大部分屬性值統(tǒng)一使用小寫
推薦：
```
<view class="demo">...</view> 
```
不推薦：
```
<view class="DEMO">...</view> 
<VIEW CLASS="DEMO">
   ...
</VIEW>
```
標簽的閉合
在小程序里纱昧，有些組件必須寫成雙標簽，如視圖容器類組件view堡赔；有些組件可以寫成單標簽识脆，如媒體類組件image；但在小程序運行時善已，它們都會解析成雙標簽灼捂。
在小程序里，所有的標簽一旦使用都必須被閉合换团，使用標簽不閉合會報錯悉稠，導致程序無法運行。
正確寫法：
```
<view>
    <text>我是一段文字啥寇，我有始有</text>
</view> 
```
錯誤寫法：
```
<view>
    <text>我是一段文字偎球，我有始有
</view> 
```
所有具有開始標簽和結束標簽的元素都要寫上起止標簽，某些可以省略結束標簽的亦都要寫上
推薦寫法：
```
<view>
    <input value="test"></input>
    <text>我是一段文字辑甜，我有始有</text>
</view> 
```
不推薦：
```
<view><input value="test"></view> 
```

標簽屬性
標簽屬性值使用雙引號語法
屬性值可能寫上的都寫上
推薦:

<input type="text"></input>
  
<input type="radio" name="name" checked="checked" ></input>

不推薦:

<input type=text></input>
<input type='text'></input>
  
<input type="radio" name="name" checked ></input>

謹慎使用id屬性
id屬性具有唯一性衰絮，可以用來標識具體組件，應避免在樣式上使用id屬性（選擇器）
屬性書寫順序
標簽屬性應按照以下順序依次排列磷醋，以確保代碼的可讀性
```
id,
class,
wx:for wx:item wx:key,
wx:if,
src,
事件綁定類屬性猫牡，如bind:tap,
value,
dataSet,(*需完善)
組件自帶的其它屬性,
```
特殊字符
正常情況下的小程序里，文本和字符實體不能混合出現(xiàn)邓线。
如需使用字符實體淌友，需使用text組件并設置decode屬性煌恢，并且decode目前僅可解析 < > & ' ? ?，參考text文檔
正確用法
```
<text decode=""><   ></text>
```
錯誤用法
```
<text><   ></text>
<view decode=""><   ></view>
```
特殊符號使用輸入法輸入即可
連續(xù)空格的使用
需使用text組件并設置space屬性
無space屬性的text內(nèi)多個連續(xù)空格最終只顯示一個
非text組件設置space屬性不會有連續(xù)空格的效果
正確寫法
```
<text space="ensp">1 1 1 1</text>
// 輸出：1 1 1 1
```
無效寫法
```
<text>1 1 1 1</text>
// 輸出：1 1 1 1
```

代碼縮進
統(tǒng)一使用4個空格字符進行代碼縮進

<view>
    <text>4個空格字符縮進</text>
    <view>...</view> 
    <view>在微信開發(fā)者工具-設置-編輯設置震庭，勾選用空格代碼Tab瑰抵，Tab大小設置為4，使用格式化代碼可以自動縮進對</view>
</view>

代碼嵌套
編寫wxml代碼時器联，需要保證頁面結構穩(wěn)固二汛，同時需要避免多余的父元素，減少嵌套拨拓。
推薦寫法

<view class="user_info">
<text class="nickname">小明</text></view>

不推薦寫法

<view class="user_info"><view class="avatar"></view> 
<view class="nickname"><text>小明</text></view></view>

塊級標簽的起止標簽各占一行肴颊，行內(nèi)標簽的起止標簽一般寫在一行內(nèi)，如果標簽內(nèi)容過多渣磷，起止標簽則各占一行婿着。
推薦寫法

<view class="user_info">
    <text>小明</text>
    <text>原有獎勵模式已改為積分獎勵，針對部分未兌換禮品的用戶醋界，已為您補發(fā)積分獎勵竟宋，如有疑問請聯(lián)系微信客服：yiniankefu</text>
</view>