微信小程序开发图解案例教程电子教案 第2章 微信小程序框架分析

PAGE2PAGE第2章微信小程序框架分析课程名称微信小程序开发图解案例教程项目名称微信小程序框架分析任务名称微信小程序框架分析课时2项目性质□演示性□验证性□设计性√综合性授课班级授课日期授课地点教学目标知识目标1．了解微信小程序模板的使用方法。2．理解微信小程序目录结构。3．了解框架页面文件的使用方法。4．学会微信小程序注册程序的应用。5．掌握微信小程序注册页面的使用方法。6．了解微信小程序模块化概念。7．了解微信小程序组件化概念。8．了解微信小程序运行环境。能力目标1．能熟练使用微信小程序的各种配置。2．能独立完成tabBar标签导航的开发。素质目标1．培养创造性思维。2．培养全局意识。教学内容1.任务描述本章将深入分析微信小程序的框架结构，帮助学生建立对微信小程序开发的全局认识，理解逻辑层与视图层分离的设计理念，掌握框架全局文件、页面文件的配置与使用方法，为后续开发打下坚实基础。2.任务展示与实现（1）演示如何使用微信小程序模板创建项目。（2）演示“猫眼电影”tabBar标签导航的完整开发流程。（3）学生动手操作：独立完成tabBar标签导航的配置与调试。3.教师讲解本任务涉及的知识点（1）微信小程序的两类模板及其用途。（2）微信小程序目录结构中框架全局文件、工具类文件、框架页面文件的作用。（3）app.json文件的各项配置（页面路径、窗口表现、tabBar、网络超时、debug模式、permission接口权限等）。（4）框架页面文件的五种类型（JS、JSON、WXML、WXS、WXSS）及其协作方式。（5）微信小程序注册程序（App函数）与生命周期函数。（6）微信小程序注册页面（Page函数）的使用，包括数据初始化、生命周期函数、事件处理函数、页面路由管理及setData函数。（7）微信小程序模块化与组件化的概念及实现方式。（8）微信小程序运行环境的渲染层与逻辑层通信模型。4.任务小结总结微信小程序框架的核心组成，回顾目录结构、配置文件、注册程序与页面、模块化与组件化等关键知识点，为后续页面开发奠定基础。教学重点1.框架全局文件的配置方法（app.json）。2.微信小程序注册页面的使用方法（生命周期函数、页面路由、setData函数）。3.tabBar标签导航的开发。教学难点理解页面路由的栈管理机制，区分不同路由触发方式（navigateTo、redirectTo、switchTab、reLaunch）及其对应的页面生命周期变化。教学准备1.装有Windows10/MacOS系统的电脑。2.教学课件PPT。3.教材：微信小程序开发图解案例教程（附精讲视频）（第4版）（AI助学）人民邮电出版社作业设计1.简述微信小程序框架全局文件app.json的主要配置项及其作用。2.简述微信小程序页面路由的4种触发方式及其对页面栈的影响。3.拓展练习：自行设计一个包含3个及以上tabBar标签的小程序项目，配置完整的tabBar属性，并在模拟器和真机上预览效果教学过程教学内容与过程（教学内容、教学方法、组织形式、教学手段）做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。【课前说明】本章是微信小程序开发的第二课，将从宏观视角深入分析微信小程序的框架结构。理解框架是开发微信小程序的前提，只有掌握了框架的运行机制和目录组织方式，才能在后续开发中游刃有余。【目的】使学生明确本章的学习目标，理解微信小程序逻辑层与视图层分离的架构设计理念，掌握框架全局文件和页面文件的作用与配置方法，为后续页面开发打下坚实基础。一、微信小程序模板与目录结构首先介绍微信小程序提供的两类模板（微信云开发模板和非云开发模板），帮助学生快速了解如何通过模板搭建项目主体框架。然后详细讲解微信小程序目录结构，重点解析框架全局文件的作用：app.js用于定义全局数据和生命周期函数，app.json用于配置页面路径、窗口表现、tabBar标签导航、网络超时、debug模式、permission接口权限等，app.wxss用于定义全局公共样式，project.config.json用于保存项目个性化配置，sitemap.json用于配置页面是否允许被微信索引。同时介绍工具类文件utils的作用及模块导出方式。二、框架页面文件的五种类型讲解微信小程序框架页面文件的五种类型及其协作方式：JS文件作为页面逻辑文件，负责处理业务逻辑和数据；WXML文件作为页面结构文件，用于构建前端视图，支持数据绑定、列表渲染、条件渲染和事件绑定；WXSS文件作为页面样式表，用于控制页面外观和布局；JSON文件作为页面配置文件，用于定义单个页面的配置信息；WXS文件作为脚本语言文件，用于在模板中进行数据计算和处理。三、微信小程序注册程序与页面的使用讲解App函数在app.js中注册微信小程序的方法，以及onLaunch、onShow、onHide、onError、onPageNotFound、onThemeChange等生命周期函数的触发时机和作用。重点讲解Page函数注册页面的方法，包括data页面初始化数据、生命周期函数（onLoad、onShow、onReady、onHide、onUnload、onRouteDone）的使用、页面相关事件处理函数（onPullDownRefresh、onReachBottom、onPageScroll、onResize、onShareAppMessage、onShareTimeline、onAddToFavorites、onTabItemTap）的作用、页面路由的栈管理机制（初始化、打开新页面、页面重定向、页面返回、tab切换、重启六种方式）以及setData设值函数的使用规范与注意事项。四、模块化、组件化与运行环境讲解微信小程序模块化的概念，即通过module.exports导出和require导入将代码分割成独立模块以提高可维护性和可复用性。介绍组件化的概念，包括基础组件（view、text、image、input、button、swiper等）、自定义组件的创建与使用、第三方组件库的选用原则。最后讲解微信小程序运行环境的组成，重点理解渲染层（WebView线程管理WXML和WXSS）与逻辑层（JS线程运行JS脚本）通过微信客户端中转通信的运行模型，以及基础库、JSBridge、数据缓存等运行环境要素。【任务一】认识模板与目录结构教师演示：使用微信开发者工具分别选择微信云开发模板和非云开发模板创建项目，对比两种模板的目录结构差异，讲解各框架全局文件的作用。学生动手：创建一个非云开发模板项目，浏览并记录各目录和文件的结构与功能。【任务二】制作“猫眼电影”tabBar标签导航教师指导：带领学生一步步完成“猫眼电影”底部标签导航的开发——新建movie项目，在app.json中配置pages数组添加“电影”“影院”“发现”“我的”4个页面路径，配置窗口导航栏背景色为红色（#D53E37）及标题文字，配置tabBar对象设置背景色、选中文字颜色、上边框颜色，在list数组中配置4个标签导航的对应页面、名称、默认图标及选中图标。学生动手：独立完成上述配置，保存后在模拟器中观察标签导航的切换效果，修改选中颜色验证配置是否生效，使用“预览”功能生成二维码在手机上体验实际效果。总结【课堂总结】回顾微信小程序框架的两大核心组成部分：框架全局文件（app.js、app.json、app.wxss、project.config.json、sitemap.json）和框架页面文件（JS、WXML、WXSS、JSON、WXS）。梳理app.json文件的主要配置功能，特别是tabBar标签导航的完整配置流程。总结微信小程序注册程序的生命周期函数及其触发时机，注册页面的生命周期函数与页面路由之间的关系。强调模块化与组件化对提高代码可维护性和可复用性的重要意义，以