微信小程序 教程之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捕获鼠标滚轮事件代码
Dec 16 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
Vue实现多标签选择器
Nov 28 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 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
星际实力自我测试
2020/03/04 星际争霸
php提交表单发送邮件的方法
2015/03/20 PHP
可以将word转成html的js代码
2010/04/11 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
python多线程编程中的join函数使用心得
2014/09/02 Python
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
在Django的模型中添加自定义方法的示例
2015/07/21 Python
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
党员的自我评价范文
2014/01/02 职场文书
红旗团支部事迹材料
2014/01/27 职场文书
学习自我鉴定
2014/02/01 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
考试作弊检讨书
2014/10/21 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
小学三年级作文之写景
2019/11/05 职场文书
MySQL通过binlog恢复数据
2021/05/27 MySQL
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏
使用Redis实现分布式锁的方法
2022/06/16 Redis