WXML(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