移动应用开发基础教程-基于uni-app框架- 教案全套 第1-9章 概述-重构

第1章概述本章学时：理论2学时教学目标了解移动应用程序的特点。了解前端开发的发展趋势，理解前端开发的特点。了解跨端开发的发展历史和常见的跨端开发框架。了解ECMAScript、Node.js、Vue.js和uni-app等技术的特点。掌握VSCode和HbuilderX开发工具的安装和配置。教学内容、重点与难点教学内容移动应用程序的特点前端开发的特点跨端开发的发展历史常见的跨端开发框架及技术特点ECMAScript、Node.js、Vue.js和uni-app技术特点以上内容参见PPT。安装和配置VSCode及HbuilderX两款开发工具这个内容参见附录1。重点移动应用程序的特点。难点前端开发的特点，特别是后端开发相比较。教学方式课堂结合PPT讲解核心知识点，并配合适当的操作演示。教学过程设计理论教学过程说课介绍本门课程的教学目标，教学内容，课程在培养方案中的地位，考核方法，学习方法，学习资料等。新知讲解移动应用程序的特点教师通过PPT，以手机上种类繁多的App为例来介绍移动应用程序的特点，并与PC端进行对比加深理解。这部分作为重点内容，可与学生互动，让学生谈一谈自己所喜欢使用的App在PC端有无对应的应用程序。前端开发的特点教师通过PPT对该部分内容做简要介绍。前端开发就有构建、开发、测试、部署等多个阶段，所涉及到的各种术语，技术明此，工具名比较多，该部分内容属于难点。布置一个课后任务，让学生搜集相关资料，整理出一份较清晰，明确的前端开发技术图谱。跨端开发的发展历史教师通过PPT对该部分内容做简要介绍。常见的跨端开发框架及技术特点教师通过PPT对该部分内容做简要介绍。ECMAScript、Node.js、Vue.js和uni-app技术特点教师通过PPT对该部分内容做简要介绍。要明确ECMAScirpt与JavaScript这两个术语的关系。实验教学过程安装和配置VSCode及HBuilderX两款开发工具教师演示VSCode和HbuilderX两款开发工具的下载、安装和配置。此部分根据课堂时长灵活安排。未完成部分可以作为课后任务让学生动手完成。课后任务根据教材附录1的方法安装和配置VSCode及HBuilderX两款开发工具。通过百度、CSDN、博客园等搜集前端开发标准化和工程化的相关资料，了解在Web开发领域存在哪些标准和常见的前端工程化工具。第2章ES基础本章学时：理论2学时，实验2学时。教学目标掌握ES的标识符、变量、常量、数据类型、操作符和字符串等基本语法。掌握条件判断和循环。掌握函数的定义方法。掌握箭头函数的定义方法。掌握数组的常用方法。掌握对象的简写方式。理解类和继承的定义方法。掌握命名导入和导出，默认导入和导出的语法。教学内容、重点与难点教学内容基本语法包括合法标识符、let与const关键字、解构赋值、数据类型的分类、数据类型的隐式转换、??操作符、扩展操作符、模板字符串等。条件判断和循环语句包括if、if...else、switch、do、do...while、for、for...of和for...in。函数包括函数的定义方法、箭头函数的定义方法、箭头函数的简写、this的指代。数组包括数组的forEach()、map()、filter()、join()、reduce()、push()、splice()等方法。对象包括对象的简写方式。类包括定义类的语法、定义继承的语法。（7）模块包括命令导出和导入、默认导出和导入。以上内容参见PPT。重点扩展运算符解构赋值箭头函数。模块难点数据类型的隐式转换箭头函数中this的指向。数组的reduce()方法。教学方式课堂结合PPT讲解核心知识点，并配合适当的操作演示。教学过程设计理论教学过程旧知复习主要是复习移动应用程序的特点。针对上次所布置的资料搜集与整理任务，可以请一两位学生谈一下自己的看法。新知讲解基本语法考虑到在该门课程之前，学生已经至少接触过一门编程语言，因此这部分内容可以通过PPT比较快速地介绍一下，将重点放在let关键字和“数据类型”上，让学生体会到ES的“弱数据类型”的特点。流程控制教师通过PPT对该部分内容做简要介绍。以操作演示的方式介绍一下for...of的用法。函数教师通过PPT并结合操作演示的方式重点介绍箭头函数的定义和使用。this关键字留作实验教学的内容。数组教师通过PPT做概要介绍，让学生知晓ES标准给数组设计了比较丰富的方法，要学会到MDG官网查询这些方法的用法。教材中所列举的数组方法的用法留作实验教学的内容。对象教师通过PPT对该部分内容做简要介绍。类教师通过PPT对该部分内容做简要介绍。此部分内容在后续uni-app开发中使用并不多。模块这部分是重点内容。教师通过PPT并结合操作演示的方式介绍命令导出和导入、默认导出和导入的用法，区分两者的不同点。实验教学过程ES6基础另附实验指导书。课后任务完成第2章的课后习题第1大题和第2大题。第3章Node.js本章学时：理论2学时，实验2学时教学目标了解Node.js平台的用途。掌握nmp第三方包的下载和安装。理解安装命令中-g、-S和-D参数的含义。掌握number-precision、qrcode、chalk和progress的用法。掌握Express项目的构建方法。理解跨域访问。能够基于Express框架处理文件上传。教学内容、重点与难点教学内容npm包括Node项目的创建和运行方法、npm第三方包的安装、number-precision、qrcode、chalk和progress的基本用法。Nodeweb开发包括Express项目的创建和运行、模拟生成数据、跨越访问和处理文件上传。以上内容参见PPT。其中有关创建Node项目、npm安装第三方包的方法参见附录2，有关Express项目的创建和运行方法参见附录3。重点npm第三方包的安装。基于Express框架生成模拟数据难点跨域访问教学方式课堂结合PPT讲解核心知识点，并配合适当的操作演示。教学过程设计理论教学过程旧知复习对第2章的内容做概要性的回顾。可以通过检查第2章习题的第1大题和第2答题学生来了解学生的整体学习状况，同时解决学生还存在的疑问。新知讲解npm通过操作演示Node项目的创建和运行。对安装命令参数-g、-D和-S的含义要做重点讲解。选择number-precision、qrcode、chalk和progress四个包的其中一到两个做介绍。其余的留作实验教学内容。NodeWeb开发通过操作演示Express项目的创建和运行。进而展示如何通过Express模拟生产服务端数据。对跨域访问做重点讲解。关于Express处理文件上传的案例此次可以先省略不讲，而留待第5章讲解uni-app的uni.uploadFile()时一并介绍。实验教学过程Node.js另附实验指导书。课后任务 （1）针对本章习题的第1大题的第2个编程题搜集有关Node平台上数据库访问的资料，为实验课做准备。第4章Vue基础本章学时：理论4学时，实验4学时教学目标掌握Vue项目的创建和运行方法。理解Vue项目目录结构各部分的含义。掌握插值表达式的用法。掌握常用指令v-on、v-show、v-if、v-for和v-bind的用法。掌握样式绑定的用法。理解计算属性的含义，掌握其用法。掌握组件的创建和使用。理解props的含义。掌握父子组件之间传递数据的方法。理解生命周期函数的含义。教学内容、重点与难点教学内容Vue语法包括uni-app项目目录结构、Vue的页面结构、插值表达式、v-on、v-show、v-if、v-for和v-bind等指令、样式绑定和计算属性。封装组件包括创建组件、组件的注册和使用、父组件通过props向子组件传递数据、子组件通过$emit触发事件向父组件传递数据。（3）生命周期函数包括应用生命周期函数、页面生命周期函数和组件生命周期函数。以上内容参见PPT。其中有关uni-app应用程序的创建和运行方法参见附录1。建议：理论4个学时可以分配2个给Vue语法到指令部分，2个给Vue语法的样式绑定和计算属性，组件及生命周期函数。实验4个学时则相应地分配。重点Vue的页面结构。v-on、v-for和v-bind指令。样式绑定。组件间通信难点v-forprops和$emit教学方式课堂结合PPT讲解核心知识点，并配合适当的操作演示。教学过程设计理论教学过程旧知复习对第3章的内容做概要性的回顾。讲解第3章的习题。新知讲解Vue语法通过操作演示uni-app项目的创建。通过PPT介绍所创建的uni-app项目目录结构各部分的含义，着重指出pages目录和static目录各自存放的内容，main.js和pages.json两个文件的作用。通过操作演示编写一个Vue页面，重点解释其中script标签里面所包含的内容：data()、methods等。这部分内容是入门uni-app应用开发的钥匙，要对学生强调其重要性。5个常用指令，可以以v-on和v-for做重点讲解，通过操作演示的方式讲解其用法。其余留作实验教学内容。样式绑定的语法写法上比较多，但并不难理解。结合PPT做讲解。封装组件通过操作演示组件的创建、组件的注册和使用。重点介绍父子组件的数据通信方法。通过操作演示在子组件中定义props供父组件传递数据，在子组件中使用$emit()触发事件，父组件通过监听该事件而获取数据。生命周期函数uni-app生命周期函数分为三类，但最常用的是页面生命周期函数。本章仅通过PPT做简要介绍，让学生留有印象，在后续课程中还会反复提及，逐步让学生理解。实验教学过程Vue语法和封装组件另附实验指导书。课后任务 （1）完成第4章习题第1大题。第5章uni-app基础本章学时：理论4学时，实验4学时教学目标理解uni-app的Flex布局和rpx的含义。掌握view、scroll-view、swiper、form、button、image组件的用法。能通过uni-app官网文档查询组件的详细资料。掌握路由与页面跳转API的用法。理解网络请求的回调函数的含义。理解Promise语法。掌握数据缓存API的用法。掌握文件上传API的用法。掌握uni-ui表单组件的用法，掌握验证规则的配置方法。理解easycom组件规范。教学内容、重点与难点教学内容uni-app应用程序概述包括uni-app项目目录结构、Vue的页面结构、插值表达式、v-on、v-show、v-if、v-for和v-bind等指令、样式绑定和计算属性。内置组件包括创建组件、组件的注册和使用、父组件通过props向子组件传递数据、子组件通过$emit触发事件向父组件传递数据。（3）扩展API包括应用生命周期函数、页面生命周期函数和组件生命周期函数。（4）easycom组件规范以上内容参见PPT。其中有关uni-app应用程序的创建和运行方法参见附录1。建议：理论4个学时可以分配2个给flex布局，rpx和内置组件，2个给扩展API、扩展组件及easycom组件规范。实验4个学时则相应地分配。重点Flex布局的主轴与交叉轴。路由和页面跳转API。网络请求API。文件上传API。uni-ui表单组件。难点基于Promise语法处理网络请求的返回结果。配置uni-ui表单组件的验证规则。教学方式课堂结合PPT讲解核心知识点，并配合适当的操作演示。教学过程设计理论教学过程旧知复习对第4章的内容做概要性的回顾，指出重点在于理解组成Vue页面的三个标签所编写的内容：template写页面的结构，style写页面的样式。而script写页面的脚本，其中data()定义页面所用到的变量，而methods属性里定义页面所用到的函数。检查第4章习题的第1大题的完成情况。新知讲解uni-app应用程序概述通过PPT介绍uni-app页面常用的flex布局方式，重点讲清楚主轴和交叉轴的概念，以及相应的对齐方式。通过示例5-1来展示flex布局的用法，同时介绍rpx在屏幕适配时的作用。对于内置组件可以选择其中一至两个介绍（比如scroll-view组件和form组件），通过操作演示的方式讲解其用法。其余留作实验教学内容。uni-app所提供的内置组件，扩展API和扩展组件非常丰富，在课堂上引导学生要学会结合官网学习内置组件的用法。扩展API将路由跳转时通过url传递参数的方法、通过回调函数和Promise处理网络请求的返回结构作为重点内容讲解。其余留作实验教学内容。扩展组件通过操作演示uni-ui组件如何导入到uni-app项目中。重点讲解uni-uiforms组件验证规则的配置方法。示例5-16有一定的难度，供学有余力的学生学习。easycom组件规范通过PPT做简要介绍。实验教学过程uni-app内置组件、扩展API和扩展组件另附实验指导书。课后任务完成第5章习题第1，2，3大题。根据个人情况选学示例5-16。第6章uni-app高级技术本章学时：理论4学时，实验4学时。本章可以作为选学内容供学有余力的学生自学。教学目标掌握uni.getLocation()和map组件的用法。掌握使用第三方位置服务API的方法。掌握uni-app程序编译为微信小程序的方法。掌握uni.chooseImage()的用法。掌握使用第三方人工智能API服务的方法。掌握video组件的用法。能够通过封装组件解决问题。掌握uniCloud云空间的申请方法。能够在uni-app应用程序中使用云存储。教学内容、重点与难点教学内容高级API包括申请微信小程序开发账号，uni.getLocation()，map组件，uni-app程序运行为微信小程序，使用第三方位置服务API(示例6-1所使用的是腾讯位置服务)，申请第三方人工智能服务，在uni-app项目中使用第三方插件，条件编译。高级组件包括video组件，自行封装组件在uni-app程序中的应用。（3）uniCloud云存储包括申请云空间，uni-file-picker组件的用法。以上内容参见PPT。其中有关uni-app程序运行为微信小程序的方法参见附录4，uniCloud云空间的申请方法参见附录5。建议：理论4个学时可以分配2个给高级API，2个给高级组件和uniCloud云存储。实验4个学时则相应地分配。重点map组件。uni.chooseImage()API。video组件。uniCloud云空间。难点集成第三方位置服务API。使用第三方插件。教学方式课堂结合PPT讲解核心知识点，并配合适当的操作演示。教学过程设计理论教学过程旧知复习对第5章的内容做概要性的回顾。通过提问检查学生对第5章重点知识的理解，比如flex的主轴的对齐使用哪个属性，交叉轴的对齐使用哪个属性。检查第5章习题的第1，2，3大题的完成情况。新知讲解高级API通过PPT介绍uni.getLocation()的用法、map组件的重要属性、腾讯位置服务API。通过操作演示图像识别应用程序。高级组件通过PPT重点介绍两个组件video-list和video-play是如何封装的。uniCloud云存储通过PPT介绍uni-file-picker组件的用法，autoUpload取值为false时如何上传文件。实验教学过程高级API，高级组件和uniCloud云存储另附实验指导书。课后任务根据第6章示例6-1申请微信开发者账号，示例6-2申请百度智能云账号及图像识别应用和附录5申请uniCloud云空间。第7章移动应用开发过程本章学时：理论2学时，实验2学时教学目标理解软件开发过程。理解前后端分离架构下后端API接口规范。理解前端开发的开发顺序。掌握基于界面原型和后端API接口开发uni-app页面的方法。教学内容、重点与难点教学内容开发过程概述包括软件开发过程、PRD文档、后端API接口规范、前端开发顺序。前端开发示例包括后端程序的搭建、博客首页的结构、样式和显示博文列表的功能。以上内容参见PPT。其中前端开发示例所用到的后端程序的搭建方法参见附录6。重点前端开发的顺序。难点后端API接口规范。教学方式课堂结合PPT讲解核心知识点，并配合适当的操作演示。教学过程设计理论教学过程旧知复习对第6章的内容做概要性的回顾。新知讲解开发过程概述通过PPT介绍软件开发过程、PRD文档、后端API接口规范、前端开发顺序。前端开发示例通过操作演示博客首页从静态到动态的开发过程。这个作为重点内容。其中要引导学生学会查看后端API接口的各项信息：比如访问URL、访问方法、请求参数和返回值数据。实验教学过程前端开发示例另附实验指导书。课后任务根据附录6搭建后端程序。第8章实战本章学时：理论4学时，实验8学时教学目标能根据需求描述设计界面原型。能根据需求描述和界面原型设计数据库。能够根据界面原型开发静态页面，根据后端API接口开发页面的功能。理解“工程”思维，能够从软件工程的角度来开发系统的功能。教学内容、重点与难点教学内容需求描述包括案例的需求描述和功能结构图。原型设计包括案例所涉及到的7个页面的原型和相关功能。（3）数据库表设计包括案例所涉及到的4张表。（4）项目初始化包括创建目录、拷贝资源、导入uni-ui组件、封装公共函数、系统的tabBar结构等。（5）功能实现包括个人信息、登录、注册、主页、博客文章详情、我发表的博客和我收藏的博客等功能。以上内容参见PPT。其中案例所用到的后端程序的搭建方法参见附录6。建议：理论4个学时讲解案例的需求、原型设计、数据库表和项目初始化，选取一两个功能做讲解。实验8个学时则讲解案例其余功能的实现。重点设计界面原型。难点根据后端API接口编写页面的动态功能。教学方式课堂结合PPT讲解核心知识点，并配合适当的操作演示。教学过程设计理论教学过程旧知复习新知讲解需求描述通过PPT做简要介绍。原型设计原型设计工具设计原型界面数据库表设计(1) 数据库设计范式(2) 数据库E-R图(3) 数据库逻辑设计项目初始化这部分内容比较基础，以简介加操作演示的方式讲解。功能实现实验教学过程案例这个案例的功能比较多，可以按以下过程指导学生完成功能的开发。学会通过swagger查看后端的API接口。个人信息(1) 编写显示头像和个人信息的功能。(2) 编写查看“我的博文”功能。(3) 编写退出登录功能。这个页面的要点在于引入之前所编写工具函数，对用户的登录状态做判断，然后再展示用户信息。这个知识点以代码演示的方式讲解，而后学生根据实验指导材料动手操作，在此过程教师回答学生提出的问题，解决所遇到的bug。开发首页完成首页显示博文列表的功能，并实现下