微信小程序开发项目实战（微课版）教案 项目3 小程序常用组件.docx

《微信小程序开发》

教学设计

课程名称：微信小程序开发

授课年级：

授课学期：

教师姓名：

20年月日

课题

名称

小程序编程基础

计划

学时

4学时

内容

分析

逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。开发者写的所有代码最终将会打包成一份?JavaScript?文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似?ServiceWorker，所以逻辑层也称之为AppService。

教学目

标及基

本要求

掌握小程序的基本架构和执行顺序。

掌握页面数据的构建的方法。

掌握列表渲染和条件渲染含义与使用方法。

掌握事件绑定基本方法和技巧。

教学

重点

掌握页面数据的构建的方法。

掌握列表渲染和条件渲染含义与使用方法。

教学

难点

事件绑定基本方法和技巧

教学

方式

以职业需求为导向，以实践能力培养为重点，以培养“基础实、知识新、能力强、素质高”的复合型技术技能人才为目标，本模块结合目前流行小程序案例，采用任务驱动教学法，灵活运用超星云平台、教师自主开发的微课视频、JSON在线解析平台以及Xmind等信息化工具和手段，依据专业教学标准、人才培养方案、课程标准及岗位工作任务设计了“导学-督学-自学-辅学-互学”五环节的教学活动，充分体现“学生主体，教师主导”的教学理念。

图教学方法

任务驱动教学法

任务驱动教学法重点培养学生获取知识和自主学习的能力，是完成项目设计必须具有的能力。学生借助教学课件、专业书籍、设计规范、网络学习平台等学习材料，通过制定计划、组织实施、检查反馈等学习环节，完成学生职业素质、职业技能、职业道德培养。

项目教学法

在课程的宏观设计中，以微信开发项目为导向，微观设计中以任务为驱动。项目实施与校企合作企业数据库系统开发过程一致，使学生的学习更加具有针对性和实用性。项目设计贯穿于教学整个过程中，让学生自主学习，从而有效的促进学生创新能力的发展。

小组协作教学法

教学活动以学生为主体，以学生活动为主线。小组接受项目任务后，在教师的引导下，集体学习与讨论，制定计划，按照计划实施，然后采用自查、互查、教师检查、产品推广应用等方式检测工作成果，并针对检查结果进行修正，最后总结和评价。

案例式教学法

案例教学把理论知识和解决问题的能力有机地联系起来，帮助学生运用所学的理论知识去分析现实生活中的实例，学以致用。让学生从中学到现实而有用的东西，避免纯理论教学而导致的空谈，从而增强教学效果。

教

学

过

程

“天天打卡”整体布局

如果需要每天打卡，统计要卡数据，那么打卡小程序肯定是最佳选择，本任务配套源代码中提供了完整的天天打卡小程序案例。

1.案例初始化

新建一个项目，创建一个名为card的空白页面，打开app.json文件，创建新页面的代码如下所示。

上述代码指定小程序页面标题为“天天打卡”，页面背景颜色为蓝色，运行结果如图所示。

图设置导航栏

打开pages/card/card.js文件，在data对象中定义初始数据，包括打卡名称，打卡地点，打卡时间等信息。

2.页面基本结构

分析了天天打卡小程序并学习了Flex布局，接下来编写天天打卡小程序的基础页面结构和样式，打开pages/card/card.wxml文件编写页面结构代码。

接下来在pages/card/card.wxss文件编写样式，具体代码如下。

“天天打卡”组件

1.个人信息-微信API的使用

步骤1：在视图页面使用条件渲染获取个人信息

步骤2：实现样式

2.打卡名称-输入框的使用

步骤1：设置布局

步骤2：设置样式

步骤3：获取输出框信息

任务地点-地理位置API的使用

步骤1：设置布局

步骤2：

步骤3：设置JS，获取地理位置

任务时间-picker组件的使用

picker组件：从底部弹起的滚动选择器

/miniprogram/dev/component/picker.html

步骤1：设置布局

步骤2：设置样式

步骤3：设置JS

重复日-条件运行符的使用

步骤1：设置布局

步骤2：设置样式

步骤3：设置JS，请自行完成其它六个重复日选中函数

获取数据

1.新建按钮

步骤1：设置布局

步骤2：设置样式

步骤3：实现绑定事件

打卡便签效果

步骤1：设置布局

步骤2：设置样式

将数据写入到缓存

读取缓存

校园新闻案例

竞赛新闻

1、页面初始化

步骤1：新建三个页面

步骤2：定义全局样式

步骤3：定义初始数据

2、页面布局和样式

步骤1：设计页面布局

步骤2：设计页面样式

3、编写分页函数

步骤1：在util.js里定义一个公共