微信小程序开发图解案例教程电子教案 第8章 综合案例：仿“华为商城”微信小程序

PAGE2PAGE第8章综合案例：开发仿“华为商城”微信小程序课程名称微信小程序开发图解案例教程项目名称综合案例：开发仿“华为商城”微信小程序任务名称综合案例：开发仿“华为商城”微信小程序课时2项目性质□演示性□验证性□设计性√综合性授课班级授课日期授课地点教学目标知识目标1．掌握组件在实际项目中的使用方法。2．了解WXSS语言在实际项目中的使用方法。3．掌握网络请求相关API的使用方法。4．掌握TypeScript的数据类型的使用方法。5．掌握TypeScript的面向对象相关知识的使用方法。能力目标1．能熟练使用网络请求API发起接口请求。2．能够使用各种组件进行布局，以及使用WXSS样式语言进行页面渲染。素质目标1．培养获取、处理和传播信息的能力。2．培养判断力和决策能力。教学内容1.任务描述本章将通过开发仿“华为商城”微信小程序这一综合案例，帮助学生将组件布局、WXSS样式渲染、网络请求API、TypeScript编程等知识融会贯通，掌握完整电商类微信小程序的开发流程，提升综合项目开发能力。2.任务展示与实现（1）演示仿“华为商城”微信小程序的完整开发流程，包括底部标签导航、“我的”页面列表导航、账号登录与注册、首页多区域布局及动态获取数据、“分类”页面手风琴式导航设计。（2）学生动手操作：独立完成仿“华为商城”微信小程序的核心页面开发。3.教师讲解本任务涉及的知识点（1）底部标签导航的配置及“我的”页面列表导航设计。（2）账号登录的两种方式（账号密码登录和手机快捷登录）及页签切换效果。（3）用户注册表单的设计与提交。（4）首页搜索区域、海报轮播、宫格导航、精品推荐、手机区域、笔记本电脑区域的布局设计及通过wx.request动态获取数据。（5）“分类”页面手风琴式导航的设计及动态获取分类数据。（6）TypeScript的数据类型（number、string、boolean、字面量、any、unknown、void、never、object、array、tuple、enum）。（7）TypeScript的面向对象知识（类Class、继承、抽象类AbstractClass、接口Interface、泛型）。4.任务小结总结仿“华为商城”微信小程序的核心功能模块与开发流程，回顾组件综合运用、网络请求API调用、TypeScript面向对象编程等关键技术点，强调在实际项目中综合运用所学知识解决复杂问题的能力。教学重点1.首页多区域布局设计及动态获取数据（wx.request调用）。2.账号登录的两种方式实现及页签切换。3.“分类”页面手风琴式导航的设计与数据动态加载。4.TypeScript数据类型与面向对象知识在实际项目中的应用。教学难点理解TypeScript的面向对象编程思想在微信小程序中的实际应用（如LoginForm类的封装），以及“分类”页面中手风琴式导航的联动交互逻辑（左侧导航点击控制右侧内容区域的swiper切换）。教学准备1.装有Windows10/MacOS系统的电脑。2.教学课件PPT。3.教材：微信小程序开发图解案例教程（附精讲视频）（第4版）（AI助学）人民邮电出版社作业设计1.简述仿“华为商城”微信小程序中首页包含哪些功能区域，以及各区域使用的核心组件。2.简述TypeScript中interface和class的主要区别及其在本章项目中的应用场景。3.拓展练习：在仿“华为商城”微信小程序的基础上，为商品列表中的每个商品添加点击事件，点击后跳转到商品详情页面，并在详情页面中显示商品的名称、价格、图片和描述信息。教学过程教学内容与过程（教学内容、教学方法、组织形式、教学手段）做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。【课前说明】本章是第二个综合案例章节，将开发一个完整的仿“华为商城”微信小程序。本章将使用TypeScript进行业务逻辑处理，涵盖TypeScript的数据类型、面向对象等知识，同时综合运用组件布局、WXSS样式渲染、网络请求API等技术，帮助学生掌握电商类微信小程序的完整开发流程。【目的】使学生明确本章的学习目标，理解仿“华为商城”微信小程序的设计思路与开发流程，掌握在实际项目中综合运用组件、样式、网络请求、TypeScript编程等技术完成完整电商微信小程序开发的方法，提升独立开发能力。一、项目需求与设计思路分析介绍仿“华为商城”微信小程序的主要功能需求：底部标签导航（首页、分类、我的3个页面），首页显示商品信息（搜索区域、海报轮播区域、宫格导航区域、精品推荐区域、手机区域、笔记本电脑区域），分类页面动态获取导航内容和对应商品，我的页面显示个人相关内容，登录功能（账号密码登录和手机快捷登录两种方式），账号注册功能。讲解项目的设计思路：先设计底部标签导航并建立3个对应页面，配置选中与默认两种状态的图标和颜色；然后设计“我的”页面，通过微信授权方式获取用户头像和昵称实现登录效果，同时提供账号登录入口；接着设计账号密码登录和手机快捷登录功能；完成登录后设计账号注册功能以获取用户账号；再设计首页功能，通过API动态获取海报轮播图片和商品列表；最后设计分类页面，通过API动态获取分类导航信息和对应商品列表。二、“我的”页面与登录注册功能设计讲解“我的”页面列表导航的设计方法：在me.wxml中使用view组件布局头部用户信息区域（头像、昵称、切换账号登录按钮）和列表导航区域（我的订单、我的拼团、邀请有礼、我的退换货、我的优惠券、我的积分、优购码购买、我的地址、关于商城、联系客服），在me.wxss中使用flex布局设置头部红色背景，列表项使用flex水平排列左侧图标文字和右侧箭头，通过wx:for或逐项编写实现列表展示，在me.ts中使用wx.getStorageSync获取缓存的用户昵称并显示。讲解账号登录功能的两种方式实现：在login.wxml中使用swiper组件实现“账号密码登录”和“手机快捷登录”两个页签的切换（通过currentTab变量控制），账号密码登录区域包含账号输入框、密码输入框和登录按钮，手机快捷登录区域包含手机号输入框（绑定getMobile事件获取手机号）、获取验证码按钮（绑定getcode事件调用验证码接口并启动60s倒计时）和验证码输入框，在login.ts中创建LoginForm类封装登录表单数据（loginName、mobile、loginPassword、verifyCode、loginType、code属性），通过wx.request调用登录接口发送表单数据，登录成功后将userId、nickName、token等信息缓存到本地并跳转到首页。讲解用户注册功能的设计：在register.wxml中使用form组件设计注册表单（用户名、手机号、密码、确认密码、昵称5个输入项），在register.ts中通过wx.request调用注册接口提交表单数据，注册成功后跳转到登录页面。三、首页布局设计及动态获取数据讲解首页六大功能区域的完整设计：搜索区域使用view组件配合圆角背景和搜索图标实现简洁搜索框样式；海报轮播区域使用swiper组件设置indicator-dots指示点、autoplay自动播放、interval切换间隔5s、duration动画时长1s，在index.ts中通过wx.request调用getBannerList接口获取轮播图片列表并动态更新imgUrls数组；宫格导航区域使用flex布局配合wx:for循环渲染5个导航项（华为手机、运动健康、影音娱乐、智慧办公、鸿蒙智选）；精品推荐区域标题下方使用scroll-view组件设置scroll-x="true"实现横向滚动效果，在index.ts中通过getHotList接口获取精品推荐商品列表并通过wx:for渲染，每个商品项包含图片、名称和价格；手机区域和笔记本电脑区域采用相同的布局方式（flex-wrap换行布局每行2个商品），在index.ts中分别通过getPhoneList和getPcList接口获取对应商品列表，每个商品项包含图片、名称和红色价格文字。首页所有商品数据均通过wx.requestAPI从服务器动态获取，实现前后端数据交互。四、“分类”页面设计讲解“分类”页面手风琴式导航的设计：页面分为搜索区域、左侧导航区域和右侧内容区域三部分，左侧导航区域使用view组件渲染一级分类列表（通过wx:for循环从category数组获取数据），点击某个一级分类时通过switchNav事件设置flag变量改变选中样式（红色左边框+浅灰背景），同时设置currentTab变量控制右侧swiper组件切换到对应的分类内容面板，右侧内容区域使用swiper组件展示每个一级分类下的二级分类商品（通过嵌套wx:for循环从item.children获取二级分类数据），每个二级分类项包含图标和名称，采用flex-wrap布局每行3个排列。在category.ts中通过wx.request调用getCategoryListByType接口获取分类数据（参数type=hwshop），返回的数据结构为一级分类数组，每个一级分类包含children二级分类数组，二级分类包含secondTypeIcon图标和secondTypeName名称。强调手风琴式导航的核心在于左侧导航与右侧内容的联动，通过flag控制选中样式，通过currentTab控制swiper面板切换。【任务一】搭建项目主体框架与“我的”页面1.教师演示：创建hwshop-ts项目（选择TypeScript基础模板），配置app.json完成底部标签导航（3个页面路径、窗口样式、tabBar属性），设计“我的”页面列表导航（头部用户信息区域+8个列表导航项），实现微信授权登录和账号登录入口，设计登录页面的两种登录方式及页签切换效果，设计用户注册表单。2.学生动手：独立完成项目创建和底部标签导航配置，完成“我的”页面布局、登录页面和注册页面的完整开发，测试登录功能的数据缓存和页面跳转效果。【任务二】开发首页与“分类”页面1.教师指导：带领学生设计首页六大功能区域（搜索区域、海报轮播、宫格导航、精品推荐横向滚动、手机区域、笔记本电脑区域），在index.ts中编写多个wx.request调用分别获取轮播图片、精品推荐、手机列表、笔记本电脑列表数据，使用scroll-view实现精品推荐横向滚动效果，设计“分类”页面手风琴式导航（左侧一级分类列表+右侧swiper展示二级分类），在category.ts中调用接口获取分类数据并实现联动交互。2.学生动手：独立完成首页和分类页面的完整开发，在模拟器中测试首页各区域数据加载效果、scroll-view横向滚动效果、分类页面左侧点击切换效果，使用“预览”功能在手机上体验实际效果。【课堂总结】1.回顾仿“华为商城”微信小程序的核心功能模块：底部标签导航（3个页签）、我的页面（列表导航+登录入口）、登录页面（账号密码登录+手机快捷登录的swiper页签切换）、注册页面（表单设计与提交）、首页（搜索+海报轮播+宫格导航+精品推荐横向滚动+手机区域+笔记本电脑区域）、分类页面（手风琴式导航+动态数据加载）。2.总结综合案例中运用的核心技术：组件（swiper、scroll-view、view、image、form、input、button）、WXSS样式（flex布局、flex-wrap换行、绝对定位）、网络请求API（wx.request调用多个接口获取不同类型数据）、数据缓存（wx.setStorageSync缓存登录信息）、TypeScript（数据类型定义、LoginForm类的封装与使用）。3.强调首页设计中的数据驱动思想：通过多个wx.request接口分别获取不同类型商品数据，实现页面内容的动态渲染，体现了前后端分离的开发模式。4.梳理手风琴式导航的联动逻辑：左侧flag控制选中样式，cu