文档详情

《微信小程序开发案例教程》教案 第2课 微信小程序开发入门(二).docx

发布:2025-02-08约3.67千字共4页下载文档
文本预览下载声明

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”,是微信小程序的逻辑文件,主要用于开发小程序的业务逻辑功能(如响应用户操

显示全部
相似文档