微信小程序> WXML微信小程序的框架设计的标签语言

WXML微信小程序的框架设计的标签语言

浏览量:2491 时间: 来源:Tiger0817a

WXML

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

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

数据绑定

!--wxml--view {{message}} /view
// page.jsPage({  data: {    message: 'Hello MINA!'  }})

列表渲染

!--wxml--view wx:for="{{array}}" {{item}} /view
// page.jsPage({  data: {    array: [1, 2, 3, 4, 5]  }})

条件渲染

!--wxml--view wx:if="{{view == 'WEBVIEW'}}" WEBVIEW /viewview wx:elif="{{view == 'APP'}}" APP /viewview wx:else="{{view == 'MINA'}}" MINA /view
// page.jsPage({  data: {    view: 'MINA'  }})

模板

!--wxml--template name="staffName"  view    FirstName: {{firstName}}, LastName: {{lastName}}  /view/templatetemplate is="staffName" data="{{...staffA}}"/templatetemplate is="staffName" data="{{...staffB}}"/templatetemplate is="staffName" data="{{...staffC}}"/template
// page.jsPage({  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({      count: this.data.count + 1    })  }})

具体的能力以及使用方式在以下章节查看:

数据绑定、列表渲染、条件渲染、模板、事件、引用

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎