教案设计4《微信小程序框架结构》教案设计.docxVIP

《微信小程序框架结构》教案 课程名称：微信小程序框架结构 授课时间：2月3号 授课课时:1课时 授课类型:新授课 授课班级:高一一班 授课教材:《从零开始学微信小程序开发》 教学目标: 知识与技能目标: 掌握微信小程序开发的目录结构和各种文件结构。 过程与方法目标: 通过与HTML开发方法的类比，来掌握主体文件和页面文件结构。 情感态度与价值观目标: 通过对微信小程序框架结构的认识能够正确的进行编写各种类型的文件。 教学方法: 讲授法，演示法 教学重点: 掌握主体文件与页面文件中的逻辑文件、配置文件、样式文件。 教学难点: 了解扩展名为js的JavaScript文件来实现页面逻辑。 教学过程: 一、导入新课: （操作演示） 同学们，上节课我们介绍了开发工具界面，还有6个调试工具面板，以及目录、文件的新建与删除等，同学们都记得吗？ 答：记得。 我们请一个同学来回答一下这6个调试功能模块都是什么，以及作用？ 答：Console、Sources、Network、Appdata、Storage、Wxml…… 这节课我们来学习一下微信小程序的框架结构。 二、新授课程: （操作演示） 微信小程序只是一套系统的展示层（即常说的前端程序），主要用来展示系统的信息。随着前端程序开发的进一步发展，近几年前段程序发展也有了层次的细分，微信小程序就是这样的前端开发框架，提供了前端的逻辑层，视图层的分层结构。 目录结构 主体文件 一个微信小程序的主体部分由3个文件组成，这3个文件必须放在项目的主目录中，这3 个文件的名称也是固定的，文件名和作用如下： App.js：主逻辑文件，在项目中不能缺少，主要用来注册小程序。 App.json：主配置文件，在项目中不能缺少，用来对微信小程序进行全局配置。 App.wxss：主样式表文件，在项目表中可以不要，这个文件和HTML的css样式表文件作用相同。主样式表文件中设置的样式，在其他页面文件中也可以共享。 页面文件 微信小程序通常需要由多个页面来组成，每个页面由4个文件构成，这4个文件的主文件名必须通过4个不同扩展名来区分，扩展名的含义如下： js：页面逻辑文件，在里面编写JavaScript代码控制页面逻辑，每个页面中必须有这个文件。 wxml：页面描述文件（类似HTML页面中扩展名为html或htm的描述文件），用来设计页面的布局，进行数据绑定等。每个页面中必须有这个文件。 wxss：页面样式表文件，用来定义本页面使用到的各种样式表。同时，还可以使用app.wxss中定义的样式表。当然，也可以使用内联样式，如果当前页面也有相同的样式描述，由使用层叠样式的规则来决定最终的样式。如果页面使用的样式都在app.wxss中定义了，这个文件也可以省略。 json：页面配置文件，如果页面没有特殊配置，可以省略该文件，只使用app.json中的配置即可。 其他文件 在微信小程序中，除了使用上面介绍的文件之外，一般还会使用到图片、音频、视频、通用js模块等文件，这些文件可放置在项目中的任何位置，在调用时指定相对目录即可。通常会创建一个utils目录，里面存放一个utils.js作为公用js库，其中默认包含了一个日期格式转换的函数，在某个页面中如果需要用到该函数，在页面的js文件中将其引入后直接使用。 类似的，像图片、音频、视频等资源类的文件也可单独创建子目录来存放。 巩固练习: 我们来重新创建一个微信小程序，不勾选“在当前目录中创建quick start项目”，我们来挨个添加主体文件和页面文件的资源文件，首先看一下不添加任何资源文件时Console面板会提示什么信息，依次添加js文件、json文件，查看Console面板提示信息。这里先不要添加wxss文件查看Console面板会不会爆红。 课程小结: 本节课主要学习了微信小程序框架结构中目录结构有哪些，并详细介绍了主体文件和页面文件里面的各个资源文件的作用。 布置作业: 完成P17页，课后练习题3题 六、板书设计: 微信小程序框架结构 目录结构 主体文件文件名和作用： App.js App.json App.wxss 页面文件中资源文件扩展名的含义： js wxml wxss json 其他文件 教学反思: