微信小程序的概況
微信小程序,小程序的一種,英文名 Wechat Mini Program风秤,是一種不需要下載安裝即可使用的應用粱檀,它實現了應用“觸手可及”的夢想伙菊,用戶掃一掃或搜一下即可打開應用抖韩。
微信小程序的特點
- 無需安裝和卸載
- 制作成本低
- 容易部署蛀恩,具有豐富的延展性
- 內存小、運行快茂浮,操作便利快捷
微信小程序的基本使用
微信小程序語法
一双谆、小程序中的四層結構
- js - 頁面邏輯
- wxml - 頁面結構
- json - 頁面配置
- wxss - 頁面樣式表
為了方便開發(fā)者減少配置項,描述頁面的四個文件必須具有相同的路徑與文件名
二席揽、小程序中的配置文件
-
全局配置
小程序根目錄下的 app.json 文件用來對微信小程序進行全局配置顽馋,決定頁面文件的路徑、窗口表現幌羞、設置網絡超時時間寸谜、設置多 tab 等。
全局配置 頁面配置
每一個小程序頁面也可以使用同名 .json 文件來對本頁面的窗口表現進行配置属桦,頁面中配置項會覆蓋 app.json 的 window 中相同的配置項程帕。sitemap配置
小程序根目錄下的 sitemap.json 文件用來配置小程序及其頁面是否允許被微信索引
小程序中的模板語法
WXML(WeiXin Markup Language)是框架設計的一套標簽語言,結合基礎組件地啰、事件系統(tǒng),可以構建出頁面的結構讲逛。
1. 數據綁定
WXML 中的動態(tài)數據均來自對應 Page 的 data
-
簡單綁定
數據綁定使用 Mustache 語法(雙大括號)將變量包起來亏吝,可以作用于:內容
-
組件屬性-需要在雙引號之間
-
運算
可以在 {{}} 內進行簡單的運算,支持的有如下幾種方式:-
三元運算
-
-
算數運算
-
邏輯判斷
-
字符串運算
-
列表渲染
在組件上使用 wx:for 控制屬性綁定一個數組盏混,即可使用數組中各項的數據重復渲染該組件蔚鸥。
默認數組的當前項的下標變量名默認為 index,數組當前項的變量名默認為 item
使用 wx:for-item 可以指定數組當前元素的變量名许赃, 使用 wx:for-index 可以指定數組當前下標的變量名:
block wx:for 實現一個空標簽
類似 block wx:if止喷,也可以將 wx:for 用在<block/>標簽上,以渲染一個包含多節(jié)點的結構塊混聊。
wx:key
- 如果列表中項目的位置會動態(tài)改變或者有新的項目添加到列表中弹谁,并且希望列表中的項目保持自己的特征和狀態(tài)(如 input 中的輸入內容,switch 的選中狀態(tài))句喜,需要使用 wx:key 來指定列表中項目的唯一的標識符预愤。
- wx:key 的值以兩種形式提供 字符串,
- 代表在 for 循環(huán)的 array 中 item 的某個 property咳胃,該 property 的值需要是列表中唯一的字符串或數字植康,且不能動態(tài)改變。
- 保留關鍵字 *this 代表在 for 循環(huán)中的 item 本身展懈,這種表示需要 item 本身是一個唯一的字符串或者數字销睁。
- 當數據改變觸發(fā)渲染層重新渲染的時候供璧,會校正帶有 key 的組件,框架會確保他們被重新排序冻记,而不是重新創(chuàng)建睡毒,以確保使組件保持自身的狀態(tài),并且提高列表渲染時的效率檩赢。
-
條件渲染
-
block wx:if
因為 wx:if 是一個控制屬性吕嘀,需要將它添加到一個標簽上。如果要一次性判斷多個組件標簽贞瞒,可以使用一個 <block/> 標簽將多個組件包裝起來偶房,并在上邊使用 wx:if 控制屬性。