微信小程序 教程之WXML
更新時間：2016年10月18日 09:53:45 投稿：lqh
這篇文章主要介紹了微信小程序 教程WXML的相關(guān)資料,這里提供了簡單實例,需要的朋友可以參考下
系列文章：
微信小程序 教程之WXSS
微信小程序 教程之引用
微信小程序 教程之事件
微信小程序 教程之模板
微信小程序 教程之列表渲染
微信小程序 教程之條件渲染
微信小程序 教程之?dāng)?shù)據(jù)綁定
微信小程序 教程之WXML
WXML
WXML(WeiXin Markup Language)是MINA設(shè)計的一套標(biāo)簽語言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁面的結(jié)構(gòu)。
用以下一些簡單的例子來看看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
})
}
})
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
umi插件開發(fā)仿dumi項目實現(xiàn)基礎(chǔ)路由解析
這篇文章主要為大家介紹了umi插件開發(fā)仿dumi項目實現(xiàn)基礎(chǔ)路由解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了delete?語法的本質(zhì)深入解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了微信小程序 配置文件及配置文件的主要功能和注意事項的相關(guān)資料,需要的朋友可以參考下2016-12-12
這篇文章主要給大家分享的是JavaScript 的反射學(xué)習(xí)技巧，主要是區(qū)別在于所有的函數(shù)對象屬性過于復(fù)雜，而且額外增加可能會導(dǎo)致程序行為不合理，所以擴(kuò)展 Reflect 函數(shù)來專門對函數(shù)對象處理調(diào)用方法，構(gòu)造對象，獲取或者設(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)建對象常用設(shè)計模式工廠構(gòu)造函數(shù)及原型
本篇帶來你一定熟知的、用于創(chuàng)建對象的三種設(shè)計模式：工廠模式、構(gòu)造函數(shù)模式、原型模式，有需要的朋友可以借鑒參考下，希望能夠有所幫助2022-07-07
JS前端可擴(kuò)展的低代碼UI框架Sunmao使用詳解
這篇文章主要為大家介紹了JS前端可擴(kuò)展的低代碼UI框架Sunmao使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了JavaScript?history?對象詳解，history?對象表示當(dāng)前窗口首次使用以來用戶的導(dǎo)航歷史記錄。因為?history?是?window?的屬性，所以每個?window?都有自己的?history?對象，更多詳細(xì)內(nèi)容請參考下面文章內(nèi)容2021-11-11
強(qiáng)制設(shè)為首頁代碼...2006-06-06
這篇文章主要介紹了微信小程序左右滑動切換頁面詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下2017-02-02