微信基础开发及实战 17

《微信小程序开发》课程单元教学设计授课单元单元4：小程序开发技术基础（二）授课教师职称单元学时4教学目标知识目标能力目标素质目标1.阐述小程序主体文件（app.js、app.json、app.wxss）的各自功能及其协同作用。

2.解释页面文件（page.js、page.json、page.wxss、page.wxml）的组成结构与关联。

3.识记并说明app.json中关键全局配置项（window、tabBar、pages等）的作用与配置方法。1.能正确创建并配置小程序的全局外观（导航栏、背景色、标题等）。

2.能独立完成页面的创建，并进行基础的页面级配置。

3.能运用WXSS进行简单的全局和页面样式设置。1.培养系统化配置思维和界面审美意识，理解全局规划在项目开发中的重要性。

2.通过配置练习，养成严谨、细致的编码习惯。教学重难点教学重点1.app.json文件中window、pages等核心配置项的用法。

2.页面“四件套”（js,json,wxml,wxss）文件的创建与关联。教学难点1.理解全局样式（app.wxss）与页面样式（page.wxss）的作用域与优先级关系。

2.页面json配置与全局json配置的继承与覆盖关系。教学策略教学组织采用“原理剖析-对比演示-同步配置-迁移练习”的组织流程，强调动手实践。教学方法任务驱动法、对比教学法、讲练结合法。教学准备环境准备已安装微信开发者工具的计算机，已创建好的“明德E医”与“云惠视听”项目。资料准备1.《微信小程序开发项目实战教程》教材“项目2任务2”。

2.授课计划表“第4周”内容与作业要求。资源准备1.“明德E医”项目已配置好的app.json示例文件。

2.“云惠视听”项目需求文档中关于主题色的说明。

3.补充阅读资料：《全局配置与页面配置参数详解》、《WXML与WXSS基础》。

4.配色方案参考网站或工具。教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学1.发布预习任务：阅读教材项目2任务2，并观看配套慕课视频中关于“全局配置”的部分。

2.提出思考题：“为什么小程序要将配置、逻辑、样式、结构分开成不同文件？这和传统的网页开发（HTML/CSS/JS混编）相比有何优势？”1.在学习平台发布预习资源和引导性问题。

2.提醒学生检查上节课创建的项目是否可用。1.观看视频，了解主体文件的作用。

2.思考并尝试回答提问，记录疑问。1.知识前置：利用慕课视频进行翻转课堂准备，提高课堂效率。[citation:教材文前.pdf]

2.激发思考：引导学生从工程化和可维护性角度思考技术设计，培养架构思维。课中研学环节一：框架回顾与主体文件精讲(25分钟)

回顾上单元项目结构，提问：“我们创建了项目和页面文件夹，但如何定义整个小程序的‘外貌’和行为？”引出主体文件。

内容精讲1：三大主体文件

详解：

-app.js：应用逻辑入口，全局数据与方法。

-app.json：应用全局配置（窗口、页面路径、tabBar、网络超时等），是“总设计师”。

-app.wxss：全局公共样式，是“品牌视觉规范”。

内容精讲2：页面文件结构

讲解页面“四件套”的协作关系：page.js（逻辑）、page.json（页面配置）、page.wxml（结构）、page.wxss（样式）。1.使用树状图展示项目结构，高亮主体文件位置。

2.对比讲解app.js与普通page.js的区别（如onLaunch）。

3.使用比喻（如“总设计师”、“品牌规范”）帮助学生记忆各文件角色。

4.素养引导：强调清晰的文件分工和规范的配置是构建稳定、易维护项目的基础，体现“工匠精神”中的条理性和规划性。1.跟随讲解，在自己的项目中找到并打开三大主体文件。

2.理解各文件的定位，记录其核心作用。

3.思考并讨论：分开设计的好处是什么？1.建立系统认知：明确全局与局部的关系，理解小程序框架的模块化设计思想。

2.突破难点：通过生动的比喻，将抽象的文件分工具体化，降低理解难度。[citation:教材文前.pdf]

3.思政融入（工匠精神）：将规范的文件管理和配置视为专业开发者必备的严谨、有序的职业素养。环节二：核心实践——全局配置与页面创建(60分钟)

任务1：配置“明德E医”全局窗口样式

演示并带领学生修改app.json中的window配置项：设置导航栏标题文本、背景色、前景色（标题颜色）。

任务2：创建并配置新页面

演示在app.json的pages数组中新增页面路径，自动生成页面文件四件套。随后讲解并修改新页面对应的page.json，覆盖全局的窗口样式（如设置不同的导航栏标题）。

任务3：应用全局与页面样式

演示在app.wxss中定义全局样式（如主题色.primary-color），在page.wxss中定义页面特有样式，并在page.wxml中应用。讲解样式优先级。1.屏幕共享，演示修改app.json的window字段，并实时预览效果变化。

2.演示新增页面，强调路径格式，并展示page.json如何覆盖全局配置。

3.演示WXSS的编写与应用，通过修改颜色值直观展示样式作用。

4.发布同步操作任务清单。1.修改自己的“明德E医”项目，将导航栏背景色设置为医疗主题色（如蓝色），标题设置为“明德E医”。

2.在pages数组中新增一个“我的”页面，并修改其page.json，将导航栏标题设置为“个人中心”。

3.在app.wxss中定义一个全局字体样式，并在新创建的页面中使用。1.“做中学”核心实践：通过亲手修改配置和创建页面，深刻理解配置文件对小程序外观的控制力，掌握核心技能。

2.理解继承与覆盖：通过page.json覆盖全局配置的实践，理解配置的层级关系，这是灵活定制页面的关键。[citation:教材文前.pdf]

3.培养审美与规范：通过设置主题色，引导学生关注产品的视觉统一性，这是前端开发者和UI设计师都需要具备的素养。环节三：知识巩固与迁移应用(35分钟)

活动1：常见配置问题诊断

收集并演示配置中常见错误（如pages路径错误、json格式错误、样式未生效等），引导学生使用开发者工具的控制台和编译提示排查。

活动2：迁移配置至“云惠视听”​

要求学生根据“云惠视听”的文化娱乐项目定位，为其设计并配置一套符合其风格的全局窗口样式（导航栏颜色、标题等）。

活动3：样式优先级探究

提出一个小案例：同一个元素，在app.wxss、page.wxss、inlinestyle中都有颜色定义，最终显示哪个？引导学生通过微型实验得出结论。1.巡回指导，解决学生个性化问题，并收集共性问题进行集中演示解决。

2.提供色彩搭配参考，引导学生思考不同产品（医疗vs文娱）的风格差异。

3.组织学生进行微型实验，验证样式优先级（page.wxss>app.wxss>默认）。1.根据错误提示，尝试自主排查配置问题。

2.独立为“云惠视听”项目配置一套风格鲜明的全局窗口样式（如橙色系）。

3.动手编写简单代码，验证样式优先级规则。1.问题解决能力：培养学生根据错误信息自主排查配置问题的能力。[citation:教材文前.pdf]

2.能力迁移与创新：践行教材“示范—巩固—提升”的训练体系，将“明德E医”所学技能迁移到“云惠视听”，并鼓励创新设计。[citation:教材文前.pdf]

3.探究学习：通过实验验证理论，加深对样式系统工作原理的理解，培养科学探究精神。课后拓展基础作业（来自授课计划）：配置“明德E医”与“云惠视听”两个项目的窗口样式（导航栏颜色、标题等）。

拓展思考：阅读提供的《全局配置与页面配置参数详解》资料，总结出至少3个本单元未讲解但你认为有用的配置项，并说明其可能的应用场景。提供作业提交的截图要求（需显示两个项目不同风格的导航栏效果）。在学习平台分享拓展阅读资料。1.独立完成两个项目的窗口样式配置，确保风格与项目定位相符。

2.完成拓展阅读，整理笔记并分享。1.巩固技能：通过独立完成双项目配置，强化对全局配置的熟练度和应用能力。

2.自主学习与拓展：深入研读官方文档，培养自主查阅资料、探索未知知识的能力，对接“岗位能力”中的自主学习要求。教学评价1.过程性评价：课堂同步配置任务的完成度与准确性；迁移配置任务的设计合理性。

2.成果性评价：课后提交的两个项目配置截图是否符合项目风格要求，导航栏配置是否正确生效。

3.素养评价：在样式优先级探究和拓展阅读中体现出的探究精神与自主学习能力。反思诊改1.亮点：将枯燥的配置文