MINA的视图层由WXML与WXSS编写。
将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。
WXML(WeiXin Markup language)用于描述页面的结构。
WXSS(WeiXin Style Sheet)用于描述页面的样式。
组件(Component)是视图的基本组成单元。
WXML-数据绑定
WXML中动态数据均来自对应Page的data
简单绑定
数据绑定使用"Mustache"语法(双大括号)将变量包起来,可以作用于:
内容
{{ message }}
Page({
data: {
message: 'Hello MINA!'
}
})
组件属性(需要在双引号之内)
Page({
data: {
id: 0
}
})
控制属性(需要在双引号之内)
Page({
data: {
condition: true
}
})
运算
可以在{{}}内进行简单的运算,支持的有如下几种方式:
三元运算
Hidden
算数运算
{{a + b}} + {{c}} + d
Page({
data: {
a: 1,
b: 2,
c: 3
}
})
view中的内容为3 + 3 + d
逻辑判断
字符串运算
{{"hello" + name}}
Page({
data:{
name:"MINA"
}
})
组合
也可以在Mustache内直接进行组合,构成新的对象或者数组
数组
{{item}}
Page({
data: {
zero: 0
}
})
最终组合成数组[0, 1, 2, 3, 4]
对象
Page({
data: {
a: 1,
b: 2
}
})
最终组合成的对象是{for: 1, bar: 2}
WXML-条件渲染
wx:if
在MINA中,我们用wx:if="{{condition}}"来判断是否需要渲染该代码块:
True
也可以用wx:elif和wx:else来添加一个else块:
1
2
3
block wx:if
因为wx:if 是一个控制属性,需要将它添加到一个标签上。但是如果我们想一次性判断多个组件标签,我们可以使用一个标签将多个组件包装起来,并在上边使用wx:if控制属性。
view1
view2
注意: 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
wx:if vs hidden
因为wx:if之中的模板也可能包含数据绑定,所有当wx:if的条件值切换时,MINA有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。
同时wx:if也是惰性的,如果在初始渲染条件为false,MINA什么也不做,在条件第一次变成真的时候才开始局部渲染。
相比之下,hidden就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。
一般来说,wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用hidden更好,如果在运行时条件不大可能改变则wx:if较好。
WXML-列表渲染
wx:for
在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item
{{index}}: {{item.message}}
Page({
items: [{
message: 'foo',
},{
message: 'bar'
}]
})
使用wx:for-item可以指定数组当前元素的变量名
使用wx:for-index可以指定数组当前下标的变量名:
{{idx}}: {{itemName.message}}
wx:for也可以嵌套,下边是一个九九乘法表
{{i}} * {{j}} = {{i * j}}
block wx:for
类似block wx:if,也可以将wx:for用在标签上,以渲染一个包含多节点的结构块。例如:
{{index}}:
{{item}}
WXML-模板
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
定义模板
使用name属性,作为模板的名字。然后在内定义代码片段,如:
{{index}}: {{msg}}
Time: {{time}}
使用模板
使用is属性,声明需要的使用的模板,然后将模板所需要的data传入,如:
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
is属性可以使用Mustache语法,在运行时来决定具体需要渲染哪个模板:
odd
even
模板的作用域
模板拥有自己的作用域,只能使用data传入的数据。WXML-事件
什么是事件
事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息,如id, dataset, touches。
事件的使用方式
在组件中绑定一个事件处理函数。
如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
Click me!
在相应的Page定义中写上相应的事件处理函数,参数是event。
Page({
tapName: function(event) {
console.log(event)
}
})
事件详解
事件分类
事件分为冒泡事件和非冒泡事件
冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
WXML的冒泡事件列表:
类型 触发条件
touchstart 手指触摸
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断,如来电提醒,弹窗
touchend 手指触摸动作结束
tap 手指触摸后离开
longtap 手指触摸后,超过350ms再离开
注:除上表之外的其他组件自定义事件都是非冒泡事件,如
WXML-引用
WXML提供两种文件引用方式import和include。
import
import可以在该文件中使用目标文件定义的template,如:
在item.wxml中定义了一个叫item的template:
{{text}}
在index.wxml中引用了item.wxml,就可以使用item模板:
import的作用域
import有作用域的概念,即只会import目标文件中定义的template,而不会import目标文件import的template。
如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。
A template
B template
include
include可以将目标文件出了的整个代码引入,相当于是拷贝到include位置,如:
body
header
footer WXSS
WXSS(WeiXin Style Sheets)是MINA设计的一套样式语言,用于描述WXML的组件样式。
WXSS用来决定WXML的组件应该怎么显示。
为了适应广大的前端开发者,我们的WXSS具有CSS大部分特性。 同时为了更适合开发微信小程序,我们对CSS进行了扩充以及修改。
与css相比我们扩展的特性有:
尺寸单位
样式导入
尺寸单位
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px 1px = 2.34px
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6s rpx = 0.552px 1px = 1.81rpx
rem(root em): 规定屏幕宽度为20rem;1rem = (750/20)rpx 。
建议:开发微信小程序时设计师可以用iPhone6作为视觉稿的标准。
样式导入
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
示例代码:
/** common.wxss **/
.small-p{
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p:{
padding:15px;
}
内联样式
MINA组件上支持使用style、class属性来控制组件的样式。
style:静态的样式统一写到class中。style接收动态的样式,在运行时会进行解析,所以不要将静态的样式写进style中,以免影响渲染速度。
class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。
选择器
目前支持的选择器有:
选择器 样例 样例描述
.class .intro 选择所有拥有class="intro"的组件
#id #firstname 选择拥有id="firstname"的组件
element view 选择所有view组件
element, element view checkbox 选择所有文档的view组件和所有的checkbox组件
::after view::after 在view组件后边插入内容
::before view::before 在view组件前边插入内容
全局样式与局部样式
定义在app.wxss中的样式为全局样式,作用于每一个页面。在page的wxss文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖app.wxss中相同的选择器。