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