文章目录
微信小程序视图层模板（template）
- 小程序框架允许在WXML文件中提供模板（template）
- 模板可以用于定义代码片段，然后在不同的页面被重复调用
- 每个都使用name属性自定义模板名称
<!--WXML-->
<template name="myTemp">
<view>
<text> Name: {
{name}} </text>
<text> Age: {
{age}} </text>
</view>
</template>
视图层模板（template）——定义模板
- 新建一个templates文件夹用来管理项目中所有的模板
- 创建“.wxml” 文件，在“.wxml”文件中使用“template”标签，在内定义代码片段
- 一个.wxml文件中可以定义多个模板，只需要通过内name属性来区分不同代码块
视图层模板（template）——使用模板
- 在目标页面“**.wxml”文件中通过import引入模板文件，使用标签就可以引用模板内容了
- 引用的标签必须带有is属性，用于指定正确的模板name名称才能成功引用
- 使用data属性将模板所需要的数据值传入
- 1单独创建template目录，在template目录中创建管理模板文件
2模板只有wxml、wxss文件
3小程序开发工具不支持快速创建模板，需直接创建wxml、wxss文件
4template的模板文件和样式文件只需要命名相同即可
5如果模板较多，建议在template目录下再创建子目录，存放单独的模板
<!--WXML-->
<import src ="/templates/template.wxml"/>
<template is=“myTemp” data=“{
{…student}}"/>
//JS
Page({
data:{
student: {
name: '张三',
age: 20
}
}
})
视图层模板（template）——模板样式
- 在新建模板的时候同时新建一个**.wxss 的文件（文件名和.wxml相同），与CSS同样的写法控制样式
- 在需要使用模板的页面 .wxss文件中import进来，或者直接在app.wxss中引入，这样只需要一次引入，其他文件就不用引入了
<!--WXSS-->
@import "../templates/ template.wxss";
自定义组件component及视图层模板template对比
| component | template | |
|---|---|---|
| 特点 | component组件则有自己的业务逻辑，可以看做一个独立的page页面 | template主要是展示，方法则需要在调用的页面中定义 |
| 模板 | component组件也由4个文件构成，与page类似，但是js文件和json文件与页面不同 | template模板没有配置文件(.json)和业务逻辑文件（.js）,所以template模板中的变量引用和业务逻辑事件都需要在引用页面的js文件中进行定义； |
| 适用情况 | 涉及到的业务逻辑交互比较多，那就最好使用component组件 | 只是展示，使用template就足够了 |
微信小程序事件
- 事件是视图层到逻辑层的通讯方式
- 可以将用户的行为反馈到逻辑层进行处理
- 可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数
使用方式
<button id="myBtn" bindtap="myTap" data-my="hello">按钮组件</button>
Page({
myTap:function(e){ // myTap:function(e)也可以简写为myTap(e)
console.log(e) //打印输出事件对象
console.log(e.currentTarget.dataset.my)//hello
}
})
- 首先需要在WXML页面为组件绑定一个事件处理函数
- 对象可以携带额外信息，如 id, dataset, touches
- 然后必须在对应的JS文件中添加同名函数，若函数不存在会在触发时报错
- 示例表示：为按钮绑定了一个触摸点击事件，手指触摸后将执行自定义函数myTap。其中
data-*为事件附加属性，可以由用户自定义或省略不写。 js通过event.currentTarget.dataset.xx获取
事件对象
- 其中dataset只能接受data-*的传递形式
<button bindtap="myTap" data-test="hello">按钮组件</button> - 触发事件后dataset所获得的集合就是{test: “hello”}
- 如果描述多个词用连字符（-）连接，会被强制转换为驼峰标记法，触发事件后dataset所获得的集合就是{myTest: “hello”}
<button bindtap="myTap" data-my-test="hello">按钮组件</button> - 触摸事件对象的touches是一个数组，里面每一个元素都是一个单独的touch对象，表示当前停留在屏幕上的触摸点。属性如表所示
| 属性 | 类型 | 说明 |
|---|---|---|
| identifier | Number | 触摸点的标识符 |
| pageX, pageY | Number | 距离文档左上角的距离，文档的左上角为原点，横向为X轴，纵向为Y轴 |
| clientX, clientY | Number | 距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴 |
- changeTouches属性与touches完全相同，表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）
事件分类
- 事件分为冒泡事件和非冒泡事件
- 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递
- 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递
- WXML中支持的冒泡事件
- 其他组件自定义事件如无特殊声明都是非冒泡事件
微信小程序事件三部曲
- 捕获，由外向内逐级传递，即由父元素向子元素逐级传递，到最内层的子元素
- 执行目标阶段，由最内层的子元素进行执行
- 冒泡，由内向外完成执行过程
事件的绑定与冒泡
<button id="myBtn" bindtap="myTap" data-my="hello">按钮组件</button>
- 事件绑定的写法与组件的属性描述相同，是以key=value的形式，解释如下
- key：以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0 起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart
- value：是一个字符串，需要在对应的 Page 中定义同名的函数
- bind和catch事件的区别是：bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡
<view id="A" bindtap="tap1"> <!--冒泡事件-->
View A
<view id="B" catchtap="tap2"> <!--阻止了冒泡事件-->
View B
<view id="C" bindtap="tap3"> <!--冒泡事件-->
View C
</view>
</view>
</view>
- 此时如果点击C组件会触发tap3，然后tap事件会向上冒泡至父节点View B导致触发tap2，
- 但由于B组件使用的是catchtap，所以阻止了tap事件继续冒泡；
- 如果点击了B组件会触发tap2；点击A组件会触发tap1
微信小程序文件
文件引用方式
WXML 提供两种文件引用方式
- import
- include
WXML引用—import
- 小程序可以使用标签在目标文件中事先定义好模板
- 然后在当前页面使用标签引用中的内容
1、在tmpl.wxml文件中使用定义了一个名称为tmpl01的模板代码块
<template name="tmpl01"> <text>{ {text}}</text> </template>2 在首页 index.wxml 中使用引用了tmpl.wxml，就可以使用tmpl01模板
<import src="tmpl.wxml"/> <template is="tmpl01" data="{ {text: 'hello'}}"/>此时等同于在index.wxml中显示了
<text>hello</text>
<import>有作用域的概念，即只会引用目标文件自己定义的template，而不会引用目标文件里面用引用的第三方模板
<!--A页面-->
<template name="A">
<text> A页面模板</text>
</template>
<!--B页面-->
<import src="a.wxml"/>
<template name="B">
<text> B页面模板</text>
</template>
<!--C页面-->
<import src="b.wxml"/>
<template is="A"/> <!-- 引用模板失败！C必须自己import A才可以 -->
<template is="B"/> <!-- 引用模板成功！C页面有import B -->
WXML引用—include
- 小程序使用将目标文件除了外的整个代码引入，相当于是把目标文件的代码直接复制到了到 include 标签的位置。
例如，为页面制作统一的页眉页脚，示例如下
//页眉header.wxml代码 <view>这是小程序的页眉</view>//页脚footer.wxml代码 <view>这是小程序的页脚</view>//首页index.wxml代码 <include src="header.wxml"/> <view>正文部分</view> <include src="footer.wxml"/>
区别
- import更适合于统一样式但内容需要动态变化的情况；而标签更适合于无需改动目标文件的情况。