微信小程序--逻辑层与界面层

73 })

三.界面层–数据绑定

在程序的开发过程中,界面层提供一种模板机制,可以借助一种特殊的语法来完成数据的绑定,将动态的数据绑定到模板当中,最近将嵌入过后的数据显示到界面中,小程序中使用的是Mustache 语法（双大括号）语法:

1
2
3
7
8 { { message }}
9 { { person.name }} : { { person.age }}
10

1 // pages/demo/demo.js
2
3 Page({
4 //为页面提供数据,界面和逻辑之间的桥梁
5 data:{
6 message:“hello world”,
7 person:{
8 name: “张三”,
9 age:25
10 }
11 }
12 })

–数据绑定语法补充,除了在页面标签的内部我们会使用Mustache语法进行输出,在标签的内部,我们也可以使用Mustache语法:

1
2
3
7
8 { { message }}
9 { { person.name }} : { { person.age }}
10
14
15
16 { { ‘hello’ }}
17 { { 111 }}
18 { { 111 + 222 }}
19 { { 111 < 222 ? ‘yes’ : ‘no’ }}
20 { { true }}
21
24 复选框1
25 复选框2
26

四.列表渲染

在逻辑层中,很多的情况下都会是一个数组类型的数据(列表数据),那么此时在我们的界面层中就需要使用到列表渲染:

1
4 复选框1
5 复选框2
6
7
8
20
30
31 { { bbb + 1 }}:
32
33 { { item.name }} { { aaa.name }}
34
35
36
37
38
39
40 { { i }} * { { j }} = { { i * j }}
41
42
43
44
45

五.事件处理

1
3 点击

1 buttonTapHandle: function(e){
2 console.log(“点击按钮打印此条.”);
3 // console.dir()将一个对象以树状的形式打印到控制台,便于我们调试复杂对象
4 console.dir(e);
5 }

六.事件冒泡

1
4
5
6

1 innerHandler: function(){
2 console.log(“触发内部事件”);
3 },
4 outerHandler: fun