微信小程序的概況

微信小程序，小程序的一種,英文名 Wechat Mini Program，是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶掃一掃或搜一下即可打開(kāi)應(yīng)用。

微信小程序的特點(diǎn)

• 無(wú)需安裝和卸載
• 制作成本低
• 容易部署，具有豐富的延展性
• 內(nèi)存小、運(yùn)行快，操作便利快捷

微信小程序的基本使用

微信小程序語(yǔ)法

一、小程序中的四層結(jié)構(gòu)

1. js - 頁(yè)面邏輯
2. wxml - 頁(yè)面結(jié)構(gòu)
3. json - 頁(yè)面配置
4. wxss - 頁(yè)面樣式表

為了方便開(kāi)發(fā)者減少配置項(xiàng)，描述頁(yè)面的四個(gè)文件必須具有相同的路徑與文件名

二、小程序中的配置文件

• 全局配置
  小程序根目錄下的 app.json 文件用來(lái)對(duì)微信小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。

  
  
  全局配置

• 頁(yè)面配置
  每一個(gè)小程序頁(yè)面也可以使用同名 .json 文件來(lái)對(duì)本頁(yè)面的窗口表現(xiàn)進(jìn)行配置，頁(yè)面中配置項(xiàng)會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。

• sitemap配置
  小程序根目錄下的 sitemap.json 文件用來(lái)配置小程序及其頁(yè)面是否允許被微信索引

小程序中的模板語(yǔ)法

WXML（WeiXin Markup Language）是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。

1. 數(shù)據(jù)綁定

WXML 中的動(dòng)態(tài)數(shù)據(jù)均來(lái)自對(duì)應(yīng) Page 的 data

• 簡(jiǎn)單綁定
  數(shù)據(jù)綁定使用 Mustache 語(yǔ)法（雙大括號(hào)）將變量包起來(lái)，可以作用于：內(nèi)容
  

• 組件屬性-需要在雙引號(hào)之間

  
  

• 運(yùn)算
  可以在 {{}} 內(nèi)進(jìn)行簡(jiǎn)單的運(yùn)算，支持的有如下幾種方式：

  • 三元運(yùn)算

    
    

• 算數(shù)運(yùn)算

  
  

• 邏輯判斷

  
  

• 字符串運(yùn)算

  
  

• 列表渲染
  在組件上使用 wx:for 控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。
  默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為 index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為 item
  

  
  使用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名， 使用 wx:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名：
  
  
  block wx:for 實(shí)現(xiàn)一個(gè)空標(biāo)簽
  類(lèi)似 block wx:if，也可以將 wx:for 用在<block/>標(biāo)簽上，以渲染一個(gè)包含多節(jié)點(diǎn)的結(jié)構(gòu)塊。
  

wx:key

1. 如果列表中項(xiàng)目的位置會(huì)動(dòng)態(tài)改變或者有新的項(xiàng)目添加到列表中，并且希望列表中的項(xiàng)目保持自己的特征和狀態(tài)（如 input 中的輸入內(nèi)容，switch 的選中狀態(tài)），需要使用 wx:key 來(lái)指定列表中項(xiàng)目的唯一的標(biāo)識(shí)符。
2. wx:key 的值以兩種形式提供 字符串，
3. 代表在 for 循環(huán)的 array 中 item 的某個(gè) property，該 property 的值需要是列表中唯一的字符串或數(shù)字，且不能動(dòng)態(tài)改變。
4. 保留關(guān)鍵字 *this 代表在 for 循環(huán)中的 item 本身，這種表示需要 item 本身是一個(gè)唯一的字符串或者數(shù)字。
5. 當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時(shí)候，會(huì)校正帶有 key 的組件，框架會(huì)確保他們被重新排序，而不是重新創(chuàng)建，以確保使組件保持自身的狀態(tài)，并且提高列表渲染時(shí)的效率。

• 條件渲染

  
  

• block wx:if
  因?yàn)?wx:if 是一個(gè)控制屬性，需要將它添加到一個(gè)標(biāo)簽上。如果要一次性判斷多個(gè)組件標(biāo)簽，可以使用一個(gè) <block/> 標(biāo)簽將多個(gè)組件包裝起來(lái)，并在上邊使用 wx:if 控制屬性。