不存在十全十美的文章 如同不存在徹頭徹尾的絕望
目錄
Mustache語法(一)
Mustache語法(二)
邏輯判斷 wx:if – wx:elif – wx:else
串列渲染 – wx:for基礎
block標簽
block標簽的意義
串列渲染 – item/index名稱
串列渲染 – key作用
模板用法
wxml的引入
include引入
wxs模塊
WXS的寫法
wxs練習
Mustache語法(一)
WXML基本格式：
- 類似于HTML代碼：比如可以寫成單標簽，也可以寫成雙標簽
- 必須有嚴格的閉合：沒有閉合會導致編譯錯誤
- 大小寫敏感：class和Class是不同的屬性
開發中, 界面上展示的資料并不是寫死的, 而是會根據服務器回傳的資料, 或者用戶的操作來進行改變.
- 如果使用原生JS或者jQuery的話, 我們需要通過操作DOM來進行界 面的更新.
- 小程式和Vue/React一樣, 提供了插值語法: Mustache語法(雙大括號
Mustache語法(二)
Mustache語法不僅僅可以直接顯示資料, 也可以使用運算式：
并且可以系結到屬性 :
邏輯判斷 wx:if – wx:elif – wx:else
某些時候, 我們需要根據條件來決定一些內容是否渲染：
- 當條件為true時, view組件會渲染出來
- 當條件為false時, view組件不會渲染出來
根據按鈕點擊, 決定是否渲染：
? 也可以有多個條件 :
邏輯判斷補充二：
hidden屬性:：
- hidden是所有的組件都默認擁有的屬性,
- 當hidden屬性為true時, 組件會被隱藏
- 當hidden屬性為false時, 組件會顯示出來
hidden和wx:if的區別：
- hidden控制隱藏和顯示是控制是否添加hidden屬性
- wx:if是控制組件是否渲染的
串列渲染 – wx:for基礎
為什么使用wx:for？
- 我們知道，在實際開發中，服務器經常回傳各種串列資料，我們不可能一一從串列中取出資料進行展示；
- 需要通過for回圈的方式，遍歷所有的資料，一次性進行展示；
在組件中，我們可以使用wx:for來遍歷一個陣列 （字串 - 數字）：
- 默認情況下，遍歷后在wxml中可以使用一個變數index，保存的是當前遍歷資料的下標值，
- 陣列中對應某項的資料，使用變數名item獲取，
block標簽
什么是block標簽？
- 某些情況下，我們需要使用 wx:if 或 wx:for時，可能需要包裹一組組件標簽
- 方式一：使用一個view組件包裹：
- 方式二：使用block標簽
block標簽的意義
- <block/> 并不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性，
使用block有兩個好處：
- 將需要進行遍歷或者判斷的內容進行包裹，
- 將遍歷和判斷的屬性放在block便簽中，不影響普通屬性的閱讀，提高代碼的可讀性，
串列渲染 – item/index名稱
默認情況下，item – index的名字是固定的
- 但是某些情況下，我們可能想使用其他名稱
- 或者當出現多層遍歷時，名字會重復
串列渲染 – key作用
使用wx:for時，會報一個警告：
- 這個提示告訴我們，可以添加一個key來提供性能，
為什么需要這個key屬性呢（了解）？
- 這個其實和小程式內部也使用了虛擬DOM有關系（和Vue、React很相似），
當某一層有很多相同的節點時，也就是串列節點時，我們希望插入一個新的節點
- 我們希望可以在B和C之間加一個F，Diff演算法默認執行起來是這樣的，
- 即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很沒有效率？
所以我們需要使用key來給每個節點做一個唯一標識
- Diff演算法就可以正確的識別此節點
- 找到正確的位置區插入新的節點，
key的作用主要是為了高效的更新虛擬DOM，
模板用法
WXML提供模板（template），可以在模板中定義代碼片段，在不同的地方呼叫，(是一種wxml代碼的復用機制)
- 使用 name 屬性，作為模板的名字, 然后在 <template/> 內定義代碼片段
wxml的引入
- 小程式wxml中提供了兩種引入檔案的方式：import和include
- Import引入：import 可以在該檔案中使用目標檔案定義的 template
include引入
- include 可以將目標檔案中除了 <template/> <wxs/> 外的整個代碼引入，相當于是拷貝到 include 位置：
wxs模塊
WXS（WeiXin Script）是小程式的一套腳本語言，結合 WXML，可以構建出頁面的結構，
- 官方：WXS 與 JavaScript 是不同的語言，有自己的語法，并不和 JavaScript 一致，（不過基本一致）
為什么要設計WXS語言呢？
- 在WXML中是不能直接呼叫Page/Component中定義的函式的.
- 但是某些情況, 我們可以希望使用函式來處理WXML中的資料(類似于Vue中的過濾器)，這個時候就使用WXS了
WXS使用的限制和特點：
- WXS 的運行環境和其他 JavaScript 代碼是隔離的，WXS 中不能呼叫其他 JavaScript 檔案中定義的函式，也 不能呼叫小程式提供的API，
- WXS 函式不能作為組件的事件回呼，
- 由于運行環境的差異，在 iOS 設備上小程式內的 WXS 會比 JavaScript 代碼快 2 ~ 20 倍，在 android 設備 上二者運行效率無差異，
WXS的寫法
WXS有兩種寫法：
- 寫在<wxs>標簽中
- 寫在以.wxs結尾的檔案中
<wxs>標簽的屬性：
wxs練習
- 練習一: 價格保留小數
- 練習二: 日期格式化
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/291666.html
標籤：其他