WXML(WeiXin Markup Language)是MINA設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。
用以下一些簡(jiǎn)單的例子來看看WXML具有什么能力：

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

<!--wxml-->
<text> {{message}} </view>
// page.js
Page({
 data: {
 message: 'Hello MINA!'
 }
})

列表渲染

<!--wxml-->
<view wx:for-items="{{array}}"> {{item}} </view>
// page.js
Page({
 data: {
 array: [1, 2, 3, 4, 5]
 }
})

條件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA IS NOT APP </view>
// page.js
Page({
 data: {
 view: 'MINA'
 }
})

模板

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

事件

<view bindtap="add"> {{count}} </view>
Page({
 data: {
 count: 1
 },
 add: function(e) {
 this.setData({
  data: this.data.count + 1
 })
 }
})

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

umi插件開發(fā)仿dumi項(xiàng)目實(shí)現(xiàn)基礎(chǔ)路由解析
這篇文章主要為大家介紹了umi插件開發(fā)仿dumi項(xiàng)目實(shí)現(xiàn)基礎(chǔ)路由解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
delete?語(yǔ)法的本質(zhì)深入解析
這篇文章主要為大家介紹了delete?語(yǔ)法的本質(zhì)深入解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
微信小程序配置文件詳細(xì)介紹
這篇文章主要介紹了微信小程序配置文件及配置文件的主要功能和注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下
2016-12-12
JavaScript 反射學(xué)習(xí)技巧
這篇文章主要給大家分享的是JavaScript 的反射學(xué)習(xí)技巧，主要是區(qū)別在于所有的函數(shù)對(duì)象屬性過于復(fù)雜，而且額外增加可能會(huì)導(dǎo)致程序行為不合理，所以擴(kuò)展 Reflect 函數(shù)來專門對(duì)函數(shù)對(duì)象處理調(diào)用方法，構(gòu)造對(duì)象，獲取或者設(shè)置屬性等相關(guān)操作。下面一起進(jìn)入文章內(nèi)容吧
2021-10-10
WebAssembly增強(qiáng)前端應(yīng)用技巧詳解
這篇文章主要為大家介紹了WebAssembly增強(qiáng)前端應(yīng)用技巧示例詳解，<BR>有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
JS創(chuàng)建對(duì)象常用設(shè)計(jì)模式工廠構(gòu)造函數(shù)及原型
本篇帶來你一定熟知的、用于創(chuàng)建對(duì)象的三種設(shè)計(jì)模式：工廠模式、構(gòu)造函數(shù)模式、原型模式，有需要的朋友可以借鑒參考下，希望能夠有所幫助
2022-07-07
JS前端可擴(kuò)展的低代碼UI框架Sunmao使用詳解
這篇文章主要為大家介紹了JS前端可擴(kuò)展的低代碼UI框架Sunmao使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
JavaScript?history?對(duì)象詳解
這篇文章主要介紹了JavaScript?history?對(duì)象詳解，history?對(duì)象表示當(dāng)前窗口首次使用以來用戶的導(dǎo)航歷史記錄。因?yàn)?history?是?window?的屬性，所以每個(gè)?window?都有自己的?history?對(duì)象，更多詳細(xì)內(nèi)容請(qǐng)參考下面文章內(nèi)容
2021-11-11
強(qiáng)制設(shè)為首頁(yè)代碼
強(qiáng)制設(shè)為首頁(yè)代碼...
2006-06-06
微信小程序左右滑動(dòng)切換頁(yè)面詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序左右滑動(dòng)切換頁(yè)面詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2017-02-02