微信小程序 WXML

我們的小程序開發(fā)公司致力于為企業(yè)構(gòu)建優(yōu)質(zhì)的小程序，而WXML是其中必不可少的一部分。

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

通過(guò)WXML的數(shù)據(jù)綁定功能，我們可以將Page中的data數(shù)據(jù)動(dòng)態(tài)的呈現(xiàn)在頁(yè)面上。例如：

<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

這段代碼會(huì)將Page中data里定義的message變量渲染到頁(yè)面的<view>標(biāo)簽內(nèi)，頁(yè)面展示的內(nèi)容是：Hello MINA!

2. 列表渲染

列表渲染在構(gòu)建小程序時(shí)也經(jīng)常用到，通常結(jié)合Page中的Array數(shù)據(jù)來(lái)使用。例如：

<view wx:for-items="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

這段代碼會(huì)依次輸出data.array里的每個(gè)元素，即1、2、3、4、5。WXML還提供了豐富的控制選項(xiàng)，可以結(jié)合業(yè)務(wù)需要進(jìn)行定制。

3. 條件渲染

在小程序開發(fā)過(guò)程中，我們也常常會(huì)根據(jù)不同的條件來(lái)顯示/隱藏不同的內(nèi)容。通過(guò)WXML提供的條件判斷功能，我們可以輕松實(shí)現(xiàn)這一需求。

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

以上代碼會(huì)根據(jù)page.data.view的值來(lái)展示不同的內(nèi)容。

4. 模板

為了方便重復(fù)使用相似的多個(gè)組件，WXML還提供了模板功能。定義模板需要使用<template>標(biāo)簽，調(diào)用模板可使用<template is="{{templateName}}" data="{{...data}}" />語(yǔ)法。

<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

以上代碼會(huì)輸出三個(gè)名字不同的員工信息。

5. 事件

小程序中的事件系統(tǒng)是WXML最為重要的一個(gè)組成部分，幾乎所有的

<本文由himall原創(chuàng)，商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)標(biāo)明：himall原創(chuàng)>