微信小程序开发学习笔记[3]
目录
一、视图
-
框架的视图层由WXML与WXSS编写，由组件来进行展示。
-
将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
-
WXSS（WeiXin Style Sheet）描述页面的样式。
-
组件（Component）是视图的基本组成单元
扫描二维码关注公众号，回复： 9714699 查看本文章
-
二、数据绑定
WXML中的动态数据均来自对应Page的 JS页面中的data域中定义的数据。
数据绑定使用Mustache 语法（双大括号）将变量包起来，可以作用于：内容、组件属性[需要在双引号之内]、控制属性[需要在双引号之内]。
数据绑定作用于内容:
// pages/binddate/binddate.js
Page({
/**
* 页面的初始数据
*/
data: {
username:"annjeff"
}
})
<!--pages/binddate/binddate.wxml-->
<text>username:{{username}}</text>数据绑定作用于组件属性[需要在双引号之内]
// pages/binddate/binddate.js
Page({
data: {
username:"annjeff",
id:1
}
})/* pages/binddate/binddate.wxss */
#item1{
width:250rpx;
height: 100rpx;
background-color: #2907F3
}<!--pages/binddate/binddate.wxml-->
<view id="item{{id}}">演示1</view>
<view id="item1">演示2</view>数据绑定作用于控制属性[需要在双引号之内]
// pages/binddate/binddate.js
Page({
data: {
username:"annjeff",
id:1,
condition:true
}})<!--pages/binddate/binddate.wxml-->
<!--当条件为false时，该标签内内容会被隐藏-->
<view wx:if="{{condition}}">逻辑控制判断</view>演示从对象以及对象数组中取数据：
// pages/binddate/binddate.js
Page({
data: {
employee:{
name:"Tom",
dept:"IT"
},
employees:[{
name:"Tom",
dept:"IT"
},{
name:"Ann",
dept:"sale"
}
]
}})<!--演示从对象中取数据-->
<view>name:{{employee.name}}</view>
<view>dept:{{employee.dept}}</view>
<!--演示从对象数组中取数据-->
<view>name1:{{employees[0].name}}</view>
<view>dept:{{employees[0].dept}}</view>三、wx:if and wx:for
3.1 wx:if
在框架中，使用wx:if="{{condition}}"来判断是否需要渲染该代码块，当condition为true时代码才会被渲染。
/ pages/binddate/binddate.js
Page({
data: {
condition:true}})<!--演示条件代码渲染-->
<view wx:if"{{condition}}""></view>也可以用wx:elif和wx:else 来添加一个else块。
// pages/binddate/binddate.js
Page({
data: {
grade:75}})<!--演示wx:if wx:else wx:elif-->
<view wx:if="{{grade>60}}">及格</view>
<view wx:elif="{{60>grade>45}}">有补考机会</view>
<view wx:else>下年再来一年</view>如果要一次性判断多个组件标签，可以使用一个<block/>标签将多个组件包装起来，并在上边使用wx:if 控制属性。
<!--一次性判断多个组件标签-->
<block wx:if="{{condition}}">
<view>第一行</view>
<view>第二行</view>
</block>3.2 wx:for
在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item。
/ pages/wxfor/wxfor.js
Page({
data: {
employees:[{
name:"Lily",
age:18
},{
name:"Kate",
age:22
},{
name:"annjeff",
age:24
}]
}})
<!--pages/wxfor/wxfor.wxml-->
<view>
<view>wx:for的使用</view>
<!--第一种方式-->
<view wx:for="{{employees}}">
{{index}}.{{item.name}} ==>{{item.age}}
</view>
----------------------------------------
<!--第二种方式-->
<view wx:for="{{employees}}" wx:for-index="idx" wx:for-item="opt">
{{idx}}.{{opt.name}}==>{{opt.age}}
</view>
-------------------------------------------
<!--演示block-for-->
<block wx:for="{{employees}}">
<view>{{index}}.{{item.name}}</view>
<view>{{index}}.{{item.age}}</view>
</block>
</view>
四、页面模板
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用
定义模版：使用name属性，作为模板的名字。然后在<template/>内定义代码片段，如：
定义模板：
<!--pages/template/head/head.wxml-->
<template name="head">
<view>
<view>{{title}}</view>
<view>{{desc}}</view>
</view>
</template>
使用模板方式一：
<!--pages/template/test/test.wxml-->
<import src="../head/head"/>
<template is="head" data="{{title:'aa',desc:'bb'}}"/>
使用模板方式二：
/ pages/template/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
page:{
title:"test页面",
desc:"这是用来测试的页面"
}
}})<!--pages/template/test/test.wxml-->
<import src="../head/head"/>
<template is="head" data="{{title:page.title,desc:page.desc}}"/>
模板使用方式3：
...代表展开这个对象
<!--引用方式2-->
<template is="head" data="{{...page}}"/>
五、import与include两种引用
WXML 提供两种文件引用方式import和include。
5.1、import
import可以在该文件中使用目标文件定义的template
在item.wxml中定义了一个叫item的template。
<template name="item">
<view>
<view>{{text}}</view>
</view>
</template>在index.wxml中引用item.xml，就可以使用item模板
<import src="item.wxml"/>
<template is="item" data="{{text:'farBar'}}"/>5.2、include
include 可以将目标文件除了<template/><wxs/>外的整个代码引入，相当于是拷贝到include 位置。拷贝过来的是除了模板以外的页面数据。
<!--pages/template/head/head.wxml-->
<template name="head">
<view>
<view>{{title}}</view>
<view>{{desc}}</view>
</view>
</template>
<view>页面其他内容</view><!--include方式-->
<include src="../head/head"/>
<view>body</view>
六、理解事件的分类与绑定
- 事件是视图层到逻辑层的通讯方式
- 事件可以将用户的行为反馈到逻辑层进行处理
- 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息，如id，dataset，touches
