微信小程序 教程之WXML


Posted in Javascript onOctober 18, 2016

系列文章:

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

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

Javascript 相关文章推荐
类似框架的js代码
Nov 09 Javascript
使用新的消息弹出框blackbirdjs
Oct 16 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
原生JS实现匀速图片轮播动画
Oct 18 #Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 #Javascript
原生js实现网易轮播图效果
Apr 10 #Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 #Javascript
JSON对象 详解及实例代码
Oct 18 #Javascript
简易的JS计算器实现代码
Oct 18 #Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 #Javascript
You might like
模仿OSO的论坛(一)
2006/10/09 PHP
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
php图片裁剪函数
2018/10/31 PHP
10个实用的脚本代码工具
2010/05/04 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
python根据日期返回星期几的方法
2015/07/06 Python
《Python学习手册》学习总结
2018/01/17 Python
pandas中去除指定字符的实例
2018/05/18 Python
Python WEB应用部署的实现方法
2019/01/02 Python
Python多项式回归的实现方法
2019/03/11 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
python 负数取模运算实例
2020/06/03 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
材料采购员岗位职责
2013/12/17 职场文书
创业资金计划书
2014/02/06 职场文书
开业主持词
2014/03/21 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
留学生求职信
2014/06/03 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
蜗居观后感
2015/06/11 职场文书