微信小程序 教程之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 相关文章推荐
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 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
聊天室php&amp;mysql(二)
2006/10/09 PHP
超级简单的php+mysql留言本源码
2009/11/11 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
PHP 实现缩略图
2021/03/09 PHP
一起来写段JS drag拖动代码
2010/12/09 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
JS hashMap实例详解
2016/05/26 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
浅谈js获取ModelAndView值的问题
2018/03/28 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
详解python while 函数及while和for的区别
2018/09/07 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
Django框架表单操作实例分析
2019/11/04 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
台湾旅游网站:灿星旅游
2018/10/11 全球购物
妈妈的账单教学反思
2014/02/06 职场文书
铲车司机岗位职责
2014/03/15 职场文书
公司授权委托书
2014/04/04 职场文书
2014年中秋寄语
2014/08/11 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
奖励通知
2015/04/22 职场文书
新教师教学工作总结
2015/08/14 职场文书
教师教育心得体会
2016/01/19 职场文书
SQL Server中搜索特定的对象
2022/05/25 SQL Server