微信小程序 教程之WXML

 更新时间:2016年10月18日 09:53:45   投稿:lqh  
这篇文章主要介绍了微信小程序 教程WXML的相关资料,这里提供了简单实例,需要的朋友可以参考下

系列文章:

微信小程序 教程之WXSS
微信小程序 教程之引用
微信小程序 教程之事件
微信小程序 教程之模板
微信小程序 教程之列表渲染
微信小程序 教程之条件渲染
微信小程序 教程之数据绑定
微信小程序 教程之WXML

WXML

WXML(WeiXin Markup Language)是MINA设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
用以下一些简单的例子来看看WXML具有什么能力:

数据绑定

<!--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
 })
 }
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • JS 中Json字符串+Cookie+localstorage

    JS 中Json字符串+Cookie+localstorage

    这篇文章主要介绍了JS 中Json字符串+Cookie+localstorage,Json主要用于前后端交互,是一种数据格式,相较于Xml,使用起来更加便捷,下面文章将对他们详细介绍,需要的朋友可以参考一下
    2021-12-12
  • js解决移动端滚动穿透问题方案详解

    js解决移动端滚动穿透问题方案详解

    这篇文章主要为大家介绍了js解决移动端滚动穿透问题方案详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • Evil.js项目源码解读

    Evil.js项目源码解读

    这篇文章主要为大家介绍了最近火爆全网的 Evil.js 源码解读,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • electron创建新窗口模态框并实现主进程传值给子进程

    electron创建新窗口模态框并实现主进程传值给子进程

    这篇文章主要为大家介绍了electron创建新窗口模态框并实现主进程传值给子进程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • 超强图片数量上传无限制

    超强图片数量上传无限制

    [绿色]超强图片数量上传无限制...
    2006-06-06
  • 微信小程序 form组件详解

    微信小程序 form组件详解

    这篇文章主要介绍了微信小程序 form组件详解的相关资料,需要的朋友可以参考下
    2016-10-10
  • Proxy的不可变数据优点及使用详解

    Proxy的不可变数据优点及使用详解

    这篇文章主要为大家介绍了Proxy的不可变数据优点及使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • svgicon组件使用方法示例详解

    svgicon组件使用方法示例详解

    这篇文章主要为大家介绍了svgicon组件使用方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • JavaScript设计模式之命令模式和状态模式详解

    JavaScript设计模式之命令模式和状态模式详解

    这篇文章主要为大家介绍了JavaScript设计模式之命令模式和状态模式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 微信小程序中setInterval的使用方法

    微信小程序中setInterval的使用方法

    这篇文章主要介绍了微信小程序中setInterval的使用方法的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-09-09

最新评论