位置:首页 > 小程序 >

WXML模板属性详细说明

字号+ 作者:micloud 来源:www.seoalphas.com 2018-04-21 11:34 浏览量:1900

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

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


【数据绑定】

<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})


【列表渲染】

<!--wxml-->
<view wx:for="{{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 </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({
      count: this.data.count + 1
    })
  }
})


1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • wx.canIUse(String)-判断小程序的API,回调,参数,组件等是否在当前版本可用

    wx.canIUse(String)-判断小程序的API,回调,参数,组件等是否在当前版本可用

    浏览次数:19986

  • 小程序view内容不换行

    小程序view内容不换行

    浏览次数:11982

  • 小程序不存在页面处理 即404页面

    小程序不存在页面处理 即404页面

    浏览次数:8529

  • 小程序获取用户手机号操作代码示例

    小程序获取用户手机号操作代码示例

    浏览次数:7056

网友点评
评论区域