微信小程序 教程之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 相关文章推荐
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
自己封装的常用javascript函数分享
Jan 07 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
区分vue-router的hash和history模式
Oct 03 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
Terran历史背景
2020/03/14 星际争霸
基于CI框架的微信网页授权库示例
2016/11/25 PHP
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
常见的python正则用法实例讲解
2016/06/21 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
python实现简单坦克大战
2020/03/27 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
Java中实现多态的机制
2015/08/09 面试题
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
幼儿运动会邀请函
2014/01/17 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
优秀员工演讲稿
2019/06/21 职场文书
React列表栏及购物车组件使用详解
2021/06/28 Javascript
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫