微信小程序米乐体育APP官网框架分析 教案

　　app.json文件可以对常用的功能进行设置：配置页面路径、配置窗口表现、配置标签导航、配置网络超时、启用新版组件样式、配置debug模式、配置跳转的小程序列表。具体如图所示。

　　（4）掌握微信小程序注册页面的使用，包括页面初始化数据、生命周期函数的使用、页面相关事件处理函数的使用、页面路由管理和setData设置函数的使用。

　　分别从微信小程序目录结构、注册程序应用、注册页面的使用、绑定数据、条件渲染、列表渲染、定义模板、引用功能及WXS小程序脚本语言及微信小程序WXSS样式渲染等知识点进行初步的了解。

　　使学生从了解本章的学习目标、学习重点、考评方式等方面明确学习本章知识的要求和目标。

　　app.js文件用来定义全局数据和函数的使用，它可以指定微信小程序的生命周期函数。生命周期函数可以理解为微信小程序自己定义的函数，例如onLaunch（监听小程序初始化）、onShow（监听小程序显示）、onHide（监听小程序隐藏）等，在不同阶段不同场景可以使用不同的生命周期函数。此外，app.js中还可以定义一些全局的函数和数据，其他页面引用app.js文件后就可以直接使用，如图所示。

　　除了app.wxss提供的默认全局样式，用户自己也可以定义一些全局样式，这样方便每个页面的使用，又不用在每个页面都写一次，达到一次定义，其他页面直接引用的复用效果。

　　在使用微信小程序开发者工具时，开发者都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等。当换了另外一台计算机重新安装工具的时候，用户还要重新配置。因此，小程序开发者工具在每个项目的根目录都会生成一个project.config.json文件，用户在工具上做的任何配置都会写入这个文件。重新安装工具或者换计算机工作时，用户只要载入同一个项目的代码包，开发者工具就会自动恢复到当时开发项目时的个性化配置，其中包括编辑器的颜色、代码上传时自动压缩等一系列选项。

　　（4）配置网络超时。可以配置网络请求、文件上传、文件下载时最大的请求时间，超过这个时间，则不再请求。

　　（5）配置debug模式。配置debug模式可方便微信小程序开发者调试开发程序。

　　app.wxss文件对CSS样式进行了扩展，和CSS的使用方式一样，类选择器和行内样式的写法兼容大部分CSS样式，有一些CSS样式在这里是不起作用的。app.wxss还形成了自己的风格，是对所有页面定义的一个全局样式。只要页面有全局样式里的class，就可以渲染全局样式里的效果；但如果页面又重新定义了这个class样式，则会把全局的覆盖掉，使用自己的样式，如图所示。

　　做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开授课计划、教案等），吸引学生注意力。

　　微信小程序注册页面的使用、绑定数据、条件渲染和列表渲染的使用、模板的定义和引用、WXS脚本与WXSS样式渲染

　　微信小程序目录结构可以分为3个部分——框架全局文件、工具类文件和框架页面文件。

　　框架全局文件必须放在项目的根目录中。框架全局文件包括5个文件：app.js文件（小程序逻辑文件，定义全局数据及定义函数文件）、app.json文件（小程序公共设置文件）、app.wxss文件（小程序公共样式表）、project.config.json文件（小程序项目个性化配置文件），以及用于配置小程序及其页面是否允许被微信索引的sitemap.json文件。框架全局文件对所有页面都有效，如表所示。

　　（1）了解微信小程序目录结构，理解框架全局文件、工具类文件、框架页面文件的使用。