>[success] # WXML
1. 類似于`HTML`代碼:比如**可以寫成單標簽,也可以寫成雙標簽**
2. 必須有**嚴格的閉合**:沒有閉合會導致編譯錯誤
* html imge 標簽可以不閉合
~~~
<image>
~~~
* wxml 必須閉合
~~~
<image/>
~~~
3. **大小寫敏感**:class和Class是不同的屬性,下面案例中渲染的是兩個不同的組件內容
~~~html
<icon class="" type="success" size="23" color=""></icon>
<Icon class="" type="success" size="23" color=""></Icon>
~~~
>[info] ## 關于block
1. 某些情況下,我們需要使用 `wx:if` 或 `wx:for`時,可能需要包裹一組組件標簽
2. `<block/>` 并不是一個組件,它僅僅是一個包裝元素,不會在頁面中做任何渲染,只接受控制屬性
3. 使用上,將需要進行遍歷或者判斷的內容進行包裹,將遍歷和判斷的屬性放在block便簽中,不影響普通屬性的閱讀,提高代碼的可讀性
>[info] ## 使用 Mustache語法
1. 小程序和Vue一樣, 提供了插值語法: **Mustache語法(雙大括號) 這種語法** 用來渲染頁面數據
~~~html
<!-- 數據綁定Mustache語法-->
<view>{{message}}</view>
<view>{{ firstName + lastName }}</view>
<view>{{ date }}</view>
~~~
~~~
page({
/**
* 頁面的初始數據
*/
data: {
message:"你好",
firstName:"w",
lastName:"y",
date: new Date().toLocaleDateString(),
},
})
~~~
>[info] ## 小程序中的判斷
1. 邏輯判斷 `wx:if – wx:elif – wx:else`
2. 可以使用`hidden`屬性 來進行組件顯示隱藏,當`hidden`屬性為`true`時, 組件會被隱藏,當`hidden`屬性為`false`時, 組件會顯示出來
3. 二者區別`hidden`控制隱藏和顯示是控制是否添加`hidden`屬性,`wx:if`是控制組件是否渲染的

~~~html
<!-- 判斷邏輯 -->
<input type="number" model:value="{{score}}"/>
<view wx:if="{{ score >= 90 }}">優秀</view>
<view wx:elif="{{ score >=80 }}">良好</view>
<view wx:elif="{{ score >=60 }}">及格</view>
<view wx:else="">不及格</view>
<view style="height: 50px;"></view>
<!-- hidden 顯示隱藏 -->
<switch checked="{{isHidden}}" bindchange="switchChange"/>
<view hidden="{{ isHidden }}">hidden</view>
~~~
* index.js
~~~
Page({
/**
* 頁面的初始數據
*/
data: {
score:90,
isHidden:true,
},
switchChange(e){
const isHidden = e.detail.value;
this.setData({
isHidden
})
}
})
~~~
>[info] ## 循環wx:for
1. 在組件上使用`wx:for`控制屬性綁定一個數組,即可使用數組中各項的數據重復渲染該組件。
2. 默認數組的當前項的下標變量名默認為`index`,數組當前項的變量名默認為`item`
3. 使用`wx:for-item`可以指定數組當前元素的變量名 和 使用`wx:for-index`可以指定數組當前下標的變量名
4. 字符串,代表在 `for `循環的 `array `中 `item `的某個 `property`,該 `property `的值需要是列表中唯一的字符串或數字,且不能動態改變。
5. 保留關鍵字 \*this 代表在 for 循環中的 item 本身,這種表示需要 item 本身是一個唯一的字符串或者數字。
6. 循環時候也需要使用 key ,key 的作用**當某一層有很多相同的節點時,也就是列表節點時,我們希望插入、刪除一個新的節點,可以更好的復用節點;**

~~~html
<!-- 遍歷數字 -->
<view style="margin-bottom: 20px;">
<view> 遍歷數字,如果是數字并且非變量時候需要使用 大胡子語法 </view>
<view> 循環數字從0開始 index 也是從0 開始 </view>
<block wx:for="{{ 10 }}" wx:key="index">
<text> {{index}} - {{item}}</text>
</block>
</view>
<!-- 循環字符串 -->
<view style="margin-bottom: 20px;">
<view>循環字符串 字符串 不需要用 大胡子語法包裹</view>
<view>下面案例中 array 等同于使用大胡子語法定義 {{['a','r','r','a','y']}} </view>
<view>下面案例中 *this 表示單個循環字符串結果</view>
<block wx:for="array" wx:key="*this">
<text>{{ item }},</text>
</block>
</view>
<!-- 循環數組對象 -->
<view>
<!-- 自定義key 是從 指定item 中的字段即可,book作為item 字段有id 和name -->
<block wx:for="{{ books }}" wx:for-item="book" wx:for-index="i" wx:key="id">
<text>{{i}} -- {{book.id}} -- {{book.name}}</text>
</block>
</view>
<!-- 雙層循環 -->
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i" wx:key="*this">
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j" wx:key="*this">
<view wx:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</view>
</view>
</view>
~~~
* index.js
~~~ js
Page({
/**
* 頁面的初始數據
*/
data: {
books:[{"name":"w",id:1},{"name":"ww",id:2},{"name":"www",id:3},{"name":"wwww",id:4}]
},
})
~~~
>[danger] ##### 注意點
**注意:** 花括號和引號之間如果有空格,將最終被解析成為字符串
~~~
<view wx:for="{{[1,2,3]}} ">
{{item}}
</view>
~~~
等同于
~~~
<view wx:for="{{[1,2,3] + ' '}}" >
{{item}}
</view>
~~~
- 小程序了解
- webview 是什么
- Native App、Web App、Hybrid App
- 小程序架構模型
- 小程序配置文件
- app.js -- App函數
- 頁面.js -- page
- 生命周期????
- 小程序 -- 頁面wxml
- 小程序 -- WXS
- 小程序 -- 事件
- 小程序 -- 樣式wxss
- 小程序 -- 組件開發
- 小程序 -- 組件插槽
- 小程序 -- 組件的生命周期
- 組件總結
- 小程序 -- 混入
- 小程序基本組件
- text -- 文本
- view -- 視圖容器
- button -- 按鈕
- image -- 圖片
- scroll-view -- 滾動容器
- input -- 雙向綁定
- 通用屬性
- 小程序常用Api
- 微信網絡請求
- 微信小程序彈窗
- 微信小程序分享
- 獲取設備信息 / 獲取位置信息
- Storage存儲
- 頁面跳轉
- 小程序登錄