微信基础开发及实战 5

《微信小程序开发》课程单元教学设计授课单元单元12：系统首页开发（三）授课教师职称单元学时4教学目标知识目标能力目标素质目标1.阐述wx.navigateTo通过URL传递参数的方法及在目标页面接收参数的实现原理。

2.解释WXS（WeiXinScript）脚本的作用、使用场景及其与JavaScript的逻辑处理差异。

3.说明scroll-view组件实现滚动列表的核心属性（如scroll-y、enable-flex）及优化技巧。1.能实现点击公告列表项跳转到详情页，并能正确传递和接收URL参数以展示对应内容。

2.能使用WXS脚本处理简单的文本逻辑（如格式化日期、文本截断），并在WXML中调用。

3.能运用scroll-view组件实现“名医风采”等垂直滚动列表，并能处理基础滚动事件。1.培养模块化编程思维，理解代码复用和逻辑分离在工程化开发中的重要性。

2.通过实现“名医风采”展示，体会技术赋能于宣传正面典型、弘扬行业模范的作用，树立正确的职业榜样观。教学重难点教学重点1.URL参数的传递与接收(options对象与onLoad生命周期)。

2.scroll-view组件的配置与数据滚动加载。

3.WXS的基本语法及其在WXML中的调用。教学难点1.理解WXS的独立运行环境和与JavaScript的数据交互限制。

2.区分scroll-view与普通view在实现滚动布局时的区别，并合理配置其样式。教学策略教学组织采用“任务拆解-技能精讲-分层实践-总结提炼”的组织流程，强化综合应用。教学方法案例教学法、对比教学法、任务驱动法、讲练结合法。教学准备环境准备已安装微信开发者工具的计算机，已完成单元11首页业务栏和公告栏的“明德E医”项目。资料准备1.《微信小程序开发项目实战教程》教材“项目4任务3后部”。

2.授课计划表“第12周”内容与作业要求。资源准备1.“明德E医”公告详情页与名医风采栏原型图。

2.包含多条名医信息的JSON数据文件（含头像、姓名、职称、简介等字段）。

3.需要格式化的原始日期/文本数据样例。

4.补充阅读资料：《WXS语法参考》、《scroll-view滚动视图》。教学实施过程教学环节教学内容教师活动学生活动设计意图（含思政融入点）课前导学1.发布预习任务：阅读教材项目4任务3后部，观看配套慕课视频中关于“页面间传参”和“WXS基础”的部分。

2.提出思考题：“在小程序中，点击一个列表项跳转到详情页时，详情页如何知道用户点击的是哪一项？除了URL传参，还有哪些方式可以实现？”1.在学习平台发布预习资源和引导性问题。

2.提供名医风采的初始数据文件。1.观看视频，初步了解URL传参和WXS的作用。

2.思考页面间数据传递的不同方案。1.知识前置：利用慕课视频进行翻转课堂准备，聚焦核心概念。

2.启发思考：引导学生思考不同技术方案的适用场景，培养技术选型思维。课中研学环节一：需求分析与技术选型（15分钟）​

情境导入：回顾上节课完成的首页公告栏(swiper)。提问：“用户想查看某条公告的详细内容，该如何实现？”引出公告详情页需求及页面间传参问题。展示“名医风采”栏原型，引出长列表滚动展示需求。

内容1：任务分解

明确本单元两大核心任务：

1.任务A：公告详情页（涉及URL传参、WXS文本处理）。

2.任务B：名医风采栏（涉及scroll-view、列表渲染、数据加载）。1.展示原型图，引导学生分析两个功能模块的技术需求。

2.强调页面跳转时数据传递的必要性，以及长列表性能优化的重要性。

3.思政融入（工匠精神/职业素养）​：讲解“名医风采”栏时，可引导学生思考技术如何服务于正面宣传。清晰、美观地展示专家信息，不仅是技术实现，更是对专业知识和行业贡献的尊重与传播，体现了开发者严谨、细致的工作态度和正向的价值导向。1.理解两个任务的功能目标和用户交互流程。

2.讨论并比较URL传参与其他传参方式（如全局数据、缓存）的优缺点。1.明确任务：从业务场景出发，明确本单元要解决的交互和展示问题，建立目标导向。

2.思政融入：将技术实现与弘扬职业精神、树立行业榜样相结合，引导学生思考技术的正向社会价值。环节二：核心技能讲解与实践（75分钟）​

技能点1：页面间数据传递——URL参数

讲解：

-传递方：使用wx.navigateTo的url参数拼接查询字符串，如url:'/pages/noticeDetail/noticeDetail?id=123&title=xxx'。

-接收方：在目标页面的onLoad(options)生命周期函数中，通过options对象获取参数。

任务A-1：在首页公告栏（或一个模拟列表）中，为每个公告项绑定点击事件，携带id和title跳转到详情页。

技能点2：视图层逻辑处理——WXS脚本

对比讲解：

-JavaScript：处理页面逻辑和数据。

-WXS：运行在视图层，用于处理WXML中的简单逻辑（如文本格式化、简单运算），提升渲染性能。

讲解WXS模块定义、导出及在WXML中的调用方法。

任务A-2：在详情页，使用WXS编写一个简单的文本格式化函数（如将发布时间戳格式化为“YYYY-MM-DD”），并在WXML中调用。

技能点3：滚动视图——scroll-view组件

讲解scroll-view的核心属性：

-scroll-y:允许纵向滚动。

-enable-flex:启用Flex布局（重要！）。

-bindscrolltolower:滚动触底事件，可用于实现上拉加载更多。

任务B：使用scroll-view和wx:for渲染名医列表，实现垂直滚动展示。1.演示URL传参的代码编写，并利用开发者工具的“页面路径”面板或console.log展示接收到的参数。

2.对比演示：在WXML中分别用JavaScript函数和WXS函数处理同一段文本（如日期格式化），讲解WXS在视图层直接运算的优势。

3.演示scroll-view的基本配置，重点讲解enable-flex属性对于内部子元素布局的影响。

4.演示如何监听bindscrolltolower事件，模拟加载更多数据。

5.发布分层任务清单：基础（完成URL传参和scroll-view列表）、进阶（集成WXS处理）、挑战（实现上拉加载更多）。1.任务A-1：修改首页，实现点击公告项跳转至详情页，并传递参数。

2.任务A-2：创建公告详情页，接收参数并展示。创建一个WXS文件，编写格式化函数，并在WXML中调用以格式化发布时间。

3.任务B：在首页创建“名医风采”区域，使用scroll-view渲染提供的名医数据JSON，实现垂直滚动。1.​“做中学”核心实践：通过完成两个综合性任务，将页面跳转、数据处理、视图渲染等多个知识点串联应用，践行“做中学”理念。

2.突破难点：通过亲手编写WXS模块并调用，理解其与JavaScript的差异和应用场景；通过配置scroll-view，掌握滚动容器的使用要点。

3.分层教学：满足不同层次学生的学习需求，践行教材“示范—巩固—提升”的训练体系。[citation:教材文前.pdf]环节三：知识整合与问题诊断（30分钟）​

活动1：代码模块化思想引导

引导学生观察：WXS脚本、公共样式、工具函数都可以抽离成独立模块。以WXS为例，讲解其可复用于多个页面的优势。

活动2：常见问题诊断

演示并讲解常见问题：

1.URL参数传递中文乱码（需使用encodeURIComponent编码）。

2.scroll-view高度未设置或设置不当导致无法滚动。

3.WXS中无法调用小程序API及页面中定义的JavaScript函数。

活动3：迁移至“云惠视听”​

引导学生思考：在“云惠视听”的“热门视频”或“主播推荐”栏目，如何应用本单元知识？指导学生设计类似的信息流列表和详情页跳转方案。1.以WXS模块为例，阐述将可复用逻辑独立出来的好处，培养工程化思维。

2.将错误案例投屏，引导学生根据现象（如页面不滚动、WXS报错）进行排查。

3.组织学生讨论“云惠视听”中可能的应用场景，并绘制简单的交互流程图。1.理解模块化思想，尝试将WXS函数或公共样式提取到更合适的位置。

2.根据错误提示，尝试修正教师提供的问题代码。

3.为“云惠视听”设计一个“视频列表”页，规划其跳转到“视频详情页”的传参方式。1.培养工程素养：引入模块化思想，引导学生关注代码组织与复用，这是“代码编写能力”向高质量、可维护性发展的重要一步。[citation:教材文前.pdf]

2.问题排查能力：通过诊断涉及多知识点综合应用的典型错误，提升学生的综合调试能力。[citation:教材文前.pdf]

3.知识迁移与创新：将“明德E医”中学到的列表展示、详情跳转模式迁移到“云惠视听”项目，培养举一反三的能力。[citation:教材文前.pdf]课后拓展基础作业（来自授课计划）​：完成公告详情页（实现URL参数接收与内容展示）与名医风采栏（使用scroll-view实现滚动列表）。要求实现WXS对公告发布日期等文本进行处理。

拓展思考：阅读《WXS语法参考》，了解WXS支持的数据类型和语法限制。思考：在什么情况下使用WXS比使用JavaScript更合适？scroll-view的bindscrolltolower事件与onReachBottom页面生命周期函数有何异同？提供作业提交的详细标准（功能完整、交互流畅、代码规范）。在学习平台分享拓展阅读资料。1.完善并提交“明德E医”公告详情页和名医风采栏的代码。

2.阅读拓展资料，总结WXS的适用场景，比较scroll-view与页面级上拉触底的区别。1.巩固技能：通过独立完成两个功能模块，综合巩固URL传参、WXS、scroll-view等核心技能。

2.深度探究：引导学生深入理解WXS的设计初衷和scroll-view的特定应用场景，培养技术深度和辨析能力。教学评价1.过程性评价：课堂实践任务的完成度、代码规范性以及模块化思维的体现。

2.成果性评价：课后提交的作业是否实现了完整的详情跳转、参数接收、WXS文本处理及流畅的滚动列表。

3.素养评价：在迁移设计讨论中体现出的技术迁移能力和对代码组织优化的思考。反思诊改1.亮点：将页面传参、视图层脚本、滚动容器三个看似独立的知识点，通过“首页-详情页”和“信息流”这两个经典