微信小程序 教程之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高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
玩转方法:call和apply
May 08 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
VUE递归树形实现多级列表
Jul 15 Vue.js
原生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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
PHP函数引用返回的实例详解
2016/09/11 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
JS 文件传参及处理技巧分析
2010/05/13 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
pytest中文文档之编写断言
2019/09/12 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
opencv3/C++ 平面对象识别&amp;透视变换方式
2019/12/11 Python
学习Python列表的基础知识汇总
2020/03/10 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
大学本科毕业生求职信范文
2013/12/18 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
检讨书怎么写?
2019/06/21 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js