微信小程序学习笔记(5)--------框架之视图层
来源:互联网 发布:朗文和牛津 知乎 编辑:程序博客网 时间:2024/05/01 09:02
视图层
框架的视图层由wxml与wxss编写,由组件进行展示。将逻辑层的数据反映成视图,同时将视图层的事件发送给逻辑层,wxml描述页面的结构,wxss描述页面样式。
一、wxml
wxml是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
1、数据绑定
(1)简单绑定
数据绑定使用Mustache语法(双大括号)将变量包起来,可以作用于:
内容
组件属性(双引号之内)
控制属性(双引号之内)
关键字(双引号之内)
(2)运算
可以在{{}}内进行简单的运算,支持:
三元运算
算数运算
逻辑判断
字符串运算
数据路径运算
(3)组合
可以在Mustache内直接进行组合,构成新的对象或者数组。
2、条件渲染
wx:if在框架中,我们使用wx:if="{{condition}}"来判断是否需要渲染代码块
<view wx:if="{{condition}}"> True </view>
也可以用wx:elif 和 wx:else 来添加一个 else 块:
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
block wx:if
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view></block>
注意: <block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
3、列表渲染
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>
block wx:for
类似block wx:if,也可以将wx:for用在<block/>标签上,以渲染一个包含多节点的结构块。例如:
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view></block>
wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key 的值以两种形式提供
字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
4、模板
wxml提供模板(template),可以在模板中定义代码片段,在不同的地方调用
定义模板
使用name属性,作为模板的名字,然后在<template/>内定义代码片段
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view></template>
模板使用(2种方法)
<include src="../xx/xx"/>把文件里的内容全部复制过来
Import导入 需要is指定把哪一部分的数据导入进来.模板中的模板是不生效的。
5、事件
(1)什么是事件:简而言之就是一种用户的行为,一种通讯方式
视图层到逻辑层的通讯方式。
将用户的行为反馈到逻辑层进行处理。
可以绑定到组件上,触发事件,执行逻辑层中对于的事件处理函数。
事件对象可以携带额外信息,如id,dataset,touches等。
(2)事件的使用
组件中绑定事件处理函数。
相对应的Page定义中写上相应的事件出理函数,参数event
(3)事件详解
1>分类:
冒泡事件:一个组件上的事件触发后,该事件会传向父节点。(点击一个子view,会触发父view以及父view的父view的点击事件)点击、长按、触摸都属于冒泡事件。
非冒泡事件:一个组件上的事件被触发后,该事件不会传向父节点(点击一个子view只触发当前view的点击事件)
2> 事件绑定:以key、value的形式绑定,其中key以bind或catch开头,然后跟上事件的类型,如bindtap, catchtouchstart。Value是一个字符串,在对应的page中定义同名函数。bind绑定与catch绑定的区别如下:
bind绑定:触发父view的点击事件,不阻止冒泡事件向上冒泡
catch绑定:不触发父view的点击事件,阻止冒泡事件向上冒泡。
(4)事件对象详解
组件的事件被触发时,逻辑层绑定该事件的处理函数,会收到一个事件对象。
1>BaseEvent 基础事件对象属性列表:
属性
类型
说明
type
String
事件类型
timeStamp
Integer
事件生成时的时间戳(页面打开到事件触发所经过
的毫秒数)
target
Object
触发事件的组件的一些属性值集合(触发事件的源
组件。)具体属性如下图
currentTarget
Object
当前组件的一些属性值集合(事件绑定的当前组件。
)具体属性如图
target
属性
类型
说明
id
String
事件源组件的id
tagName
String
当前组件的类型
dataset
Object
事件源组件上由data-开头的自定义属性组成
的集合
currentTarget
属性
类型
说明
id
String
当前组件的id
tagName
String
当前组件的类型
dataset
Object
当前组件上由data-开头的自定义属性组成的集合
dataset
在组件中可以定义数据,这些数据将会通过事件传递给 SERVICE。 书写方式: 以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在 event.target.dataset 中会将连字符转成驼峰elementType。
2>CustomEvent 自定义事件对象属性列表(继承 BaseEvent):
属性
类型
说明
detail
Object
额外的信息
detail
自定义事件所携带的数据,如表单组件的提交事件会携带用户的输入,媒体的错误事件会携带错误信息等。
3>TouchEvent 触摸事件对象属性列表(继承 BaseEvent):
属性
类型
说明
touches
Array
触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouches
Array
触摸事件,当前变化的触摸点信息的数组
特殊事件: <canvas/> 中的触摸事件不可冒泡,所以没有 currentTarget。
touches
touches 是一个数组,每个元素为一个 Touch 对象(canvas 触摸事件中携带的 touches 是 CanvasTouch 数组)。 表示当前停留在屏幕上的触摸点。
Touch 对象
属性
类型
说明
identifier
Number
触摸点的标识符
pageX, pageY
Number
距离文档左上角的距离,文档的左上角为原点 ,横向为X轴,纵向为Y轴
clientX, clientY
Number
距离页面可显示区域(屏幕除去导航条)左上角距离,横向为X轴,纵向为Y轴
CanvasTouch 对象
属性
类型
说明
特殊说明
identifier
Number
触摸点的标识符
x, y
Number
距离 Canvas 左上角的距离,Canvas 的左上角为原点 ,横向为X轴,纵向为Y轴
changedTouches
changedTouches 数据格式同 touches。 表示有变化的触摸点,如从无变有(touchstart),位置变化 (touchmove),从有变无(touchend、touchcancel)。
6、引用
wxml的引用方式有:import和include
1>import
import可以在该文件中使用目标文件定义的template,如:
在 item.wxml 中定义了一个叫item的template:
<text>{{text}}</text></template>
在 index.wxml 中引用了 item.wxml,就可以使用item模板:
<import src="item.wxml"/><template is="item" data="{{text: 'forbar'}}"/>
import作用域:只会引用目标文件中定义的模板,而不会引用目标文件引用的模板
如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。
2>include
include可以将目标文件除了<template/>的整个代码引入,相当于是拷贝到include位置。
二、wxss
wxss:样式语言,描述wxml的样式组件。wxss用来决定wxml的组件该怎么显示。
1、尺寸单位
rpx(responsive pixel) 可以根据屏幕宽度进行自适应,规定屏幕宽为750rpx.
rem(root em): 规定屏幕宽度为20rem;1rem = (750/20)rpx 。
2、样式导入
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
3、内联样式
style、class 属性来控制组件的样式。
style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。
class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。
4、选择器
目前支持的选择器有:
选择器
样例
样例描述
.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 组件前边插入内容
5、全局样式与局部样式
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。
- 微信小程序学习笔记(5)--------框架之视图层
- 微信小程序,学习笔记(一)框架,视图层
- 微信小程序,学习笔记(一)框架,视图层
- 微信小程序学习笔记(4)--------框架之逻辑层
- 微信小程序的学习(3)-视图层WXML
- 微信小程序的学习(4)-视图层WXSS
- 微信小程序学习笔记(2)--------框架之目录结构
- 微信小程序学习笔记(3)--------框架之配置
- AppFuse学习笔记-视图层
- 微信小程序视图层详解(一)
- 微信小程序:MINA视图层
- 框架的搭建之视图层
- PHP MVC框架 视图之常用学习笔记
- 小程序三:视图层之WXML
- 媒体层图形技术之Core Graphics 框架 学习笔记
- IOS开发学习笔记(五)——多视图应用程序之框架分析
- 微信小程序之wx:if视图层的条件渲染 —— 微信小程序教程系列(10)
- mysql学习笔记之四(视图)
- C#中的抽象类和接口
- 首篇博客小记
- Android开发-如何快速实现分享功能
- 20161208 JS计时器和CSS3旋转属性闹钟
- Python/Java中文乱码的问题
- 微信小程序学习笔记(5)--------框架之视图层
- CSS经典BUG
- Android stuido 中的keystore
- VS调试C#程序产生的dump
- 图片验证码识别程序全面分析
- alsa音频编程
- spring data jpa session 批量添加
- win32搭建Phtyon环境和库的安装
- Spring jar包详解