《微信小程序开发案例教程》教案 第3课 微信小程序的视图（一）.docx

PAGE4

PAGE4

PAGE5

PAGE5

PAGE

PAGE4

PAGE

PAGE5

PAGE

PAGE1

课题

微信小程序的视图（一）

课时

2课时（90min）

教学目标

知识技能目标：

（1）了解WXML文件的基础知识

（2）掌握数据绑定、事件绑定、条件渲染及列表渲染的方法

（3）掌握模板定义、模板使用及文件引用的方法

素质目标：

?培养实践能力，在实践中学习，在学习中实践

教学重难点

教学重点：数据绑定和事件绑定的方法

教学难点：能够使用WXML文件构建微信小程序的页面结构

教学方法

案例分析法、问答法、讨论法、讲授法

教学用具

电脑、投影仪、多媒体课件、教材

教学设计

第1节课：?课前任务→考勤（2min）→问题导入（5min）→传授新知（38min）

第2节课：问题导入（5min）→任务实施（35min）→课堂小结（3min）→作业布置（2min）

教学过程

主要教学内容及步骤

设计意图

第一节课

课前任务

【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件完成课前任务

请大家分别从认识WXML，学习数据绑定、事件绑定、条件渲染、列表渲染、模板的定义和使用，以及文件引用的方法等知识点进行初步的了解。

【学生】完成课前任务

通过课前任务，使学生了解所学课程的重要性，增加学生的学习兴趣

考勤

（2min）

【教师】使用APP进行签到

【学生】班干部报请假人员及原因

培养学生的组织纪律性，掌握学生的出勤情况

问题导入

（5min）

【教师】创设情景，并组织学生讨论下列问题：

从事过?页编程的?知道，?页编程采?的是HTML+CSS+JS这样的组合，其中HTML是?来描述当前这个页?的结构，CSS?来描述页?的样?，JS通常是?来处理这个页?和?户的交互。

（1）在?程序中也有同样的??，其中WXML充当的是什么样的角色？

（2）和HTML?常相似，WXML由标签、属性等等构成。但是也有很多不?样的地?，请简单阐述一下？

【学生】聆听、思考、讨论、小组代表上台回答问题

【教师】总结学生的回答引入要讲的知识，板书“WXML文件——小程序的结构”

通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣

传授新知

（38min）

【教师】通过学生的发言，引入新的知识，讲解WXML的基础知识、数据绑定和事件绑定、条件渲染和列表渲染、模板与引用等知识

一、认识WXML

WXML（WeiXinmarkuplanguage）是小程序框架设计的一套标签语言，用于构建页面的结构，与网页开发中的HTML类似

WXML的基本语法格式如下。

标签名属性名1=属性值1属性名2=属性值2…组件内容/标签名

?【教师】随机邀请学生回答以下问题

组件由微信小程序框架提供，是微信小程序页面的基本组成单元，在WXML文件中用标签来引用组件，那么这项组建都包括什么？

?【学生】聆听、思考、回答

?【教师】总结学生的回答

属性

类型

描述

注解

id

string

组件的唯一标识

在整个页面是唯一的

class

string

组件的样式类名

为组件设置样式

style

string

组件的内联样式

为组件设置内联样式

hidden

boolean

组件是否显示

所有组件默认显示

data-*

any

自定义属性

组件上的事件触发时，会将该属性发送给事件处理函数

bind*/catch*

eventhandle

组件的事件

绑定事件处理函数，用于响应用户操作

组件的共同属性

二、数据绑定和事件绑定

?【教师】组织学生扫码观看“数据绑定和事件绑定”微课（详见教材），并进行讲解

?【学生】观看、聆听、思考

（一）数据绑定

数据绑定通常会涉及WXML和JS两个文件。实现数据绑定时，在WXML文件中使用变量，然后通过Mustache语法（双花括号{{}}）将变量与JS文件中对应的数据进行绑定。

1．简单绑定

简单绑定包括文本内容绑定和组件属性绑定。

（1）文本内容绑定。该绑定是将数据动态绑定到组件的文本内容中。

（2）组件属性绑定。该绑定是将数据动态绑定到组件的属性中。

?【教师】随机邀请学生回答以下问题：

在WXML文件中，为什么只能使用!--……--格式的注释，不能使用“//”格式的注释？

?【学生】聆听、思考、回答

?【教师】总结学生的回答

2．运算绑定

运算绑定是指对双花括号内绑定的数据进行运算。运算绑定支持的运算类型有三元运算、算术运算、逻辑运算、字符串运算、数据路径运算。

3．组合绑定

组合绑定就是在双花括号内将绑定的数据进行组合，构成新的组合。组合绑定常用于数组或对象。

（二）事件