无遮无挡三级动态图,熟女人妻高清一区二区三区,午夜精品一区二区三区 ,色吧成人网,无码爆乳护士让我爽

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

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

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

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

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

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

2. 列表渲染

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

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

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

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

3. 條件渲染

在小程序開發(fā)過程中，我們也常常會根據(jù)不同的條件來顯示/隱藏不同的內(nèi)容。通過WXML提供的條件判斷功能，我們可以輕松實現(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'
  }
})

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

4. 模板

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

<!--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'}
  }
})

以上代碼會輸出三個名字不同的員工信息。

5. 事件

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