微信小程序开发图解案例教程电子教案 第7章 综合案例：仿“中国婚博会”微信小程序

PAGE2PAGE第7章综合案例：开发仿“中国婚博会”微信小程序课程名称微信小程序开发图解案例教程项目名称综合案例：开发仿“中国婚博会”微信小程序任务名称综合案例：开发仿“中国婚博会”微信小程序课时2项目性质□演示性□验证性□设计性√综合性授课班级授课日期授课地点教学目标知识目标1．了解组件在实际项目中的使用方法。2．了解WXSS样式语言在实际项目中的使用方法。3．掌握缓存的使用方法。4．掌握页面之间跳转的实现方法。

能力目标1．能够在项目中综合应用各种组件。2．能够使用WXSS样式语言进行页面布局设计和样式渲染。素质目标1．培养创造力和解决问题的能力。2．培养创新意识和能力。教学内容1.任务描述本章将通过开发仿“中国婚博会”微信小程序这一综合案例，帮助学生将前面所学的组件、WXSS样式、数据缓存、页面跳转等知识融会贯通，在实际项目中综合运用各种技术完成完整微信小程序的开发，提升综合开发能力。2.任务展示与实现（1）演示仿“中国婚博会”微信小程序的完整开发流程，包括底部标签导航、海报轮播、宫格导航的设计。（2）演示“全部分类”页面的设计与导航复用方法。（3）演示“现金券”页面下拉菜单筛选条件及现金券列表的设计。（4）学生动手操作：独立完成仿“中国婚博会”微信小程序的核心页面开发。3.教师讲解本任务涉及的知识点（1）底部标签导航的配置方法（app.json中tabBar属性的完整配置）。（2）swiper组件实现海报轮播效果的配置。（3）view组件结合flex布局实现宫格导航的动态渲染。（4）WXSS样式在复杂页面布局中的应用。（5）页面间跳转的实现方法（wx.navigateTo）。（6）数据缓存API的使用（wx.setStorageSync）。（7）下拉菜单的动态显示与隐藏交互设计。4.任务小结总结综合案例的开发流程与关键技术点，回顾底部标签导航配置、海报轮播实现、宫格导航设计、页面复用方法、下拉菜单交互设计，强调在实际项目中综合运用所学知识解决复杂问题的能力。教学重点1.底部标签导航、海报轮播、宫格导航的综合应用。2.“全部分类”页面的导航设计与复用方法。3.“现金券”页面下拉菜单的交互设计教学难点理解下拉菜单的显示与隐藏切换逻辑（通过subMenuDisplay数组和currentTab变量协同控制），以及将设计好的布局区域通过复制修改进行复用的开发效率优化方法。教学准备1.装有Windows10/MacOS系统的电脑。2.教学课件PPT。3.教材：微信小程序开发图解案例教程（附精讲视频）（第4版）（AI助学）人民邮电出版社作业设计1.简述仿“中国婚博会”微信小程序中底部标签导航的配置流程，包括tabBar对象的核心属性设置。2.简述“现金券”页面中下拉菜单筛选条件的实现原理，说明subMenuDisplay和currentTab两个变量的作用。3.拓展练习：在仿“中国婚博会”微信小程序的基础上，为“我的”页面设计个人中心布局，包括用户头像、昵称、我的订单、我的收藏、设置等功能入口。教学过程教学内容与过程（教学内容、教学方法、组织形式、教学手段）做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。【课前说明】本章是综合案例章节，将通过开发一个完整的仿“中国婚博会”微信小程序，将前面所学的组件使用、WXSS样式设计、数据缓存、页面跳转等知识进行综合运用。通过实际项目的开发，帮助学生将零散的知识点串联成完整的开发技能体系。【目的】使学生明确本章的学习目标，理解综合案例的开发流程与设计思路，掌握在实际项目中综合运用组件、样式、缓存、页面跳转等技术完成完整微信小程序开发的方法，提升独立开发能力。一、项目需求与设计思路分析介绍仿“中国婚博会”微信小程序的主要功能需求：底部标签导航（首页、现金券、婚博会、社区、我的5个页面）、首页海报轮播和宫格导航（10个导航入口，包括订喜宴、拍婚照、找婚庆、订婚戒、选婚纱、淘婚品、度蜜月、租婚车、美新娘、全部分类）、点击“全部分类”跳转到分类页面（包含玩转婚博会、特色分类、我的婚博会3类导航）、现金券页面（下拉菜单筛选条件分为“全部”和“默认”两类，商户现金券以列表形式展示）。讲解项目的设计思路：先设计底部标签导航并建立5个对应页面，配置选中与默认两种状态的图标和颜色；然后设计海报轮播效果；接着设计宫格导航，将图标和名称存放在JS中动态循环展示；针对“全部分类”页面中3个布局相同的导航区域，先设计一个再直接复用；针对“现金券”页面的下拉菜单，通过设置z-index:999将筛选条件置于页面顶层。二、底部标签导航与首页设计讲解底部标签导航的完整配置流程：在app.json的pages数组中添加5个页面路径并自动生成对应文件夹，在window中配置导航栏背景色为红色（#D73E3E）、标题为“中国婚博会”、文字颜色为白色，在tabBar对象中配置背景色为灰色（#F3F1EF）、文字默认颜色为灰色、选中颜色为红色（#D73E3E），在list数组中配置每个标签的页面路径、名称、默认图标和选中图标。讲解海报轮播的实现方法：在index.wxml中使用swiper组件设置autoplay自动播放、interval切换间隔5s、duration动画时长1s，通过wx:for循环从JS的imgUrls数组中获取轮播图片路径并展示。讲解宫格导航的设计方法：在index.js中定义loadNavData函数创建navs数组存放10个导航对象的图标和名称，在onLoad中调用该函数并通过setData赋值，在index.wxml中使用wx:for循环渲染宫格导航，为每个导航项绑定navBtn事件，在事件函数中通过id判断是否为“全部分类”导航（id=="9"），若是则使用wx.navigateTo跳转到type页面，在index.wxss中使用inline-block布局和text-align:center实现多行排列效果。三、“全部分类”页面设计讲解“全部分类”页面的三大导航区域设计方法：首先设计“玩转婚博会”导航，在type.wxml中使用view组件进行布局，分为两行四列展示订喜宴、拍婚照、找婚庆、订婚戒、选婚纱、淘婚品、度蜜月、租婚车8个导航项，在type.wxss中使用flex布局设置navs为display:flex实现水平排列，设置item为带边框和圆角的白色背景卡片容器。然后通过复制“玩转婚博会”导航的代码并修改图标路径和名称文字，快速完成“特色分类”导航（拍写真、美新娘、装新家、孕婴童）和“我的婚博会”导航（现金券、邀请函、签到礼、兑好礼、我的社区、预约到婚博会、推荐好友送现金）的设计。在type.json中修改页面标题为“全部分类”。强调这种先设计一个区域再复用修改的方法可显著提高开发效率，若提炼成模板使用则更加规范和便捷。四、“现金券”页面设计讲解“现金券”页面下拉菜单筛选条件的设计：在cash.wxml中使用dl、dt、dd结构进行布局，两个dt分别代表“全部”和“默认”筛选菜单，dd中包含ul列表展示具体筛选选项，为dt绑定tapMainMenu事件并传入data-index标识菜单索引。在cash.wxss中设置menudt为float:left各占49.7%宽度，menudd为position:absolute绝对定位并通过z-index:999置于页面顶层覆盖下方内容，通过show和hidden两个类控制dd的显示与隐藏。在cash.js中定义subMenuDisplay数组（初始值为['hidden','hidden']）和currentTab变量（初始值为-1），在tapMainMenu事件中根据点击的index切换对应subMenuDisplay的值为show或hidden，同时设置currentTab控制dt的选中样式（红色文字）。讲解现金券列表的设计：在cash.wxml中使用view组件布局每条现金券信息（左侧商家图标宽度93px高度73px，右侧商家名称、申请人数、优惠金额），通过多条复制修改数据完成完整列表，在cash.wxss中设置flex布局、价格文字红色大号字体、申请人数灰色小字绝对定位在右侧。在cash.json中修改页面标题为“现金券”。【任务一】搭建项目主体框架1.教师演示：创建hbh项目，配置app.json完成底部标签导航（5个页面路径、窗口样式、tabBar属性及list数组），在index页面实现海报轮播（swiper组件配置autoplay、interval、duration等属性），在index页面实现宫格导航（在JS中准备navs数据并通过wx:for渲染，为“全部分类”绑定跳转事件）。2.学生动手：独立完成项目创建和底部标签导航配置，实现海报轮播和宫格导航功能，测试“全部分类”导航的页面跳转效果。【任务二】开发“全部分类”与“现金券”页面1.教师指导：带领学生设计“全部分类”页面的三大导航区域（先完成“玩转婚博会”导航的布局和样式，再复制修改完成“特色分类”和“我的婚博会”导航），设计“现金券”页面的下拉菜单筛选条件（使用dl/dt/dd结构布局，通过subMenuDisplay数组和currentTab变量控制显示隐藏和选中状态），设计现金券列表（完成每条商家信息的布局和样式，通过复制修改快速完成多条列表）。2.学生动手：独立完成“全部分类”页面和“现金券”页面的完整开发，在模拟器中测试下拉菜单的切换效果和页面跳转功能，使用“预览”功能在手机上体验实际效果。【课堂总结】1.回顾仿“中国婚博会”微信小程序的核心功能模块：底部标签导航（5个页签的tabBar配置）、首页（海报轮播+10项宫格导航）、“全部分类”页面（三大类导航的复用设计）、“现金券”页面（下拉菜单筛选条件+现金券列表）。2.总结综合案例中运用的核心技术：组件（swiper、view、image）、WXSS样式（flex布局、绝对定位、z-index层级控制）、数据缓存（wx.setStorageSync）、页面跳转（wx.navigateTo、app.json页面路径配置）。3.强调开发效率优化方法：对于布局相同的区域，先设计一个再复制修改或提炼为模板复用，可显著提高开发效率。4.梳理下拉菜单的交互逻辑：通过数组控制多个菜单的显示隐藏状态，通过变量