微信小程序 教程之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
 })
 }
})

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

相关文章

  • umi插件开发仿dumi项目实现基础路由解析

    umi插件开发仿dumi项目实现基础路由解析

    这篇文章主要为大家介绍了umi插件开发仿dumi项目实现基础路由解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • delete 语法的本质深入解析

    delete 语法的本质深入解析

    这篇文章主要为大家介绍了delete 语法的本质深入解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 微信小程序 配置文件详细介绍

    微信小程序 配置文件详细介绍

    这篇文章主要介绍了微信小程序 配置文件及配置文件的主要功能和注意事项的相关资料,需要的朋友可以参考下
    2016-12-12
  • JavaScript 反射学习技巧

    JavaScript 反射学习技巧

    这篇文章主要给大家分享的是JavaScript 的反射学习技巧,主要是区别在于所有的函数对象属性过于复杂,而且额外增加可能会导致程序行为不合理,所以扩展 Reflect 函数来专门对函数对象处理调用方法,构造对象,获取或者设置属性等相关操作。下面一起进入文章内容吧
    2021-10-10
  • WebAssembly增强前端应用技巧详解

    WebAssembly增强前端应用技巧详解

    这篇文章主要为大家介绍了WebAssembly增强前端应用技巧示例详解,<BR>有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • JS创建对象常用设计模式工厂构造函数及原型

    JS创建对象常用设计模式工厂构造函数及原型

    本篇带来你一定熟知的、用于创建对象的三种设计模式:工厂模式、构造函数模式、原型模式,有需要的朋友可以借鉴参考下,希望能够有所帮助
    2022-07-07
  • JS前端可扩展的低代码UI框架Sunmao使用详解

    JS前端可扩展的低代码UI框架Sunmao使用详解

    这篇文章主要为大家介绍了JS前端可扩展的低代码UI框架Sunmao使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • JavaScript history 对象详解

    JavaScript history 对象详解

    这篇文章主要介绍了JavaScript history 对象详解,history 对象表示当前窗口首次使用以来用户的导航历史记录。因为 history 是 window 的属性,所以每个 window 都有自己的 history 对象,更多详细内容请参考下面文章内容
    2021-11-11
  • 强制设为首页代码

    强制设为首页代码

    强制设为首页代码...
    2006-06-06
  • 微信小程序左右滑动切换页面详解及实例代码

    微信小程序左右滑动切换页面详解及实例代码

    这篇文章主要介绍了微信小程序左右滑动切换页面详解及实例代码的相关资料,需要的朋友可以参考下
    2017-02-02

最新评论