WXML---微信开发文档
WXML
WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
用以下一些简单的例子来看看 WXML 具有什么能力:
数据绑定
<!--wxml-->
<view> {{message}} </view>
// page.js
Page({data: {message: 'Hello MINA!'}
})
列表渲染
<!--wxml-->
<view wx:for="{{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 </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'}}
})
具体的能力以及使用方式
一、数据绑定
WXML 中的动态数据均来自对应 Page 的 data。
(一)简单绑定
数据绑定使用 Mustache 语法(双大括号)将变量包起来,可以作用于:
1、内容
<view> {{ message }} </view>
Page({data: {message: 'Hello MINA!'}
})
2、组件属性(需要在双引号之内)
<view id="item-{{id}}"> </view>
Page({data: {id: 0}
})
3、控制属性(需要在双引号之内)
<view wx:if="{{condition}}"> </view>
Page({data: {condition: true}
})
4、关键字(需要在双引号之内)
true
:boolean 类型的 true,代表真值。
false
: boolean 类型的 false,代表假值。
<checkbox checked="{{false}}"> </checkbox>
特别注意:不要直接写 checked="false"
,其计算结果是一个字符串,转成 boolean 类型后代表真值。
(二)运算
可以在 {{}}
内进行简单的运算,支持的有如下几种方式:
1、三元运算
<view hidden="{{flag ? true : false}}"> Hidden </view>
2、算数运算
<view> {{a + b}} + {{c}} + d </view>
Page({data: {a: 1,b: 2,c: 3}
})
view中的内容为 3 + 3 + d
。
3、逻辑判断
<view wx:if="{{length > 5}}"> </view>
4、字符串运算
<view>{{"hello" + name}}</view>
Page({data:{name: 'MINA'}
})
5、数据路径运算
<view>{{object.key}} {{array[0]}}</view>
Page({data: {object: {key: 'Hello '},array: ['MINA']}
})
(三)组合
也可以在 Mustache 内直接进行组合,构成新的对象或者数组。
1、数组
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({data: {zero: 0}
})
最终组合成数组[0, 1, 2, 3, 4]
。
2、对象
<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({data: {a: 1,b: 2}
})
最终组合成的对象是 {for: 1, bar: 2}
也可以用扩展运算符 ...
来将一个对象展开
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({data: {obj1: {a: 1,b: 2},obj2: {c: 3,d: 4}}
})
最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}
。
如果对象的 key 和 value 相同,也可以间接地表达。
<template is="objectCombine" data="{{foo, bar}}"></template>
Page({data: {foo: 'my-foo',bar: 'my-bar'}
})
最终组合成的对象是 {foo: 'my-foo', bar:'my-bar'}
。
注意:上述方式可以随意组合,但是如有存在变量名相同的情况,后边的会覆盖前面,如:
<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
Page({data: {obj1: {a: 1,b: 2},obj2: {b: 3,c: 4},a: 5}
})
最终组合成的对象是 {a: 5, b: 3, c: 6}
。
注意: 花括号和引号之间如果有空格,将最终被解析成为字符串
<view wx:for="{{[1,2,3]}} ">{{item}}
</view>
等同于
<view wx:for="{{[1,2,3] + ' '}}">{{item}}
</view>
二、列表渲染
1、wx:for
在组件上使用 wx:for
控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index
,数组当前项的变量名默认为 item
<view wx:for="{{array}}">{{index}}: {{item.message}}
</view>
Page({data: {array: [{message: 'foo',}, {message: 'bar'}]}
})
使用 wx:for-item
可以指定数组当前元素的变量名,
使用 wx:for-index
可以指定数组当前下标的变量名:
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">{{idx}}: {{itemName.message}}
</view>
wx:for
也可以嵌套,下边是一个九九乘法表
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"><view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"><view wx:if="{{i <= j}}">{{i}} * {{j}} = {{i * j}}</view></view>
</view>
2、block wx:for
类似 block wx:if
,也可以将 wx:for
用在<block/>
标签上,以渲染一个包含多节点的结构块。例如:
<block wx:for="{{[1, 2, 3]}}"><view> {{index}}: </view><view> {{item}} </view>
</block>
3、wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 input 中的输入内容,switch 的选中状态),需要使用 wx:key
来指定列表中项目的唯一的标识符。
wx:key
的值以两种形式提供
- 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
- 保留关键字
*this
代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字。
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
如不提供 wx:key
,会报一个 warning
, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
示例代码:
<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button><switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>
Page({data: {objectArray: [{id: 5, unique: 'unique_5'},{id: 4, unique: 'unique_4'},{id: 3, unique: 'unique_3'},{id: 2, unique: 'unique_2'},{id: 1, unique: 'unique_1'},{id: 0, unique: 'unique_0'},],numberArray: [1, 2, 3, 4]},switch: function(e) {const length = this.data.objectArray.lengthfor (let i = 0; i < length; ++i) {const x = Math.floor(Math.random() * length)const y = Math.floor(Math.random() * length)const temp = this.data.objectArray[x]this.data.objectArray[x] = this.data.objectArray[y]this.data.objectArray[y] = temp}this.setData({objectArray: this.data.objectArray})},addToFront: function(e) {const length = this.data.objectArray.lengththis.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)this.setData({objectArray: this.data.objectArray})},addNumberToFront: function(e){this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)this.setData({numberArray: this.data.numberArray})}
})
注意:
当 wx:for
的值为字符串时,会将字符串解析成字符串数组
<view wx:for="array">{{item}}
</view>
等同于
<view wx:for="{{['a','r','r','a','y']}}">{{item}}
</view>
(三)条件渲染
1、wx:if
在框架中,使用 wx:if=""
来判断是否需要渲染该代码块:
<view wx:if="{{condition}}"> True </view>
也可以用 wx:elif
和 wx:else
来添加一个 else 块:
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
2、block wx:if
因为 wx:if
是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/>
标签将多个组件包装起来,并在上边使用 wx:if
控制属性。
<block wx:if="{{true}}"><view> view1 </view><view> view2 </view>
</block>
注意: <block/>
并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
3、wx:if
vs hidden
因为 wx:if
之中的模板也可能包含数据绑定,所以当 wx:if
的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。
同时 wx:if
也是惰性的,如果在初始渲染条件为 false
,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。
相比之下,hidden
就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。
一般来说,wx:if
有更高的切换消耗而 hidden
有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden
更好,如果在运行时条件不大可能改变则 wx:if
较好。
(四)模板
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
1、定义模板
使用 name 属性,作为模板的名字。然后在<template/>
内定义代码片段,如:
<!--index: intmsg: stringtime: string
-->
<template name="msgItem"><view><text> {{index}}: {{msg}} </text><text> Time: {{time}} </text></view>
</template>
2、使用模板
使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如:
<template is="msgItem" data="{{...item}}"/>
Page({data: {item: {index: 0,msg: 'this is a template',time: '2016-09-15'}}
})
is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板:
<template name="odd"><view> odd </view>
</template>
<template name="even"><view> even </view>
</template><block wx:for="{{[1, 2, 3, 4, 5]}}"><template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>
3、模板的作用域
模板拥有自己的作用域,只能使用 data 传入的数据以及模板定义文件中定义的 <wxs />
模块。
(四)引用
WXML 提供两种文件引用方式import
和include
。
1、import
import
可以在该文件中使用目标文件定义的template
,如:
在 item.wxml 中定义了一个叫item
的template
:
<!-- item.wxml -->
<template name="item"><text>{{text}}</text>
</template>
在 index.wxml 中引用了 item.wxml,就可以使用item
模板:
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
2、import 的作用域
import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。
如:C import B,B import A,在C中可以使用B定义的template
,在B中可以使用A定义的template
,但是C不能使用A定义的template
。
<!-- A.wxml -->
<template name="A"><text> A template </text>
</template>
<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B"><text> B template </text>
</template>
<!-- C.wxml -->
<import src="b.wxml"/>
<template is="A"/> <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>
3、include
include
可以将目标文件除了 <template/>
<wxs/>
外的整个代码引入,相当于是拷贝到 include
位置,如:
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>
参考来自微信开发文档:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/
WXML---微信开发文档相关推荐
- 企业微信开发文档接口API获取accesstoken和读取成员内部员工
企业微信开发文档接口API获取accesstoken和读取成员内部员工 <?php /*** 企业微信 API*/ namespace app\common;use think\Config; ...
- 【微信小程序】微信开发文档摘要
此篇文章用于微信小程序的开发文档摘要,主要记录概念性的,或者说理解性的东西,对于那些硬性代码,反而不做太多汇总. 一.微信小程序简介 小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取 ...
- 微信开发文档笔记整理(一)
2019独角兽企业重金招聘Python工程师标准>>> 1.微信的服务器配置说明:(用户发给公众号的消息以及开发者需要的事件推送,将被微信转发到该URL)验证算法如下: 微信 ...
- 支付宝和微信开发文档
支付宝 https://openhome.alipay.com/developmentDocument.htm 微信 https://pay.weixin.qq.com/index.php/cor ...
- 微信小程序开发文档及文件上传示例(JAVA)
微信小程序开发文档及文档上传示例 一.什么是微信小程序 小程序是一种无需下载安装,即可使用的手机应用.只需要扫描二维码,或是搜一搜,就能立即使用. 与APP不同的是,小程序无需下载安装.无需卸载.用完 ...
- 微信小程序 开发文档
官方开发文档: 小程序公众平台 小程序开发者指南 小程序开发者文档 学习资源: 微信:官方入门教程 微信:WeUI 是一套同微信原生视觉体验一致的基础样式库 微信:微信小程序示例 视频: 学堂在线:学 ...
- 知乎爆赞!4504页《微信小程序零基础入门开发文档》+《小程序实战笔记》,你学废了吗?
前言 微信小程序作为近几年"微服务"的杰出代表,应用十分广泛.小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验 ...
- 扒一扒坑人的“微信支付”SDK开发文档
在开发微信支付的的时候,想必大家也遇到了这个坑人的事件,大家不要抱怨,腾讯的文档是除了名的坑人开发文档,今天闲来扒一下"微信支付"的文档,后面我再给大家扒一下"现金红包& ...
- 微信支付(商户平台)卡券开发文档
文章目录 简介 代金券 代金券分类 预充值代金券 免充值代金券 发券渠道 二维码发券 营销活动发券 高级API接口发券 核销方式 支付中自动核销券 操作指引 开发前准备 开通代金券权限 下载API证书 ...
最新文章
- Android证书通过keytool获取sha1、sha256、MD5
- 如何成为领袖? 学习任正非小沃森郭士纳
- Parallel Programming-使用CancellationTokenSource调度并行运行的Task
- 从一个提问引发到你是怎么看待编程语言是一种工具这句话的?【笔记自用】
- Flow 常用知识点整理
- 外媒:全球芯片短缺已影响洗衣机和烤面包机等小家电生产
- vs2010转移ipch和sdf的位置
- 误删数据库怎么办?mysql 回滚,撤销操作,恢复数据
- C++ 迭代器 删除(erase)插入(insert)之后失效
- iphone6s 10.2系统越狱及遇到的问题解决方案
- SQL Server 2008 R2的完全卸载
- 计算机网络-域名与IP地址详解
- KEGG 下载 Pathway 通路数据
- 审计工作存在的难点和问题_审计工作中存在的问题及解决办法
- 【PS3】二之国 白色圣灰的女王 日本制造的视觉效果
- HTML、CSS学习总结
- 3D游戏建模基本流程
- SDUT 3069 为了相同的前缀-跳楼梯
- libnet编译linux,Linux 网络编程—— libnet 使用指南
- 考研英语 - word-list-46
热门文章
- Android(安卓)高仿微信朋友圈九宫格列表
- php获取img标签src,使用PHP获取img src
- 网络安全框架:OWASP概述、优势、实践和局限性分析
- 大厂历年的网络安全面试真题总结(附答案)
- 懒猫社长新便民工程119模式升级:践行“便利店+”战略,推进多元化产业链构建
- 友盟创始人蒋凡---谷歌中国地图工程师
- 基于AList实现网盘挂载和WebDAV本地挂载网盘
- 微信小程序van-tabs动态添加标签
- 【转载,整理】Linux模拟试题及答案(全)+经典Linux系统工程师面试题(附答案)
- 小服装店什么收银系统好用呢?