《微信小程序开发案例教程》教案 第2课 微信小程序开发入门(二).docx
PAGE4
PAGE4
PAGE3
PAGE3
PAGE
PAGE4
PAGE
PAGE3
PAGE
PAGE1
课题
微信小程序开发入门(二)
课时
2课时(90min)
教学目标
知识技能目标:
(1)熟悉微信开发者工具界面各区域的功能及作用
(2)熟悉微信小程序的文件类型和目录结构
素质目标:
?通过自主学习微信提供的小程序官方文档,增强自主学习意识
?密切关注行业动态,紧跟时代发展步伐,提高迎接机遇和挑战的能力
教学重难点
教学重点:微信小程序的项目结构
教学难点:开发简单的微信小程序
教学方法
案例分析法、问答法、讨论法、讲授法
教学用具
电脑、投影仪、多媒体课件、教材
教学设计
第1节课:?课前任务→考勤(2min)→问题导入(5min)→传授新知(38min)
第2节课:问题导入(5min)→任务实施(35min)→课堂小结(3min)→作业布置(2min)
教学过程
主要教学内容及步骤
设计意图
第一节课
课前任务
【教师】布置课前任务,和学生负责人取得联系,让其提醒同学通过APP或其他学习软件完成课前任务
请大家分别从微信开发者工具界面、微信小程序项目的文件类型和目录结构等知识点进行初步的了解。
【学生】完成课前任务
通过课前任务,使学生了解所学课程的重要性,增加学生的学习兴趣
考勤
(2min)
【教师】使用APP进行签到
【学生】班干部报请假人员及原因
培养学生的组织纪律性,掌握学生的出勤情况
问题导入
(5min)
【教师】创设情景,并组织学生讨论下列问题:
微信小程序开发出现了各种各样的,除了有商城小程序,分销小程序,预约小程序,外卖小程序,直播小程序等这些比较商业化的小程序之外,还有算命小程序,姻缘测试小程序等等之类的。
(1)那么这些有趣的小程序可以用来做什么呢?
(2)说一说你生活中见过的有趣的微信小程序?
【学生】聆听、思考、讨论、小组代表上台回答问题
【教师】总结学生的回答引入要讲的知识,板书“认识微信小程序的项目结构”
通过问题导入的方法,引导学生主动思考,激发学生的学习兴趣
传授新知
(38min)
【教师】通过学生的发言,引入新的知识,讲解微信开发者工具界面、文件类型、目录结构等知识
一、微信开发者工具界面
?【教师】组织学生扫码观看“微信开发者工具界面”微课(详见教材),并随机邀请学生回答以下问题:
微信开发者工具提供了一个可视化的界面,方便开发者进行代码编写、调试和预览。那么微信开发者界面分为几个区域,包括什么?
?【学生】聆听、思考、回答
?【教师】总结学生的回答
菜单栏
菜单栏
调试器编辑器模拟器工具栏
调试器
编辑器
模拟器
工具栏
微信开发者工具界面
(1)菜单栏。
菜单栏集成了微信开发者工具的大部分功能,包括项目、文件、编辑、工具、转到、选择、视图、界面、设置、帮助、微信开发者工具菜单项,使用这些菜单项可以对项目、代码片段及文件进行操作,对代码进行管理,控制界面中各区域的显示和隐藏,对外观、快捷键、编辑器进行设置,更换开发模式,切换账号等。
(2)工具栏。
工具栏提供了常用功能的快捷按钮,包括控制模拟器、编辑器和调试器显示与隐藏的按钮,可视化按钮,云开发按钮,模式切换下拉列表框,编译下拉列表框,编译、预览、真机调试、清缓存按钮,上传、版本管理按钮等。
(3)模拟器。
模拟器用于模拟手机环境,开发者可以使用它查看小程序在不同型号手机上的运行效果。
(4)编辑器。
编辑器区域分为左右两部分,左侧的资源管理器用于展示小程序项目的目录结构,右侧用于编写代码。
(5)调试器。
调试器区域包含多种调试工具,如Wxml、Console、Sources、Network、AppData、Storage等。
?【教师】组织学生扫码观看“微信开发者工具的常用快捷键”微课(详见教材),并进行讲解
?【学生】观看、聆听、思考
二、文件类型
?【教师】组织学生扫码观看“文件类型和目录结构”微课(详见教材),并进行讲解
?【学生】观看、聆听、思考
一个微信小程序项目通常包含以下类型的文件。
(1)WXML文件:扩展名为“wxml”,是微信小程序的结构文件,用于描述小程序的页面结构。
(2)WXSS文件:扩展名为“wxss”,是微信小程序的样式文件,用于描述小程序的页面样式。
(3)JSON文件:扩展名为“json”,是微信小程序的配置文件,用于设置小程序的页面路径、窗口表现、标签导航、网络超时时间、debug模式等。
(4)JavaScript文件:简称JS文件,扩展名为“js”,是微信小程序的逻辑文件,主要用于开发小程序的业务逻辑功能(如响应用户操