小程序学习(五)之视图层

本节知识点

• WXML
• WXSS

WXML

WXML是框架设计的一套标签语言。可以构建出页面的结构。

数据绑定

{{message}}

然后在逻辑层

//page.js
Page({
data:{
 message:"Hello!"
}
})

循环渲染

{{item}}

逻辑层代码

Page({
data:{
 array:[1,2,3,4,5]
}
})

条件渲染

APP

逻辑层

Page({
data:{
   view:'MINA'
}
})

模板引擎

page.js使用

// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

事件

{{count}}

在逻辑层里面

Page({
  data: {
    count: 1
  },
  add: function(e) {
    this.setData({
      count: this.data.count + 1
    })
  }
})

数据绑定

wxml中的动态数据均来自Page中的data

简单绑定

数据绑定使用双大括号将变量包起来，可以作用于数据

内容

{{message}}

绑定的数据

Page({
 data:{
 message:"Hello"
 }
})

组件属性(需要在双括号里)

逻辑层

Page({
 data:{
  id:0
 }
})

控制属性(需要在双引号之内)

逻辑层

Page({
 data:{
  condition:true
 }
})

关键字(需要在双引号之内)

true : boolean 类型的true ，代表真值
false: boolean 类型的false，代表假值

特别注意:不要直接写checked = "false",其计算结果是一个字符串，转成BOOLEAN类型后代表真值。

运算

可以在{{}}内进行简单的运算，支持方式有如下几种:

三元运算

算数运算

{{a+b}}+{{c}}+d 

逻辑层

Page({
data:{
a:1,
b:2,
c:3
}
})

view中的内容为3+3+d

逻辑判断

字符串运算

{{"hello"+name}}

逻辑层

Page({
data:{
 name:'MINA'
}
})

组合

数组

{{item}}

逻辑层

Page({
 data:{
  zero:0
 }
})

所以最终的组合就是[0,1,2,3,4]

列表渲染

wx:for

在组件上使用wx:for控制属性绑定一个数组，可以使用数组中的各项数据重复渲染。
默认数组当前项的下标变量名默认是index,数组当前项的变量名是item

{{index}}:{{item.message}}

逻辑层代码

Page({
data:{
 array:[
 {
  message:'foo',
 },
 {
 message:'bar'
 }
 ]
}
})

使用 wx:for-item 可以指定数组当前元素的变量名
使用 wx:for-index 可以指定数组当前下标的变量名

  {{idx}}: {{itemName.message}}

事件分类

事件分为冒泡事件和非冒泡事件

• 冒泡事件:当一个组件上的事件被触发后，该事件会向父节点传递
• 非冒泡事件:当一个组件上的事件被触发后，该事件不会向父节点传递

WXML冒泡事件列表

• touchstart 手指触摸开始
• touchmove 手指触摸后移动
• touchcancel 手指触摸动作被打断，如弹窗，来电提醒等等。
• touchend 手指触摸动作结束
• tap 手指触摸后马上离开
• longpress 手指触摸后，超过350MS在离开，如果指定了事件回调函数并触发了这个事件，tap事件不被触发
• longtap 手指触摸后超过350MS在离开(推荐使用longpress代替)

以上都属于冒泡事件，其他申明的都是非冒泡事件。如

的submit事件等等。

事件绑定和冒泡

bind事件绑定不会阻止冒泡事件向上冒泡catch事件会阻止事件冒泡

  outer view
  
    middle view
    
      inner 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中，影响渲染速度