微信小程序 WXML

WXML

WXML(WeiXin Markup Language)是框架設(shè)計的一套標(biāo)簽語言,結(jié)合基礎(chǔ)組件事件系統(tǒng),可以構(gòu)建出頁面的結(jié)構(gòu)。

用以下一些簡單的例子來看看WXML具有什么能力:、

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

<!--wxml-->

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

//page.js

page({

? ? data:{

? ??????????message:'Hello MINA!'

? ? ? ? ? ? }

})

列表渲染

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

//page.js

Page({

data: {

????????array: [1,2,3,4,5]

????????}

})

條件渲染

<view ?wx:if = "{{view=='WEBVIEW'}}">WEBVIEW </view>

<view wx:elif=“{{view == 'app'}}”>app</view>

<view ?wx:else = "{{mina}}">mina</view>

//page.js

page({

? ? data:{

????????????view:'mina'

? ? ? ? ? ? }

})

模板

<template name =" staffName">

????<view>?

? ? ? ? Firstname:{{firstname:'xiaoming'}},Lastname:{{lastname:'xiaohong'}}

? ? </view>

</template>

直接引用:<template ?is="staffName" data = "{{...staffA}}"></template>

//page.js

page({

? ? data:{

? ? ? ? ? ? staffA:{firstname:'xiaowei',lastname:'xiaowang'},

????????????staffB:{firstname:'xiaolu',lastname:'honhhuang'},

? ? ? ? ? ? staffC:{firsrtname:'xiaohuang',lastname:'xiaoping'}

}

})

WXML 引用

import 可以在當(dāng)前文件中使用目標(biāo)文件定義的 template

在 item.wxml 中定義了一個 item 的 template

<!--item.wxml-->

<template name="item">

? ? ? ? <text>{{text}}</text>

</template>

在 index.wxml 中引用 item.wxml,就可以使用 item 的模板

<import src="item.wxml">

<template is="item" data="{{text:"aa2"}}"><template>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容