本节知识点
- WXML
- WXSS
WXML
WXML是框架设计的一套标签语言。可以构建出页面的结构。
数据绑定
<!--wxml-->
<view>{{message}}</view>
然后在逻辑层
//page.js
Page({
data:{
message:"Hello!"
}
})
循环渲染
<!--wxml-->
<view wx:for="{{array}}">{{item}}</view>
逻辑层代码
Page({
data:{
array:[1,2,3,4,5]
}
})
条件渲染
<!--wxml-->
<view wx:if="{{view =='app'}}">APP</view>
<view wx:else="{{view == 'MINA'}}"></view>
逻辑层
Page({
data:{
view:'MINA'
}
})
模板引擎
<!--head.wxml-->
<template name = "staffName">
<view>
FirstName:{{firstName}},LastName:{{lastName}}
</view>
</template>
<!--使用页面-->
<import src="../template/head.wxml"/>
<template is="staffName" data ="{{staffA}}"></template>
page.js使用
// 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({
count: this.data.count + 1
})
}
})
数据绑定
wxml中的动态数据均来自Page中的data
简单绑定
数据绑定使用双大括号将变量包起来，可以作用于数据
内容
<view>{{message}}</view>
绑定的数据
Page({
data:{
message:"Hello"
}
})
组件属性(需要在双括号里)
<view id="item-{{id}}"></view>
逻辑层
Page({
data:{
id:0
}
})
控制属性(需要在双引号之内)
<view wx:if = "{{condition}}"></view>
逻辑层
Page({
data:{
condition:true
}
})
关键字(需要在双引号之内)
true : boolean 类型的true ，代表真值
false: boolean 类型的false，代表假值
<checkbox checked = "{{false}}"></checkbox>
特别注意:不要直接写checked = "false",其计算结果是一个字符串，转成BOOLEAN类型后代表真值。
运算
可以在{{}}内进行简单的运算，支持方式有如下几种:
三元运算
<view hidden = "{{flag?true:false}}">Hidden</view>
算数运算
<view>{{a+b}}+{{c}}+d </view>
逻辑层
Page({
data:{
a:1,
b:2,
c:3
}
})
view中的内容为3+3+d
逻辑判断
<view wx:if = "{{length>5}}"></view>
字符串运算
<view>{{"hello"+name}}</view>
逻辑层
Page({
data:{
name:'MINA'
}
})
组合
数组
<view wx:for="{{[zero,1,2,3,4]}}">{{item}}</view>
逻辑层
Page({
data:{
zero:0
}
})
所以最终的组合就是[0,1,2,3,4]
列表渲染
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>
事件分类
事件分为冒泡事件和非冒泡事件
- 冒泡事件:当一个组件上的事件被触发后，该事件会向父节点传递
- 非冒泡事件:当一个组件上的事件被触发后，该事件不会向父节点传递
WXML冒泡事件列表
- touchstart 手指触摸开始
- touchmove 手指触摸后移动
- touchcancel 手指触摸动作被打断，如弹窗，来电提醒等等。
- touchend 手指触摸动作结束
- tap 手指触摸后马上离开
- longpress 手指触摸后，超过350MS在离开，如果指定了事件回调函数并触发了这个事件，tap事件不被触发
- longtap 手指触摸后超过350MS在离开(推荐使用longpress代替)
以上都属于冒泡事件，其他申明的都是非冒泡事件。如<form/>的submit事件等等。
事件绑定和冒泡
bind事件绑定不会阻止冒泡事件向上冒泡catch事件会阻止事件冒泡
<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>
每个事件里面都会接收到一个事件参数。这个参数里面的事件属性就是e，e里面的属性能获取到用户输入的，pagex,pagey等等
WXSS
类似CSS,与CSS相比我们的拓展属性有:
- 尺寸单位
- 样式导入
尺寸单位
rpx他依据屏幕宽度自适应。屏幕宽度为750rpx,如果在Iphone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750 物理像素.1rpx=0.5px=1物理像素
样式导入
@import "common.wxss";
.middle-p {
padding:15px;
}
内联样式
框架上组件支持使用style.class样式.
- style 静态的样式统一写到class中。style接收动态的样式，在运行时会解析,请尽量避免将静态的样式写进style中，影响渲染速度
<view style="color:{{color}};" />
