微信小程序 教程之WXML
更新時(shí)間：2016年10月18日 09:53:45 投稿：lqh
這篇文章主要介紹了微信小程序 教程WXML的相關(guān)資料,這里提供了簡單實(shí)例,需要的朋友可以參考下
系列文章：
微信小程序 教程之WXSS
微信小程序 教程之引用
微信小程序 教程之事件
微信小程序 教程之模板
微信小程序 教程之列表渲染
微信小程序 教程之條件渲染
微信小程序 教程之?dāng)?shù)據(jù)綁定
微信小程序 教程之WXML
WXML
WXML(WeiXin Markup Language)是MINA設(shè)計(jì)的一套標(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
})
}
})
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
JS?中Json字符串+Cookie+localstorage
這篇文章主要介紹了JS?中Json字符串+Cookie+localstorage，Json主要用于前后端交互，是一種數(shù)據(jù)格式，相較于Xml，使用起來更加便捷，下面文章將對(duì)他們?cè)敿?xì)介紹,需要的朋友可以參考一下2021-12-12
這篇文章主要為大家介紹了js解決移動(dòng)端滾動(dòng)穿透問題方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要為大家介紹了最近火爆全網(wǎng)的?Evil.js?源碼解讀，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
electron創(chuàng)建新窗口模態(tài)框并實(shí)現(xiàn)主進(jìn)程傳值給子進(jìn)程
這篇文章主要為大家介紹了electron創(chuàng)建新窗口模態(tài)框并實(shí)現(xiàn)主進(jìn)程傳值給子進(jìn)程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
[綠色]超強(qiáng)圖片數(shù)量上傳無限制...2006-06-06
這篇文章主要介紹了微信小程序 form組件詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
Proxy的不可變數(shù)據(jù)優(yōu)點(diǎn)及使用詳解
這篇文章主要為大家介紹了Proxy的不可變數(shù)據(jù)優(yōu)點(diǎn)及使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要為大家介紹了svgicon組件使用方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
JavaScript設(shè)計(jì)模式之命令模式和狀態(tài)模式詳解
這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式之命令模式和狀態(tài)模式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了微信小程序中setInterval的使用方法的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09