前端资源网 - w3h5WXML（WeiXin Markup Language）
写法：<标签名 属性名="属性名"> </标签名>
注意：小程序是有大小写敏感的，书写的时候注意区分大小写
四个语言特性：
1.数据绑定、组件属性：Mustache
数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：
wxml：
<!--index.wxml-->
<view>
<text>{{message}}</text>
</view>js：
// index.js
page({
data:{
message: "Hello world"
}
})运行结果：
data绑定：
wxml：
<!--index.wxml-->
<view>
<text data-name="{{theName}}"></text>
</view>js：
// index.js
page({
data:{
theName: "Jack"
}
})运行结果：是在控制台查看
组件的属性：
id：组件的唯一标识
class：组件的样式类
style：组件的内联样式
hidden：组件是否显示
data-*：自定义属性
bind*/catch*：组件的事件
2.列表渲染
index：当前元素在数组的下标
items：数组中的当前元素
wx:key：唯一标识符
wx:for：在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。
wxml：
<!--index.wxml-->
<view>列表渲染：</view>
<view>
<block wx:for="{{items}}" wx:for-item="item" wx:key="index">
<view>{{index}}:{{item.name}}</view>
</block>
</view>js：
// index.js
Page({
data: {
items:[
{ name: "商品A" },
{ name: "商品B" },
{ name: "商品C" },
{ name: "商品D" }
]
},
})运行结果：
3.条件渲染
wx:if / wx:elif / wx:else
Match.random ：0-1随机数
Match.floor ：向下去整
在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：
wxml：
<!--index.wxml-->
<view>条件渲染：</view>
<view>我帅吗？</view>
<view wx:if="{{condition === 1}}">
A:帅
</view>
<view wx:if="{{condition === 2}}">
B:很帅
</view>
<view wx:if="{{condition === 3}}">
C:非常帅
</view>js：
// index.js
Page({
data: {
condition: Math.floor(Math.random()*3+1)
},
})也可以使用 hidden 控制元素的现实和隐藏：
wxml：
<!--index.wxml-->
<view hidden="{{isHidden}}">
我是谁？
</view>js：
// index.js
Page({
data: {
isHidden:true
},
})isHidden 变量是布尔值，通过 true 和 false 来控制元素的显隐，这里的 false 就是 hidden="false" 所以元素是显示的。
最终运行结果：
wx:if 的 hidden 的区别：
因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
4.模板引用
模板：WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
定义模板：
使用 name 属性，作为模板的名字。然后在 <template/> 内定义代码片段，如：
<!--index.wxml-->
<text>定义模板</text>
<template name="tempItem">
<view>
<view>收件人：{{name}}</view>
<view>手机号：{{phone}}</view>
<view>收件人：{{address}}</view>
</view>
</template>使用模板：使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：
<!--index.wxml-->
<text>使用模板</text>
<template is="tempItem" data="{{...item}}"></template>js:
// index.js
Page({
data: {
item:{
name: "张三",
phone: "18888888888",
address: "中国"
}
},
})运行结果：
模板引用一般有以下两种方式：
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"/>
运行结果：
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>
运行结果：
WXSS
尺寸：rpx
外联样式导入：@import
在 index.wxml 写一个 .container 标签，在 index.wxss 文件中 给 .container 设置字体颜色为 红色 ，引入 assets.wxss 文件，在 assets.wxss文件中给 .container 设置一个灰色的边框。
<!--index.wxml-->
<view>WXSS</view>
<view class='container'>
Hello World!
</view>
<style>
/**index.wxss**/
@import './assets.wxss';
.container{
color: red;
}
/** assets.wxss **/
.container{
border-bottom: 2px solid #DDD;
}可以看到两个文件的设置都起效了。
选择器：
!important ：权重无穷，其实并不是选择器，是权重提升。
style ：内联选择器，权重 1000
#id ：id选择器，权重 100
.class ：class选择器，权重 10
element ：元素择器，权重 1
未经允许不得转载：前端资源网 - w3h5 » 小程序学习笔记 数据绑定、条件渲染、模板引用（8.11）