微信小程序 WXML

作者: 前端的成长之路 | 来源:发表于2017-12-18 10:20 被阅读0次

WXML

WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件事件系统,可以构建出页面的结构。

用以下一些简单的例子来看看WXML具有什么能力:、

数据绑定

<!--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 可以在当前文件中使用目标文件定义的 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>

相关文章

网友评论

    本文标题:微信小程序 WXML

    本文链接:https://www.haomeiwen.com/subject/cqypwxtx.html