Uniapp移动应用开发（微课版）教案

Uniapp移动应用开发（微课版）教 案课程名称uni-app移动应用开发（微课版）先修课程Web前端开发基础、Vue.js前端开发框架课程类别专业核心课课程类型理论+实践总学时64理论学时32实践学时32教学目的当前移动应用呈现多端、跨平台的需求态势，一个应用上线提供方大多会同时提供浏览器端、App端和小程序端三种访问模式，以满足不同场景下用户的访问需求。uni-app框架最显著的优势在于其强大的跨平台开发能力。开发者只需开发一套代码就可以同时编译到浏览器、App、以及各种小程序端使用，有效的降低了应用开发的成本，提高了开发效率。通过学习本课程，学生能够使用uni-app框架及其生态组件进行跨平台的移动应用项目开发，为学生后续学习移动应用开发相关专业课程奠定基础。具体包括：掌握uni-app相关基础理论知识，包括其框架概述、项目配置等，了解项目的基本结构，如pages目录、components目录、static目录以及manifest.json、App.vue、main.js等文件的作用；掌握uni-app页面布局与组件开发，包括Flex布局和按钮以及表单、列表、导航、媒体等uni-app的组件库的使用；掌握uni-app中的数据绑定机制，包括如何通过v-bind和v-model指令实现数据的双向绑定；掌握uni-app页面跳转机制，掌握利用组件和API接口两种方式进行页面跳转；掌握uni-app常用API的使用，包括基础API、网络API、页面路由API、数据缓存API、位置API、媒体API、设备API、文件API和界面等；了解uni-app支持多端部署的流程，包括iOS、Android、Web、微信小程序等。教学主要内容本课程以uui-app框架为主线介绍移动应用开发的技术原理与编程方法。课程内容包括uni-app框架概述、项目配置、项目结构、页面布局、常用基础和扩展组件库的使用、常用API的使用、美食小程序综合案例等。教学方式本课程的教学方式主要采用课堂讲授和实验操作，包括：课堂讲授、多媒体教学、实验操作、习题解析、课堂讨论等多种形式相结合，培养学生的自学能力、分析问题和解决问题的能力。教学方法：采用启发式教学和探究式教学，以学生为主体，鼓励学生在掌握书本知识的基础上针对特定需求动手编程实践，培养学生的自学能力。教学手段：充分利用电子教案、课件和网络教学平台等多种教学手段和资源。教学进度项目主要内容学时安排初识un-appuni-app简介，uni-app开发环境搭建，uni-app项目结构和开发规范、创建一个基本的uni-app程序4uni-app的全局配置文件pages.json页面路由配置文件的使用，manifest.json应用配置文件的使用，App.vue全局配置文件的使用4uni-app页面样式与布局uni-app页面尺寸单位、uni-app页面样式、Flex布局4uni-app基础组件uni-app视图容器组件、基础内容组件4uni-app基础组件uni-app表单组件4uni-app基础组件uni-app的image、video、navigator、camera等常用组件4uni-app扩展组件创建uni-ui项目、常用的21个uni-app扩展组件12uni-app常用APIuni-app中网络、页面路由、数据缓存类API4uni-app常用APIuni-app中位置、设备类API4uni-app常用APIuni-app中界面类、用户登录类API4综合案例：简单的美食搜索小程序美食搜索小程序的编程实现16合计64作业要求完成课堂布置的章节任务练习。完成本课程的综合性实训项目。考核方式期末笔试+综合实训成绩构成期末笔试成绩占50%，实训成绩占50%

第 1次课教学整体安排课时安排1-4课时授课主题：初识uni-app。教学目的：1.理解uni-app的基本概念，uni-app作为跨平台应用开发框架的优势和应用场景。2.搭建uni-app开发环境，能够独立安装和配置uni-app的开发工具。3.熟悉uni-app项目结构，了解uni-app项目的目录结构和文件作用。4.掌握开发规范，了解并遵循uni-app的开发规范。5.创建并运行基本的uni-app程序，通过实际操作，掌握uni-app项目的创建、编写、调试和运行流程。教学内容和方法：1.教学基本内容：（1）uni-app简介：介绍uni-app的背景、特点、优势以及应用场景。（2）uni-app开发环境搭建：包括安装HBuilderX、配置uni-app插件、创建uni-app项目等步骤。（3）uni-app项目结构和开发规范：详细讲解uni-app项目的目录结构、文件命名规范、代码风格规范等。2.教学重点难点：（1）创建一个基本的uni-app程序：通过实例演示，教授学生如何创建一个简单的uni-app项目，包括页面布局、组件使用、数据绑定等。3.教学方法：（1）理论讲解：通过PPT、视频等多媒体手段，对uni-app的相关概念、原理进行理论讲解。（2）实操演示：通过HBuilderX等开发工具，现场演示uni-app项目的创建、配置、编写和调试过程。（3）互动问答：鼓励学生提问，及时解答学生的疑惑，提高教学效果。（4）分组实践：将学生分成小组，每组完成一个基本的uni-app项目，培养团队协作和实际操作能力。4.教学实施：（1）uni-app简介引入话题：介绍当前移动应用开发市场的现状，引出跨平台应用开发的需求。介绍uni-app：详细讲解uni-app的背景、特点、优势以及应用场景。展示案例：展示一些使用uni-app开发的成功案例，激发学生的学习兴趣。（2）uni-app开发环境搭建安装HBuilderX：指导学生下载并安装HBuilderX开发工具。配置uni-app插件：在HBuilderX中安装并配置uni-app插件。创建uni-app项目：演示如何创建一个新的uni-app项目，并介绍项目的基本结构。（3）uni-app项目结构和开发规范讲解项目结构：详细讲解uni-app项目的目录结构和文件作用。介绍开发规范：讲解uni-app的开发规范，包括命名规范、代码风格规范等。提问与讨论：鼓励学生提问，并引导学生就开发规范进行讨论。（4）创建一个基本的uni-app程序演示创建过程：通过HBuilderX，演示如何创建一个简单的uni-app项目，包括页面布局、组件使用、数据绑定等。分组实践：将学生分成小组，每组按照演示步骤创建一个基本的uni-app项目。指导与答疑：在学生实践过程中，教师巡回指导，及时解答学生的疑惑。展示与点评：每组展示其创建的uni-app项目，教师和其他学生进行点评和交流。（5）总结与反馈总结回顾：对本节课的教学内容进行总结回顾，强调重点和难点。收集反馈：收集学生对本节课的反馈意见，以便后续教学的改进和优化。课后作业：对uniappdemo1项目做改造，添加interceptor.vue页面和404页面。interceptor.vue页面内部包含“游客访问”和“跳转登录”两个按钮，项目启动时默认加载interceptor.vue页面，在interceptor.vue页面如果单击“游客访问”按钮，跳转404页面。如果单击“跳转登录”按钮，跳转login.vue页面。参考资料：本书配套的多媒体课件、习题答案、微课视频等。第 2次课教学整体安排课时安排5-8课时授课主题：uni-app全局文件包括pages.json、manifest.json、App.vue等文件的详解和使用。教学目的：1.深入理解uni-app全局文件的作用，明确pages.json、manifest.json、App.vue等全局文件在uni-app项目中的核心功能和重要性。2.掌握pages.json、manifest.json、App.vue等全局文件的配置方法，学会如何正确配置和使用这些全局文件，以满足项目需求。教学内容和方法：1.教学基本内容：（1）uni-app全局文件的概念、作用以及它们之间的关系。（2）pages.json、manifest.json、App.vue等全局文件的结构和内容。2.教学重点难点：（1）pages.json文件的基本配置包括页面路由配置、页面属性设置等。（2）manifest.json的基本配置包括应用基本信息、权限配置、插件配置等。（3）App.vue基本配置以及uni-app常用的生命周期钩子函数。3.教学方法：（1）理论讲解：利用PPT、视频等多媒体手段，对全局文件的相关概念、结构和配置方法进行详细讲解。（2）实操演示：通过HBuilderX等开发工具，现场演示全局文件的配置和使用过程，包括如何添加页面、配置页面属性、设置应用基本信息等。（3）分组实践：将学生分成小组，每组根据演示步骤配置全局文件，并创建一个简单的uni-app项目来验证配置效果。（4）互动问答：鼓励学生提问，及时解答学生的疑惑，提高教学效果。（5）总结与点评：对每组学生的实践成果进行总结和点评，指出优点和不足，并提出改进建议。4.教学实施：（1）全局文件概述引入话题：简要介绍uni-app框架，引出全局文件的概念和作用。展示全局文件：展示pages.json、manifest.json、App.vue等全局文件，并简要说明它们的作用和关系。（2）pages.json详解讲解文件结构：详细讲解pages.json文件的结构和内容，包括pages数组、globalStyle对象等。演示配置方法：通过HBuilderX，演示如何添加页面、配置页面属性（如标题、导航栏样式等）。互动问答：鼓励学生提问，及时解答关于pages.json配置的疑惑。（3）manifest.json详解讲解文件内容：详细解析manifest.json文件的内容，包括应用基本信息（如名称、版本等）、权限配置、插件配置等。演示配置过程：通过HBuilderX，演示如何设置应用名称、图标、版本等信息，以及如何配置权限和插件。互动问答：鼓励学生提问，及时解答关于manifest.json配置的疑惑。（4）App.vue详解介绍文件作用：介绍App.vue文件的作用和重要性，它是整个应用的根组件。讲解文件结构：详细讲解App.vue文件的结构，包括template、script、style等部分。演示生命周期钩子：通过HBuilderX，演示如何使用App.vue中的生命周期钩子函数（如onLaunch、onShow等）来执行初始化操作。互动问答：鼓励学生提问，及时解答关于App.vue的疑惑。（5）实践环节分组实践：将学生分成小组，每组根据前面讲解的内容，配置全局文件，并创建一个简单的uni-app项目。指导与答疑：在学生实践过程中，教师巡回指导，及时解答学生的疑惑。验证配置效果：运行创建的uni-app项目，验证全局文件的配置效果。（6）总结与反馈总结回顾：对本节课的教学内容进行总结回顾，强调全局文件的重要性和配置方法。展示实践成果：每组展示其实践成果，包括全局文件的配置和项目运行效果。点评与反馈：教师和其他学生对每组的实践成果进行点评和交流，提出改进建议。收集反馈：收集学生对本节课的反馈意见，以便后续教学的改进和优化。课后作业：实现uni-app老年模式字体设置，用户能够通过字体设置页面选择大、中、小三种字体模式，选择的字体模式对所有页面生效。用户在字体设置页面中选择字体模式时，能够同步在页面下部显示预览文字效果。例如用户选择大，那么字体设置页面中将出现一排放大尺寸的文字。参考资料：本书配套的多媒体课件、习题答案、微课视频等。第 3次课教学整体安排课时安排9-12课时授课主题：uni-app页面样式与Flex弹性布局。教学目的：1.理解uni-app页面样式的基本概念，掌握如何在uni-app中为页面和组件添加样式，以及样式的作用域和优先级。2.掌握Flex弹性布局的原理和应用，深入理解Flexbox模型，学会使用Flex属性进行页面布局，实现响应式设计。教学内容和方法：1.教学基本内容：（1）CSS样式在uni-app中的应用，包括样式选择器、样式规则、样式优先级和作用域。（2）Flexbox模型的基本概念，包括容器和项目的属性、主轴和交叉轴、对齐和分布方式等。（3）在uni-app页面中使用Flex布局，包括单行/多行布局、对齐方式、分布方式等。2.教学重点难点：综合应用Flex布局相关知识设计一个的uni-app页面并使用Flex布局，页面包括导航栏、内容区和底部标签栏。3.教学方法：（1）理论讲解：利用PPT、视频等多媒体手段，对页面样式和Flex布局的相关概念、原理进行详细讲解。（2）实操演示：通过HBuilderX等开发工具，现场演示如何在uni-app中使用样式和Flex布局，包括添加样式、调整布局等。（3）分组实践：将学生分成小组，每组根据演示步骤设计并实现一个包含Flex布局的uni-app页面。（4）互动问答：鼓励学生提问，及时解答学生的疑惑，提高教学效果。（5）总结与点评：对每组学生的实践成果进行总结和点评，指出优点和不足，并提出改进建议。4.教学实施：（1）uni-app页面样式基础引入话题：简要介绍uni-app框架，引出页面样式的重要性。讲解样式基础：介绍CSS样式在uni-app中的应用，包括样式选择器、样式规则、样式优先级和作用域。演示样式添加：通过HBuilderX，演示如何在uni-app页面和组件中添加样式。互动问答：鼓励学生提问，及时解答关于页面样式的疑惑。（2）Flex弹性布局原理讲解Flexbox模型：详细讲解Flexbox模型的基本概念，包括容器和项目的属性、主轴和交叉轴、对齐和分布方式等。演示Flex布局：通过HBuilderX，演示如何使用Flex属性进行页面布局，包括单行/多行布局、对齐方式、分布方式等。案例分析：展示一些使用Flex布局实现的页面案例，分析布局思路和技巧。互动问答：鼓励学生提问，及时解答关于Flex布局的疑惑。（3）Flex布局在uni-app中的应用设计页面布局：根据前面的讲解，设计一个包含导航栏、内容区和底部标签栏的uni-app页面布局。演示布局实现：通过HBuilderX，演示如何使用Flex布局实现设计的页面布局。讲解布局技巧：介绍一些在使用Flex布局时需要注意的技巧和常见问题。互动问答：鼓励学生提问，及时解答关于Flex布局在uni-app中应用的疑惑。（4）实践环节分组实践：将学生分成小组，每组根据前面的讲解和设计，使用Flex布局实现一个uni-app页面。指导与答疑：在学生实践过程中，教师巡回指导，及时解答学生的疑惑。验证布局效果：运行创建的uni-app页面，验证Flex布局的效果。调整与优化：根据验证结果，对布局进行调整和优化，确保页面美观、易用。（5）总结与反馈总结回顾：对本节课的教学内容进行总结回顾，强调页面样式和Flex布局的重要性和应用方法。展示实践成果：每组展示其实践成果，包括页面布局效果和代码实现。点评与反馈：教师和其他学生对每组的实践成果进行点评和交流，提出改进建议。收集反馈：收集学生对本节课的反馈意见，以便后续教学的改进和优化。课后作业：自己创建一个SpringCloudAlibaba项目，在其中实现服务的远程调用参考资料：本书配套的多媒体课件、习题答案、微课视频等。

第 4次课教学整体安排课时安排13-16课时授课主题：uni-app基础组件中的视图容器组件和基础内容组件。教学目的：1.理解并掌握uni-app视图容器组件的作用和使用方法：熟悉view、scroll-view、swiper、movable-area和movable-view等常用视图容器组件的功能和属性，能够在实际项目中灵活运用。2.熟练掌握基础内容组件的使用：了解并掌握text、icon、rich-text、progress等基础内容组件的使用方法和属性，能够根据需要选择合适的组件来构建页面内容。3.提升页面构建和布局能力：通过实践，学生能够独立使用视图容器组件和基础内容组件构建出结构清晰、布局合理的页面。教学内容和方法：1.教学基本内容：（1）view、scroll-view、swiper、movable-area和movable-view等常用视图容器组件的功能、属性和应用场景。（2）text、icon、rich-text、progress等基础内容组件的功能、属性和常用场景。2.教学重点难点：（1）如何设置组件属性、监听和处理组件事件，以实现交互功能。（2）通过实际操作，学生将使用视图容器组件和基础内容组件构建一个包含导航栏、滚动内容区和底部按钮的uni-app页面。3.教学方法：（1）理论讲解：利用PPT、视频等多媒体手段，对视图容器组件和基础内容组件的相关概念、功能和属性进行详细讲解。（2）实操演示：通过HBuilderX等开发工具，现场演示如何使用这些组件构建页面，包括添加组件、设置属性、监听事件等。（3）分组实践：将学生分成小组，每组根据演示步骤使用视图容器组件和基础内容组件构建一个uni-app页面。（4）互动问答：鼓励学生提问，及时解答学生的疑惑，提高教学效果。（5）总结与点评：对每组学生的实践成果进行总结和点评，指出优点和不足，并提出改进建议。4.教学实施：（1）视图容器组件介绍引入话题：简要介绍uni-app框架，引出视图容器组件的重要性。讲解view组件：介绍view组件的基本功能、属性和应用场景，演示如何在页面中使用view组件。讲解scroll-view组件：介绍scroll-view组件的功能、属性和滚动方向、滚动条等设置，演示如何在页面中使用scroll-view组件实现滚动效果。讲解swiper组件：介绍swiper组件的功能、属性和轮播图、滑块切换等应用场景，演示如何在页面中使用swiper组件。讲解movable-area和movable-view组件：介绍movable-area和movable-view组件的功能，演示如何在页面中使用绍movable-area和movable-view组件。互动问答：鼓励学生提问，及时解答关于视图容器组件的疑惑。（2）基础内容组件介绍讲解text组件：介绍text组件的基本功能、属性和文本样式设置，演示如何在页面中使用text组件显示文本内容。讲解icon组件：介绍icon组件的功能、属性和图标加载等设置，演示如何在页面中使用icon组件显示图标。讲解rich-text组件：介绍rich-text组件的功能、属性，演示如何在页面中使用rich-text组件实现富文本功能。讲解progress组件：介绍progress组件的功能、属性，演示如何在页面中使用progress组件实现进度条功能。案例分析：展示一些使用视图容器组件和基础内容组件构建的页面案例，分析布局思路和组件使用技巧。互动问答：鼓励学生提问，及时解答关于基础内容组件的疑惑。（3）组件属性与事件处理讲解组件属性设置：介绍如何设置组件的属性，包括静态属性和动态属性，演示如何在页面中使用属性绑定和计算属性。讲解事件处理：介绍如何监听和处理组件的事件，包括点击事件、滚动事件等，演示如何在页面中使用事件监听器实现交互功能。演示综合应用：通过一个综合案例，演示如何使用视图容器组件和基础内容组件，结合属性设置和事件处理，构建一个功能完整的页面。互动问答：鼓励学生提问，及时解答关于组件属性与事件处理的疑惑。（4）实践环节分组实践：将学生分成小组，每组根据前面的讲解和设计，使用视图容器组件和基础内容组件构建一个包含导航栏、滚动内容区和底部按钮的uni-app页面。指导与答疑：在学生实践过程中，教师巡回指导，及时解答学生的疑惑，帮助学生解决遇到的问题。验证页面效果：运行创建的uni-app页面，验证页面布局和交互功能是否符合设计要求。调整与优化：根据验证结果，对页面布局和交互功能进行调整和优化，确保页面结构清晰、布局合理、交互流畅。（5）总结与反馈总结回顾：对本节课的教学内容进行总结回顾，强调视图容器组件和基础内容组件的重要性和使用方法。展示实践成果：每组展示其实践成果，包括页面布局效果、交互功能和代码实现。点评与反馈：教师和其他学生对每组的实践成果进行点评和交流，提出改进建议。收集反馈：收集学生对本节课的反馈意见，以便后续教学的改进和优化。同时，鼓励学生分享本节课的学习心得和收获。课后作业：使用视图容器组件和基础内容组件构建一个包含导航栏、滚动内容区和底部按钮的uni-app页面。参考资料：本书配套的多媒体课件、习题答案、微课视频等。第 5次课教学整体安排课时安排17-20课时授课主题：uni-app基础组件中的表单组件。教学目的：1.能够理解uni-app表单组件的基本概念和作用。2.能够掌握uni-app中常用表单组件（如按钮、输入框、单/多项选择器、开关等）的使用方法。教学内容和方法：1.教学基本内容：（1）uni-app简介及表单组件的基本概念。2.教学重点难点：（1）常用表单组件介绍（input输入框、picker选择器、switch开关、checkbox多选框、radio单选框等）。（2）表单数据的绑定与双向数据绑定机制。（3）构建一个包含多种表单组件的注册/登录页面。3.教学方法：（1）理论讲解：通过PPT、视频等多媒体材料，系统讲解uni-app表单组件的理论知识。（2）代码演示：现场编写代码，展示如何在uni-app项目中添加和配置表单组件。（3）小组讨论：分组讨论特定表单组件的使用场景，促进学生间的交流与合作。（4）实操练习：安排学生动手实践，创建自己的表单页面，教师巡回指导。（5）案例分析：分析实际项目中的表单设计，讨论优化方案，提升实战能力。4.教学实施：（1）导入新课：简要回顾uni-app框架的基础知识，引出表单在移动应用中的重要性。展示几个包含复杂表单的APP界面，激发学生兴趣。（2）理论讲解：详细介绍uni-app表单组件的基本概念、分类及作用。逐一讲解常用表单组件的属性和用法，通过示例代码加深理解。讲解表单数据的绑定机制，包括v-model指令的使用。（3）代码演示：现场编写一个简单的表单页面，包括用户名、密码输入框，性别选择器，同意条款开关等。演示如何绑定表单数据，实现数据的实时更新。（4）小组讨论与实操：将学生分为小组，每组分配一个具体的表单设计任务（如注册页面、登录页面、问卷调查等）。小组内讨论设计思路，分配任务，开始编码实现。教师巡回指导，解答疑问，鼓励小组间交流经验。（5）成果展示与点评：每组展示其完成的表单页面，分享设计思路、实现过程及遇到的挑战与解决方案。教师和其他小组进行点评，提出改进建议。（6）总结与作业：总结本节课的重点内容，强调表单组件在移动应用开发中的重要性。布置课后作业：要求学生根据课堂所学，独立设计并实现一个包含至少5种不同表单组件的表单页面。课后作业：学生根据课堂所学，独立设计并实现一个包含至少5种不同表单组件的表单页面，并实现数据的双向绑定。参考资料：本书配套的多媒体课件、习题答案、微课视频等。第 6次课教学整体安排课时安排21-24课时授课主题：uni-app基础组件中的image、video、navigator、camera等常用组件。教学目的：1.理解并掌握uni-app中image、video、navigator、camera等常用组件的基本概念、属性和使用方法。2.了解这些组件在移动应用开发中的常见应用场景。3.能够独立在uni-app项目中添加、配置和使用image、video、navigator、camera组件，实现图片的展示、视频的播放、页面导航以及摄像头的调用等功能。教学内容和方法：1.教学基本内容：（1）image组件：介绍image组件的基本属性、图片加载方式、错误处理及网络图片的使用。（2）video组件：讲解video组件的播放控制、属性设置、事件监听及自定义播放界面。（3）navigator组件：阐述navigator组件的页面跳转功能、属性设置及与页面栈的关系。（4）camera组件：介绍camera组件的调用方法、拍照功能、属性设置及事件监听。2.教学重点难点：在uni-app项目中添加、配置和使用image、video、navigator、camera组件，实现图片的展示、视频的播放、页面导航以及摄像头的调用等功能.3.教学方法：（1）理论讲解：通过PPT、视频等多媒体材料，系统讲解各组件的基本概念、属性和使用方法。（2）代码演示：现场编写代码，展示如何在uni-app项目中添加和配置这些组件，并演示其功能。（3）实操练习：安排学生动手实践，创建包含这些组件的页面，教师巡回指导。（4）案例分析：分析实际项目中的组件使用案例，讨论优化方案，提升实战能力。4.教学实施：（1）导入新课：简要回顾uni-app框架的基础知识，引出本节课将要学习的常用组件。展示几个包含image、video、navigator、camera组件的APP界面，激发学生兴趣。（2）理论讲解：image组件：详细介绍image组件的基本属性（如src、mode、lazy-load等），讲解图片加载方式及错误处理技巧。video组件：讲解video组件的播放控制（如play、pause、stop等），属性设置（如src、autoplay、controls等）及事件监听（如ended、timeupdate等）。navigator组件：阐述navigator组件的页面跳转功能（如to、open-type等），属性设置及与页面栈的关系。camera组件：介绍camera组件的调用方法，讲解拍照功能（如takePhoto、startRecord等），属性设置（如flash、device-position等）及事件监听（如error、scancode等）。（3）代码演示：现场编写代码，展示如何在uni-app项目中添加和配置这些组件。演示image组件的图片展示功能，包括网络图片和本地图片的加载。展示video组件的视频播放功能，包括播放控制、自定义播放界面及事件监听。演示navigator组件的页面跳转功能，包括跳转到其他页面和返回上一页。调用camera组件，展示拍照功能，并处理拍照后的结果。（4）实操练习：将学生分为小组，每组分配一个具体的任务，如创建一个包含图片轮播、视频播放、页面导航和拍照功能的页面。小组内讨论设计思路，分配任务，开始编码实现。教师巡回指导，解答疑问，鼓励小组间交流经验。（5）成果展示与点评：每组展示其完成的页面，分享设计思路、实现过程及遇到的挑战与解决方案。教师和其他小组进行点评，提出改进建议。课后作业：根据课堂所学，独立设计并实现一个包含image、video、navigator、camera组件的页面，并添加适当的功能和样式。参考资料：本书配套的多媒体课件、习题答案、微课视频等。

第 7次课教学整体安排课时安排25-28课时授课主题：创建uni-ui项目、uni-ui项目中使用的uni-app扩展组件（数字角标、面包屑、日历、卡片、列表、折叠面板、组合框）。教学目的：1.理解uni-ui项目的基本概念及其重要性。2.掌握如何在uni-app项目中集成uni-ui库，独立创建并配置一个uni-ui项目。3.熟悉并掌握uni-ui中提供的数字角标、面包屑、日历、卡片、列表、折叠面板、组合框等扩展组件的使用方法，能够在uni-app项目中正确引入并使用。4.编写代码实现这些组件的基本功能和样式定制。教学内容和方法：1.教学基本内容：（1）uni-ui项目的基本概念及重要性。（2）uni-ui库的集成方法。2.教学重点难点：（1）数字角标、面包屑、日历、卡片、列表、折叠面板、组合框等扩展组件的详细介绍，包括属性设置、事件监听及使用方法。3.教学方法：（1）理论讲解：通过PPT、视频等多媒体材料，系统讲解uni-ui项目的基本概念、uni-ui库的集成方法及各组件的属性和使用方法。（2）代码演示：现场编写代码，展示如何在uni-app项目中集成uni-ui库，并添加和使用这些扩展组件。（3）实操练习：安排学生动手实践，创建包含这些组件的页面，教师巡回指导。（4）案例分析：分析实际项目中的组件使用案例，讨论优化方案，提升实战能力。4.教学实施：（1）导入新课：简要介绍uni-app框架和uni-ui组件库的基本概念，引出本节课将要学习的内容。展示几个包含uni-ui组件的APP界面，激发学生兴趣。（2）uni-ui项目创建与集成：详细讲解uni-ui项目的基本概念及其重要性。演示如何在uni-app项目中集成uni-ui库，包括通过npm安装、引入组件库及在页面中注册组件等步骤。（3）扩展组件详细介绍与演示：数字角标：介绍数字角标的基本属性和使用方法，演示如何在页面中添加数字角标。面包屑：讲解面包屑组件的导航功能，演示其属性和使用方法。日历：展示日历组件的基本功能，包括日期选择、范围选择等，并演示其使用方法和属性设置。卡片：介绍卡片组件的样式定制和属性设置，演示如何在页面中添加卡片。列表：讲解列表组件的基本结构和滚动性能优化，演示其属性和事件监听。折叠面板：展示折叠面板组件的折叠和展开功能，演示其使用方法和属性设置。组合框：介绍组合框组件的自定义选项和选择功能，演示其使用方法和属性设置。（4）实操练习：将学生分为小组，每组分配一个具体的任务，如创建一个包含数字角标、面包屑、日历、卡片、列表、折叠面板和组合框等组件的页面。小组内讨论设计思路，分配任务，开始编码实现。教师巡回指导，解答疑问，鼓励小组间交流经验。学生可以根据自己的兴趣和能力，尝试对组件进行样式定制和功能扩展。（5）成果展示与点评：每组展示其完成的页面，分享设计思路、实现过程及遇到的挑战与解决方案。教师和其他小组进行点评，提出改进建议。课后作业：根据课堂所学，独立设计并实现一个包含多个uni-ui组件的页面，并添加适当的功能和样式。。参考资料：本书配套的多媒体课件、习题答案、微课视频等。第 8次课教学整体安排课时安排29-32课时授课主题：uni-ui项目中使用的uni-app扩展组件（倒计时、数据选择器、级联选择器历、下拉框、日期选择器、抽屉、增强输入框）。教学目的：1.理解uni-ui项目的基本概念及其重要性。2.掌握如何在uni-app项目中集成uni-ui库。3.熟悉并掌握uni-ui中提供的倒计时、数据选择器、级联选择器、下拉框、日期选择器、抽屉、增强输入框等扩展组件的使用方法。4.能够在uni-app项目中正确引入并使用uni-ui的扩展组件。5.学生能够编写代码实现这些组件的基本功能和样式定制。教学内容和方法：1.教学基本内容：（1）倒计时、数据选择器、级联选择器、下拉框、日期选择器、抽屉、增强输入框等扩展组件的概念。2.教学重点难点：（1）倒计时、数据选择器、级联选择器、下拉框、日期选择器、抽屉、增强输入框等扩展组件的详细介绍，包括属性设置、事件监听及使用方法。3.教学方法：（1）理论讲解：通过PPT、视频等多媒体材料，系统讲解uni-ui项目的基本概念、uni-ui库的集成方法及各组件的属性和使用方法。（2）代码演示：现场编写代码，展示如何在uni-app项目中集成uni-ui库，并添加和使用这些扩展组件。（3）实操练习：安排学生动手实践，创建包含这些组件的页面，教师巡回指导。（4）案例分析：分析实际项目中的组件使用案例，讨论优化方案，提升实战能力。4.教学实施：（1）导入新课：简要介绍uni-app框架和uni-ui组件库的基本概念，引出本节课将要学习的内容。展示几个包含uni-ui组件的APP界面，激发学生兴趣。（2）扩展组件详细介绍与演示（90分钟）：倒计时：介绍倒计时组件的基本属性和使用方法，演示如何在页面中添加倒计时功能。数据选择器：讲解数据选择器组件的数据绑定和选择功能，演示其属性和使用方法。级联选择器：展示级联选择器组件的多级选择功能，演示其使用方法和属性设置。下拉框：介绍下拉框组件的基本结构和选项设置，演示其属性和事件监听。日期选择器：讲解日期选择器组件的日期选择功能，包括日期范围选择等，演示其使用方法和属性设置。抽屉：展示抽屉组件的弹出和隐藏功能，演示其使用方法和属性设置。增强输入框：介绍增强输入框组件的自定义样式和功能扩展，演示其使用方法和属性设置。（3）实操练习：将学生分为小组，每组分配一个具体的任务，如创建一个包含倒计时、数据选择器、级联选择器、下拉框、日期选择器、抽屉和增强输入框等组件的页面。小组内讨论设计思路，分配任务，开始编码实现。教师巡回指导，解答疑问，鼓励小组间交流经验。学生可以根据自己的兴趣和能力，尝试对组件进行样式定制和功能扩展。（4）成果展示与点评：每组展示其完成的页面，分享设计思路、实现过程及遇到的挑战与解决方案。教师和其他小组进行点评，提出改进建议。课后作业：根据课堂所学，独立设计并实现一个包含多个uni-ui组件的页面，并添加适当的功能和样式。参考资料：本书配套的多媒体课件、习题答案、微课视频等。第 9次课教学整体安排课时安排33-36课时授课主题：uni-ui项目中使用的uni-app扩展组件（表单、商品导航、宫格、评分框、流式栅格表格、表格、分页器）。教学目的：1.学生能够理解uni-ui组件库在uni-app项目中的应用价值。2.学生能够掌握uni-app中表单、商品导航、宫格、评分框、流式栅格表格、分页器等扩展组件的基本使用方法。3.学生能够独立在uni-app项目中集成并使用uni-ui组件库。4.学生能够根据需要，灵活运用这些组件构建功能丰富的用户界面。教学内容和方法：1.教学基本内容：（1）表单、商品导航、宫格、评分框、流式栅格表格、分页器等扩展组件的概念。2.教学重点难点：（1）表单、商品导航、宫格、评分框、流式栅格表格、分页器等组件的详细介绍和使用方法。3.教学方法：（1）理论讲解：通过PPT、视频等多媒体手段，系统讲解uni-ui组件库的基本概念、集成方法及各组件的属性和事件。（2）代码演示：现场编写代码，展示如何在uni-app项目中集成并使用这些组件。（3）实操练习：安排学生动手实践，创建包含这些组件的页面，教师巡回指导。（4）小组讨论：分组讨论组件的使用场景和优缺点，提升学生对组件的全面理解。4.教学实施：（1）导入新课：简要介绍uni-app框架和uni-ui组件库，引出本节课将要学习的内容。展示几个包含uni-ui组件的实际应用案例，激发学生兴趣。（2）uni-ui组件库介绍与集成：详细讲解uni-ui组件库的基本概念及其在uni-app项目中的应用价值。演示如何在uni-app项目中集成uni-ui组件库。（3）组件详细介绍与演示：表单：介绍表单组件的基本结构和属性设置，演示如何创建和验证表单。商品导航：讲解商品导航组件的使用方法和布局方式，演示如何创建商品分类导航。宫格：展示宫格组件的创建方法和属性设置，演示如何创建宫格布局的应用。评分框：介绍评分框组件的基本功能和属性设置，演示如何创建评分功能。流式栅格表格：讲解流式栅格表格组件的使用方法和数据绑定，演示如何创建自适应的表格布局。分页器：展示分页器组件的基本功能和属性设置，演示如何实现分页功能。（4）实操练习：将学生分为小组，每组分配一个具体的任务，如创建一个包含表单、商品导航、宫格、评分框、流式栅格表格、分页器等组件的综合页面。小组内讨论设计思路，分配任务，开始编码实现。教师巡回指导，解答疑问，鼓励学生间交流经验。学生可以根据自己的兴趣和能力，尝试对组件进行样式定制和功能扩展。（5）成果展示与点评：每组展示其完成的页面，分享设计思路、实现过程及遇到的挑战与解决方案。教师和其他小组进行点评，提出改进建议。课后作业：有如下格式的银行卡数据，利用uni-table和uni-pagination实现数据的分页查询，要求每页展示的数据可手动设置。[{ "cardId":银行卡号, "phone":"手机号", "name":"姓名"， "pointsCurrent":当前积分, "createTime":"开卡时间", "balance":余额，},]。参考资料：本书配套的多媒体课件、习题答案、微课视频等。第 10次课教学整体安排课时安排37-40课时授课主题：uni-app中网络、页面路由、数据缓存类API的使用。教学目的：1.学生能够理解uni-app框架中网络请求、页面路由和数据缓存的基本概念。2.学生能够掌握uni-app提供的网络请求API、页面路由API和数据缓存API的使用方法。3.学生能够独立在uni-app项目中实现网络请求、页面跳转和数据缓存功能。4.学生能够根据需要，灵活运用这些API构建功能完善的移动应用。教学内容和方法：1.教学基本内容：（1）uni-app框架中网络请求、页面路由和数据缓存的基本概念。2.教学重点难点：（1）uni-app提供的网络请求API（如uni.request）、页面路由API（如uni.navigateTo、uni.redirectTo等）和数据缓存API（如uni.setStorageSync、uni.getStorageSync等）的详细介绍和使用方法。3.教学方法：（1）理论讲解：通过PPT、视频等多媒体手段，系统讲解uni-app中网络请求、页面路由和数据缓存的基本概念及API的使用方法。（2）代码演示：现场编写代码，展示如何在uni-app项目中实现网络请求、页面跳转和数据缓存功能。（3）实操练习：安排学生动手实践，创建包含这些功能的页面，教师巡回指导。（4）案例分析：分析实际项目中的API使用案例，讨论优化方案，提升实战能力。4.教学实施：（1）导入新课：简要介绍uni-app框架，引出本节课将要学习的内容：网络请求、页面路由和数据缓存。展示几个包含这些功能的移动应用界面，激发学生兴趣。（2）网络请求API详解：介绍网络请求的基本概念及其在移动应用开发中的重要性。详细讲解uni-app提供的网络请求API（如uni.request）的使用方法和参数配置。演示如何在uni-app项目中实现网络请求功能，包括发送GET和POST请求、处理请求响应等。（3）页面路由API详解：介绍页面路由的基本概念及其在移动应用开发中的作用。详细讲解uni-app提供的页面路由API（如uni.navigateTo、uni.redirectTo、uni.switchTab、uni.reLaunch等）的使用方法和区别。演示如何在uni-app项目中实现页面跳转功能，包括带参数跳转、返回上一页等。（4）数据缓存API详解：介绍数据缓存的基本概念及其在移动应用开发中的应用场景。详细讲解uni-app提供的数据缓存API（如uni.setStorageSync、uni.getStorageSync、uni.removeStorageSync、uni.clearStorageSync等）的使用方法和注意事项。演示如何在uni-app项目中实现数据缓存功能，包括存储和读取用户数据、清除缓存等。（5）实操练习：将学生分为小组，每组分配一个具体的任务，如创建一个包含网络请求、页面跳转和数据缓存功能的综合页面。小组内讨论设计思路，分配任务，开始编码实现。教师巡回指导，解答疑问，鼓励学生间交流经验。学生可以根据自己的兴趣和能力，尝试对功能进行扩展和优化。（6）成果展示与点评：每组展示其完成的页面，分享设计思路、实现过程及遇到的挑战与解决方案。教师和其他小组进行点评，提出改进建议。课后作业：根据课堂所学，独立设计并实现一个包含网络请求、页面跳转和数据缓存功能的综合页面，并添加适当的功能和样式。参考资料：本书配套的多媒体课件、习题答案、微课视频等。

第 11次课教学整体安排课时安排41-44课时授课主题：uni-app中位置、设备类API的使用。教学目的：1.理解uni-app框架中位置信息与设备信息类API的基本概念及其在移动应用开发中的作用。2.掌握uni-app提供的定位API（如uni.getLocation）和设备信息API（如uni.getSystemInfo）的使用方法。3.能够独立在uni-app项目中获取用户位置信息、设备信息等数据。教学内容和方法：1.教学基本内容：（1）uni-app框架中位置信息与设备信息类API的基本概念及其在移动应用开发中的应用场景。2.教学重点难点：（1）uni-app提供的定位API（如uni.getLocation等）和设备信息API（如uni.getSystemInfo、uni.getSystemInfoSync、uni.getNetworkType等）的详细介绍和使用方法。3.教学方法：（1）理论讲解：通过PPT、视频等多媒体手段，系统讲解uni-app中位置信息与设备信息类API的基本概念及使用方法。（2）代码演示：现场编写代码，展示如何在uni-app项目中获取用户位置信息和设备信息。（3）实操练习：安排学生动手实践，创建包含这些功能的页面，教师巡回指导。（4）案例分析：分析实际项目中的API使用案例，讨论如何根据获取到的数据实现特定功能，提升实战能力。4.教学实施：（1）导入新课：简要介绍uni-app框架，引出本节课将要学习的内容：位置信息与设备信息类API。展示几个包含位置服务和设备信息展示功能的移动应用界面，激发学生兴趣。（2）位置信息API详解：介绍位置信息的基本概念及其在移动应用开发中的重要性。详细讲解uni-app提供的定位API（如uni.getLocation等）的使用方法和参数配置。演示如何在uni-app项目中获取用户位置信息。强调定位权限的获取和用户隐私保护的重要性。（3）设备信息API详解：介绍设备信息的基本概念及其在移动应用开发中的应用场景。详细讲解uni-app提供的设备信息API（如uni.getSystemInfo、uni.getSystemInfoSync、uni.getNetworkType等）的使用方法和返回值。演示如何在uni-app项目中获取设备信息，包括系统信息、网络状态等。（4）实操练习：将学生分为小组，每组分配一个具体的任务，如创建一个包含位置服务和设备信息展示功能的综合页面。小组内讨论设计思路，分配任务，开始编码实现。教师巡回指导，解答疑问，鼓励学生间交流经验。学生可以根据自己的兴趣和能力，尝试对功能进行扩展和优化，如添加地图展示、设备信息图表等。（5）成果展示与点评：每组展示其完成的页面，分享设计思路、实现过程及遇到的挑战与解决方案。教师和其他小组进行点评，提出改进建议。课后作业：根据课堂所学，独立设计并实现一个包含位置服务和设备信息展示功能的综合页面，并添加适当的功能和样式。参考资料：本书配套的多媒体课件、习题答案、微课视频等。第 12次课教学整体安排课时安排45-48课时授课主题：uni-app中界面类与用户登录类API。教学目的：1.理解uni-app框架中界面类API和用户登录类API的基本概念及其在移动应用开发中的作用。2.掌握uni-app提供的界面类API（如uni.showToast、uni.showModal等）和用户登录类API（如uni.login、获取用户信息等）的使用方法。3.能够独立在uni-app项目中实现界面交互功能，如弹窗提示、模态对话框等。4.能够根据用户登录状态实现用户认证、信息获取及展示等功能。教学内容和方法：1.教学基本内容：（1）uni-app框架中界面类API的基本概念及其在移动应用开发中的应用场景，包括消息提示、模态对话框、加载提示等（2）用户登录类API的基本概念及其在移动应用开发中的重要性，包括第三方登录（如微信、支付宝登录）、获取用户信息等。2.教学重点难点：（1）uni.app提供的界面类API（如uni.showToast、uni.showModal、uni.showLoading、uni.hideLoading等）的详细介绍和使用方法。（2）uni-app提供的用户登录类API（如uni.login等）的详细介绍和使用方法，以及登录流程的设计和实现。3.教学方法：（1）理论讲解：通过PPT、视频等多媒体手段，系统讲解uni-app中界面类API和用户登录类API的基本概念及使用方法。（2）代码演示：现场编写代码，展示如何在uni-app项目中实现界面交互功能和用户登录流程。（3）实操练习：安排学生动手实践，创建包含这些功能的页面，教师巡回指导。（4）案例分析：分析实际项目中的API使用案例，讨论如何根据用户需求和业务逻辑设计合理的界面交互和用户登录流程。4.教学实施：（1）导入新课：简要介绍uni-app框架，引出本节课将要学习的内容：界面类API和用户登录类API。展示几个包含丰富界面交互和用户登录功能的移动应用界面，激发学生兴趣。（2）界面类API详解：介绍界面类API的基本概念及其在提升用户交互体验方面的作用。详细讲解uni-app提供的界面类API（如uni.showToast、uni.showModal、uni.showLoading、uni.hideLoading等）的使用方法和参数配置。演示如何在uni-app项目中实现消息提示、模态对话框、加载提示等界面交互功能。强调界面交互的一致性和用户体验的重要性。（3）用户登录类API详解：介绍用户登录的基本概念及其在移动应用开发中的重要性。详细讲解uni-app提供的用户登录类API（如uni.login等）的使用方法和返回值。演示如何在uni-app项目中实现用户登录流程，包括第三方登录、获取用户信息等。讨论如何根据业务需求设计合理的用户登录流程，包括登录状态的持久化、错误处理等。（4）实操练习：将学生分为小组，每组分配一个具体的任务，如创建一个包含界面交互功能和用户登录流程的综合页面。小组内讨论设计思路，分配任务，开始编码实现。教师巡回指导，解答疑问，鼓励学生间交流经验。学生可以根据自己的兴趣和能力，尝试对功能进行扩展和优化，如添加动画效果、自定义登录界面等。（5）成果展示与点评：每组展示其完成的页面，分享设计思路、实现过程及遇到的挑战与解决方案。教师和其他小组进行点评，提出改进建议。课后作业：根据课堂所学，独立设计并实现一个包含界面交互功能和用户登录流程的综合页面，并添加适当的功能和样式。参考资料：本书配套的多媒体课件、习题答案、微课视频等。第 13次课教学整体安排课时安排49-52课时授课主题：综合案例——简单的美食搜索小程序（首页）教学目的：1.了解美食搜索小程序的功能需求。2.了解美食搜索小程序的首页布局。3.能够在首页动态加载餐厅数据。4.能够在首页实现餐厅搜索功能。教学内容和方法：1.教学基本内容：（1）美食搜索小程序的功能需求。（2）美食搜索小程序的首页布局。2.教学重点难点：（1）在首页动态加载餐厅数据。（2）在首页实现餐厅搜索功能3.教学方法：（1）理论讲解：通过PPT、视频等多媒体手段，系统讲解美食搜索小程序的功能需求和首页布局。（2）代码演示：现场编写代码，展示如何在uni-app项目中实现首页布局和动态加载数据。（3）实操练习：安排学生动手实践，创建包含这些功能的页面，教师巡回指导。（4）案例分析：分析项目中的功能需求，讨论如何根据用户需求和业务逻辑设计合理的界面布局。4.教学实施：新课导入：选取一个日常生活中的美食App，介绍其首页布局和功能需求，讨论如何根据用户需求和业务逻辑设计合理的界面布局。首页布局和功能介绍：介绍所做的美食App首页布局和功能需求。详细讲解如何在首页中动态加载餐厅数据，同时实现餐厅的过滤查询功能。在页面设计时强调界面交互的一致性和用户体验的重要性。（3）实操练习：将学生分为小组，每组分配一个具体的任务。小组内讨论设计思路，分配任务，开始编码实现。教师巡回指导，解答疑问，鼓励学生间交流经验。学生可以根据自己的兴趣和能力，尝试对功能进行扩展和优化等。（4）成果展示与点评：每组展示其完成的页面，分享设计思路、实现过程及遇到的挑战与解决方案。教师和其他小组进行点评，提出改进建议。课后作业：根据课堂所学，独立设计并实现一个美食APP首页，并添加适当的功能和样式。参考资料：本书配套的多媒体课件、习题答案、微课视频等。

第 14次课教学整体安排课时安排53-56课时授课主题：授课主题：综合案例——简单的美食搜索小程序（餐厅详情页）。教学目的：1.了解餐厅详情页页面布局。2.能够在餐厅详情页显示餐厅详细信息。3.能够在餐厅详情页显示餐厅菜品信息。4.能够在在餐厅