官網(wǎng)——WXML語(yǔ)法文檔

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/

官網(wǎng)——組件文檔

https://developers.weixin.qq.com/miniprogram/dev/component/

<text>這是text標(biāo)簽1text>
<text>這是text標(biāo)簽2text>


<view>這是div標(biāo)簽1view>
<view>這是div標(biāo)簽2view>

<view>
  
  <image  mode='widthFix' style='width:60%' src='https://www.ideal-20.cn/medias/avatar.jpg'>image>
view>

看一下效果

(二) 數(shù)據(jù)綁定

雖然還不涉及到什么頁(yè)面的美化，以及復(fù)雜的標(biāo)簽，不過(guò)一個(gè)極為簡(jiǎn)單的靜態(tài)頁(yè)面現(xiàn)在已經(jīng)可以構(gòu)造出來(lái)了，歸根結(jié)底，我們最后都是要進(jìn)行前后臺(tái)數(shù)據(jù)的交互的，而微信小程序就為我們提供了很多很好用的用法，能很快的進(jìn)行數(shù)據(jù)的綁定操作

有一個(gè)前提條件，我們先模擬一些數(shù)據(jù)，我們只需要在頁(yè)面的 js 文件中的 data對(duì)象 中定義小程序初始化的數(shù)據(jù)，例如下面代碼，我們隨便拿一些常見(jiàn)的數(shù)據(jù)類(lèi)型來(lái)模擬一下

Page({
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    msg: "你好，微信小程序",
    status: 100,
    isLogin: true,
    person:{
      name: "張三",
      age: 22,
      profession: "student"
    },
    isChecked: true
  },
})

(1) 常見(jiàn)類(lèi)型普通寫(xiě)法

如何在 WXML 標(biāo)簽組件中進(jìn)行數(shù)據(jù)的綁定其實(shí)是非常簡(jiǎn)單的，微信小程序中通過(guò) {{}} 來(lái)解析剛才在 JS 中模擬的變量

要注意：直接通過(guò) {{}} 解析的變量都是 頁(yè)面 js 文件中 Page --> data 下的

A：字符串

字符串內(nèi)容直接用兩個(gè)大括號(hào)括住接收就可以了，在上面我們有這樣的定義：

msg: "你好，微信小程序", 所以直接括住 msg 就可以獲取到后面的值了

<view>{{msg}}view>

B：數(shù)值

數(shù)值也是一樣直接可以獲取

<view>{{status}}view>

C：布爾類(lèi)型

布爾類(lèi)型第一個(gè)代碼是直接打印出其布爾類(lèi)型 true 或者 false

<view>{{isLogin}}view>

而下面配合 checkbox 就可以實(shí)現(xiàn)是否選中的效果

<view>
    <checkbox checked="{{isChecked}}">checkbox>
view>

D：對(duì)象

對(duì)象這塊如果你直接打印 person 就會(huì)輸出一個(gè) Object 類(lèi)型，所以如果想要拿到對(duì)象的屬性值，一定要指定到具體的屬性

<view>{{person.name}}view>
<view>{{person.age}}view>
<view>{{person.profession}}view>

看一下上述所有的綁定效果

(2) 組件屬性中

例如我們 view 組件的 id 值前綴是固定的 user- 后面就是用戶(hù)的序號(hào)，這時(shí)候就可以通過(guò)變量來(lái)進(jìn)行巧妙的解析到屬性中了

注：不要輕易的亂加空格，否則可能會(huì)讀取失敗例如：

<view id="user-{{uid}}">view>

看一下 Wxml 的源碼 id 這個(gè)屬性中已經(jīng)進(jìn)行了拼接，這種方式同樣還會(huì)常用在 class 或者 style 中，配合三元運(yùn)行能不錯(cuò)的實(shí)現(xiàn)一些需求，下面我們會(huì)提到

(三) 運(yùn)算

首先我們依舊定義一些數(shù)據(jù)，三個(gè)整數(shù)，和兩個(gè)字符串

Page({
  data: {
    a: 11,
    b: 22,
    c: 33,
    msg: "姓名",
    name: "張三"
  },
})

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

直接在 {{}} 中進(jìn)行 加減乘除等的運(yùn)算，直接就可以得到結(jié)算的結(jié)果，例如：

<view>{{a + b + c}}view>
<view>{{a + b}} + {{c}}view>

(2) 字符串運(yùn)算

如果是字符串類(lèi)型的數(shù)據(jù)，利用 + 進(jìn)行運(yùn)算，結(jié)果是一個(gè)拼接的效果

{{'a' + 'b' + 'c'}}
{{'11' + '22' + '33'}}
{{msg + '：' +name}}

(3) 邏輯判斷

這個(gè)就是常見(jiàn)的 if 判斷，例如使用 wx:if 這個(gè)屬性，那么就只有在后面的表達(dá)式為 true 的情況下才會(huì)顯示文本 a 大于 0

<view wx:if="{{a > 0}}">a 大于 0view>

(4) 三元運(yùn)算

三元運(yùn)算的應(yīng)用場(chǎng)景還是很多的（等式 ? : true情況，false的情況）

{{11 + 22 === 33 ? true : false}}
{{11 + 22 === 33 ? '正確' : '錯(cuò)誤'}}
{{a + b === c ? '等式成立' : '等式不成立'}}

三元補(bǔ)充：

通過(guò)在屬性中解析變量的方式，可以達(dá)到根據(jù)變量的值，來(lái)指定不同的 class名，以顯示不同的樣式

例如我們的 css 樣式是這樣的，iconfont 是我們共用的，所以直接寫(xiě)在屬性中就可以了，而究竟是用 icon-back 還是 icon-remove 就可以通過(guò)一個(gè)變量來(lái)操縱，例如我們下面的 isClick 就是在 js 里 data 中定義的一個(gè) 布爾類(lèi)型的變量

.iconfont {......}
.icon-back:before {......}
.icon-remove:before {......}

當(dāng) isClick 為 true 就執(zhí)行 class 就是這樣的 class="iconfont icon-remove" 為 false 就是用另一個(gè)，我們就可以通過(guò) 控制變量值來(lái)進(jìn)行不同的顯示

class="iconfont {{isClick ? 'icon-remove':'icon-back'}}"

看一下上述所有運(yùn)算的執(zhí)行結(jié)果（不含補(bǔ)充的結(jié)果）

(四) 列表循環(huán)（列表渲染）

(1) 模擬數(shù)據(jù)

依舊我們給一些模擬數(shù)據(jù)，一個(gè)是 person 這樣的對(duì)象內(nèi)部有一些屬性，還有一個(gè)就是 studentList 學(xué)生集合，其中有三個(gè)學(xué)生的數(shù)據(jù)

Page({
  data: {
    person:{
      pid: 1,
      name: "張三",
      age: 22,
      profession: "student"
    },
    studentList:[{
        sid:1,
        name:"湯姆",
        gender:"男"
      },{
        sid:2,
        name:"杰克",
        gender:"男"
      },{
        sid:3,
        name:"瑪麗",
        gender:"女"
      }
    ]
  },
})

如果我們接受到了后臺(tái)的一些集合或者數(shù)組等內(nèi)容，循環(huán)遍歷是一個(gè)非常常用的操作

(2) 正式使用

組件（標(biāo)簽）上使用 wx:for 就可以綁定一個(gè)數(shù)組或集合內(nèi)容，就可用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件

先舉個(gè)例子

    <view 
    wx:for="{{studentList}}" wx:for-item="item" wx:for-index="index" wx:key="sid">
    	{{index}} --- {{item.name}} 
    view>
view>

我們分別來(lái)解釋一下：

• wx:for ：數(shù)組或者對(duì)象

• wx:for-item ：循環(huán)項(xiàng)（數(shù)組或集合）的變量名稱(chēng)，同時(shí)一般默認(rèn)為 item

• wx:for-index ：循環(huán)項(xiàng)（數(shù)組或集合）的索引（下標(biāo)），同時(shí)一般默認(rèn)為 index

• wx:key ：綁定一個(gè)唯一的值，可以提高列表渲染的性能，可以簡(jiǎn)單理解為主鍵的概念，例如這里我傳入了 studentList 中不可能重復(fù)的值 sid

  • 如果你的數(shù)組只是一個(gè)普通的數(shù)組，例如 [11,22,65,23,3,6] 沒(méi)有所謂唯一的值，就可以使用 wx:key="*this" 即表示你的數(shù)組是一個(gè)普通的數(shù)組， *this 表示的是 item 本身

如果傳這個(gè) key 值，會(huì)有一個(gè)警告彈出

(3) 嵌套用法的補(bǔ)充說(shuō)明

• 如果你的循環(huán)只有一層，那么 wx:for-item="item" wx:for-index="index" 這兩個(gè)內(nèi)容實(shí)際上是可以省略的，小程序會(huì)自動(dòng)把這兩個(gè)內(nèi)容設(shè)置為 item 和 index

• 如果你的循環(huán)是一個(gè)嵌套的效果，那么切記一定 item 和 index 的值一定不要重復(fù)...

嵌套的正確寫(xiě)法

<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}}" wx:key="*this">
      {{i}} * {{j}} = {{i * j}}
    view>
  view>
view>

再舉一個(gè)例子（遍歷對(duì)象的所有屬性）：

    <view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="pid">
    {{key}} --- {{value}} 
    view>
view>

看一下執(zhí)行效果

(4) 循環(huán)（渲染）block標(biāo)簽

如果我們使用兩種不同的組件（標(biāo)簽）看看最終渲染出來(lái)的結(jié)果有什么區(qū)別呢？

方法一（view 標(biāo)簽）

<view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="pid">
    {{key}} --- {{value}} 
view>

• 結(jié)果一

<view> pid --- 1 view>
<view> name --- 張三 view>
<view> age --- 22 view>
<view> profession --- student view>

方法二（block 標(biāo)簽）

<block wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="pid">
    {{key}} --- {{value}} 
block>

• 結(jié)果二

pid --- 1 name --- 張三 age --- 22 profession --- studen

通過(guò)控制臺(tái)中 Wxml 界面，可以看到，只有在 view 組件下遍歷內(nèi)容時(shí)才真正的生成了 dom 結(jié)構(gòu)，而直接使用 block 則只是將內(nèi)容重復(fù)寫(xiě)了幾次，不會(huì)變成真正的dom元素

(五) 邏輯判斷（條件渲染）

(1) 用法

這塊理解沒(méi)什么難點(diǎn)，無(wú)非就是關(guān)于邏輯的幾種判斷，看一個(gè)例子就清楚了

說(shuō)明：isLogin 是在 js 中模擬的一個(gè)數(shù)據(jù)，分別賦予 true false 或者其他的 例如 null，會(huì)根據(jù)邏輯值顯示不同的內(nèi)容

<view wx:if="{{isLogin == true}}">已經(jīng)登錄，邏輯為 trueview>
<view wx:elif="{{isLogin == false}}">未登錄，邏輯為 falseview>
<view wx:else>不確定邏輯view>

(2) 補(bǔ)充 hidden

補(bǔ)充用法（hidden）：

通過(guò)上面的 if else 等可以控制組件例如 view 的顯示，而有一個(gè)屬性 hidden 同樣可以實(shí)現(xiàn)根據(jù)邏輯值控制組件的顯示

例如給 hidden 傳入一個(gè) false 就會(huì)顯示出來(lái)

<view hidden="{{false}}">不隱藏view>

(3) wx:if 和 hidden 選擇哪個(gè)

那么既然一定程度上都可以達(dá)到這種效果，我們選擇那個(gè)呢？

先來(lái)看一下

<view>---- 分界線(xiàn) -----view>
<view wx:if="{{false}}">if 隱藏view>
<view hidden="{{true}}">隱藏view>

看一下渲染出來(lái)的結(jié)構(gòu)，關(guān)于 wx:if 的那塊直接就沒(méi)有渲染出來(lái)了，只有 hidden 的那個(gè)，由此可以得出：

wx:if
hidden

所以，當(dāng)標(biāo)簽不總是切換顯示的時(shí)候，可以考慮先用 wx:if ，標(biāo)簽切換頻繁的時(shí)候用 hidden

(六) 模板

(1) 創(chuàng)建模板

模板的字面意思就是，一個(gè)可以應(yīng)用在多處，通用的一個(gè)版塊，如何去用呢？

使用 name 屬性，作為模板的名字。然后在