《微信小程序开发》第7章教案
《微信小程序云开发》教学大纲+教学进度表+教案
《微信小程序云开发》教学大纲+教学进度表+教案《微信小程序云开发》课程教学大纲一、课程的性质和教学目的课程性质：小程序开发已经成为一类具有独特特点的应用开发，云开发也具有自己的特点。
微信小程序的发展很快，应用领域很多。
但是，在云开发出现之前，开发时面临着在数据库、存储实现方面的挑战。
微信小程序通过云开发自身就可以完成了前端、后端、数据库全技术栈的一揽子方案。
这对开发者来说，意味着开发工具能力更强，而学习成本更低。
于是，开设微信小程序（含组件、API和云开发）相关课程的可行性和必要性就进一步增加了。
《微信小程序云开发》是软件工程专业、计算机科学与技术等相关专业的一门选修课程。
教学目的：通过本课程的学习，要求学生达到下列目标。
1. 理解小程序开发的特点。
2. 理解云开发的特点。
3. 掌握微信小程序云开发。
4. 培养学生应用微信小程序解决和处理实际问题的思维方法与基本能力。
二、课程教学内容第1章微信小程序开发入门1.1微信小程序简介1.2微信开发者工具的使用1.3不使用云服务的小程序项目构成1.4 WXML、WXSS、JavaScript和WXS1.5 微信小程序的开发步骤和设计指南1.6 微信小程序的基本原理第2章微信小程序云开发简介2.1 微信小程序云开发的发展2.2 微信小程序云开发的特点与优势2.3 云开发解决方案提供的主要服务2.4 微信小程序云开发的一般步骤第3章云开发控制台的应用3.1通过云开发控制台进行运营分析3.2 通过云开发控制台管理数据库3.3 通过云开发控制台进行存储管理3.4 通过云开发控制台进行云函数管理3.5 云开发控制台的设置第4章不使用云服务的小程序开发示例4.1基于微信小程序组件的开发示例4.2基于微信小程序API的开发示例4.3 基于自定义组件的微信小程序开发示例第5章云开发中小程序端数据库开发5.1基础概念5.2 在小程序端向集合中插入数据5.3 在小程序端查询数据5.4 在小程序端使用查询指令5.5 在小程序端更新数据和使用更新指令5.6 在小程序端删除数据5.7 在小程序端对集合的其他操作方法5.8 在小程序端正则表达式的用法5.9 在小程序端处理地理信息db.Geo5.10 在小程序端聚合的用法第6章云开发中小程序端存储开发6.1 基础知识6.2 在小程序端上传文件6.3 在小程序端下载文件6.4 在小程序端删除文件6.5 在小程序端换取临时链接6.6 在小程序端使用组件和API来访问云端文件第7章云开发中云函数开发7.1 相关说明7.2 Node.js相关知识7.3 云函数myfirstfun的实现与本地调试7.4 云函数myfirstfun上传部署到云端和小程序端调用7.5 同步、下载云函数subMath并在小程序端调用7.6 云函数中异步操作7.7 云函数调用其他云函数7.8 云函数高级日志的使用第8章云开发中服务端存储开发8.1 在服务端上传文件8.2 在服务端下载文件8.3 在服务端删除文件8.4 在服务端换取临时链接8.5 服务端函数调用云函数第9章云开发中服务端数据库开发9.1相关说明9.2 针对collection的服务端API说明和应用开发9.3 针对doc的服务端API说明和应用开发9.4 服务端正则表达式的应用开发9.5 服务端API中serverDate的说明和应用开发9.6 服务端Geo对象的应用开发9.7 针对command的服务端API说明和应用开发9.8 服务端createCollection方法的应用开发9.9 针对集合的服务端API的应用开发第10章 Spring Boot访问云开发API10.1 调用云函数的API10.2 调用对数据库进行增、删、改、查操作的API 10.3 调用对数据库进行迁移相关操作的API10.4 调用对存储进行相关操作的API10.5 调用获取Token的API第11章 Node.js访问云开发API11.1 调用云函数的API11.2 调用对数据库进行增、删、改、查操作的API 11.3 调用对数据库进行迁移相关操作的API11.4 调用对存储进行相关操作的API11.5 调用获取Token的API第12章小程序与Spring Boot整合开发及云开发对比12.1 Spring Boot作为后端开发工具12.2 微信小程序前端开发12.3 实现同样效果的云开发实现第13章案例三、课程教学的基本要求1．基本知识了解微信小程序云开发管理、开发基础知识。
(7)《微信小程序开发》---专业课程内容体系模板 v3.0
微信小程序开发课程内容体系课程代码：A13C11143 课程名称：微信小程序开发所属教学团队：信息通信技术团队一、设计思路遵循“学历证书与职业资格证书嵌入式教学”的设计要求，采用“学生主体，教师主导”双主教学模式，强调学生是学习的主人，教师是指导者，引领者。
在教学过程中，巧妙设计，让学生面对一个个的任务，通过课堂讨论、相互合作、实际操作、竞赛激励等方式，自我探索，自主学习，使学生在完成任务的过程中不知不觉实现知识的传递、迁移和融合，发展能力，训练思维。
选取项目的基本依据是该门课程涉及的工作领域和工作任务范围，但在具体设计过程中还以独立小程序web开发项目为载体，使工作任务具体化，并依据完成工作任务的需要、职业院校学习特点和职业能力形成的规律，遵循“学历证书与职业资格证书嵌入式教学”的设计要求确定课程的知识、技能等内容，产生了具体的项目模块。
在设计课程的时候，注重体现以下几个思想：1、改变学生的学习方式。
学生变被动学习为主动愉快的学习，并且通过多种学习方式（如自主学习、协作学习、探索学习、利用网络学习等），获取信息，掌握操作。
2、情景与任务驱动的融合。
在每一个任务抛出的时候，都创设了适当的情景，以此让学生在不知不觉在情景中积极主动地接受任务。
3、在体验感受中学习。
在课堂教学中很“放”地让学生探究学习，在探究中，学生肯定会有许多失败。
正是在失败中，找到成功，让学生体验成功的喜悦。
二、体系结构（一）本课程的培养目标1）知识目标1、理解小程序开发工具的操作流程、特性及使用场景；2、掌握json的基本配置方法；3、掌握wxml文本结构和基础语法；4、掌握wxss页面的文字样式、视图容器、各类组件的属性编辑；5、了解开发工具各文件数据绑定方法；6、了解微信小程序API数据接口操作；7、掌握微信小程序基础功能实现；8、具备小程序开发程序员能编写基础小程序、各功能代码的植入与纠错的基本业务素质2）能力目标1、培养学生“爱岗、敬业、细致、求精”的职业道德与情感；2、培养学生良好的动手实践习惯，尤其注重挖掘学生的潜质；3、注重培养学生与社会接轨；4、培养学生严谨的行事风格；5、培养学生具有踏实工作作风，良好的观察和思考能力，探究精神和实际问题解决能力。
《微信小程序零基础入门》
掌握小程序表单组件的用法；
掌握小程序导航组件的用法；
掌握小程序媒体组件的用法；
掌握小程序地图组件的用法；
掌握小程序画布组件的用法。
4
4
上机实验：
《微信小程序开发零基础入门实战》
第4章：小程序组件
猜数字小游戏
应用篇
（5-11章）
第5章小程序网络API
了解小程序/服务器架构；
了解Flex布局的基本概念；
掌握Flex布局中的容器属性和项目属性。
4
4
上机实验：
练习WXML的数据绑定、列表/列表/条件渲染、模板、事件和引用；
《微信小程序开发零基础入门实战》
第3章：小程序框架
1.Flex布局练习——列表
2.Flex布局练习——九宫格
第4章小程序组件
理解什么是小程序组件；
掌握小程序视图容器组件的用法；
掌握背景音频管理和音频组件控制的用法；
掌握视频的选择、保存和组件控制的用法；
掌握相机管理器的用法。
2
2
上机实验：
《微信小程序开发零基础入门实战》
第6章：小程序媒体API
口述校史视频小程序
第7章小程序文件API
掌握保存临时文件的方法；
掌握获取文件信息的方法；
掌握获取本地文件列表的方法；
掌握获取本地文件信息的方法；
掌握服务器域名配置和临时服务器部署；
掌握wx.request接口的用法；
掌握wx.uploadFile和wx.downFile接口的用法。
2
2
上机实验：
《微信小程序开发零基础入门实战》
第5章：小程序网络API
实况天气预报小程序
微信小程序实用教程教学大纲
教学大纲1.教学目的本课程可作为计算机科学与技术、软件工程相关本科专业的选修课，也可作为其它本科专业的选修课，或者其它专业低年级研究生的选修课。
亦可供对小程序感兴趣的读者自学使用。
本课程的教学目标是使学生了解小程序设计的总体原则和思路，掌握具体的实践方法，具备小程序开发初步能力，为学生今后从事相关领域的项目开发工作奠定坚实的基础。
具体来讲，本课程涉及的内容包括注册，使用开发者工具进行开发、调试、预览、发布，熟悉小程序架构的层次结构，应用小程序常用组件进行布局和样式设置，掌握小程序网络、媒体、界面等 API 的相关知识点，学习部分优秀的小程序案例。
2.教学要求总体上，本课程的教学应本着理论与实践相结合的原则，深入浅出，突出重点，在教师亲自演示讲解的同时，注意培养学生独立思考和动手能力。
在内容设计上，应以示例入手，逐步推进，详尽讲解教学任务的各个实现细节。
在实施方法上，应采取互动式教学方法，在教师演示教学任务的基础上，督促学生自行运行并分析实现代码。
在教学手段上，应结合板书、多媒体、网络资源等多种传授方法，提高学生兴趣。
在实验教学上，应促进学生对讲授知识的理解，开拓眼界，提升实践能力。
3.教学内容本课程内容共分为十六章，除去第十六章建议学生自学之外，教学内容共十五章。
结合教学经验和实际，给出参考学时如下：（一）准备工作（2学时，含1学时实践课）内容：小程序的特点和适用场景，注册小程序的步骤，小程序管理后台的基本操作，开发者工具的使用方法。
重点：小程序管理后台的基本操作，开发者工具的使用方法。
（二）初识小程序（2学时，含1学时实践课）内容：组成小程序的目录结构和文件，小程序配置文件和页面配置文件的使用方法，新建页面以及设置启动页面的方法，在真机上预览小程序的方法，发布小程序的流程，以及对小程序各阶段版本的管理。
《微信小程序实用教程》教学大纲重点：小程序的目录结构和文件，小程序配置文件和页面配置文件的使用方法，新建页面以及设置启动页面的方法。
微信小程序开发教学大纲
2
多媒体
计算机
6
用微信小程序组件构建UI界面
视图容器组件、基础内容组件、表单组件、导航组件、媒体组件
表单组件
2
多媒体
计算机
4
7
用微信小程序组件构建UI界面
视图容器组件、基础内容组件、表单组件、导航组件、媒体组件
表单组件
2
多媒体
计算机
8
用微信小程序组件构建UI界面
视图容器组件、基础内容组件、表单组件、导航组件、媒体组件
表单组件
2
多媒体
计算机
5
9
表单登录注册微信小程序
登录设计、手机号注册设计、企业用户注册设计
登录设计、手机号注册设计、企业用户注册设计
2
计算机
10
必备的微信小程序API
文件上传与下载、图片处理、文件操作、数据缓存交互反馈、登录、微信支付、分享API
各类微信小程序API的使用
2
多媒体
计算机
6
11
必备的微信小程序API
2
计算机
底部标签导航、海报轮播效果、火车票查询界面、火车票列表、个人中心界面、抢票界面设计
仿智行火车票12306微信小程序的制作
2
计算机
9
17
仿智行火车票12306微信小程序
底部标签导航、海报轮播效果、火车票查询界面、火车票列表、个人中心界面、抢票界面设计
仿智行火车票12306微信小程序的制作
2
计算机
18
仿智行火车票12306微信小程序
文件上传与下载、图片处理、文件操作、数据缓存交互反馈、登录、微信支付、分享API
各类微信小程序API的使用
2
微信小程序开发实战(第2版)-教学大纲
《微信小程序开发实战（第2版）》课程教学大纲（课程英文名称）课程编号：学分：学分课时：86课时（其中：讲课55课时上机31课时）先修课程：计算机基础、计算机网络、HTML、CSS、JavaScript适用专业：信息技术及其计算机相关专业一、课程的性质与目标微信小程序是一门面向Web前端开发人员的课程，用于快速掌握微信小程序的开发。
本课程以案例驱动模式，循序渐进地讲解了微信小程序的相关知识，包括微信小程序项目的创建方法、页面组成、发布流程、常用组件、导航栏、标签栏、数据绑定、事件绑定、this 关键字、列表渲染、常用API、Vant Weapp组件库、WeUI组件库、uni-app框架等内容以及两个综合项目。
另外，本课程秉承立德树人理念，在案例中融入了许多思想政治内容。
通过本课程的学习，不仅可以让学生掌握微信小程序的核心知识，还可以培养学生的家国情怀、责任担当、敬业精神等。
二、课程设计思路和教学要求课程设计理念：通过学习本课程，使学生掌握如何将微信小程序与项目开发相结合。
按照学习的难易程度及先后顺序安排具体的内容，可以有效地将学生所学的内容串联起来，从而培养学生分析问题和解决问题的能力。
课程设计思路：本课程根据知识点难易的先后顺序进行讲解。
采用案例驱动式体例，主要包括“案例分析”“知识储备”“案例实现”等，在每个案例中，先对案例进行需求分析，然后在知识储备中讲解实现这个案例需要使用到的知识，并结合示例代码帮助学生理解，最后通过案例实现达到学以致用的目标。
学完微信小程序的基础知识后，通过两个项目实战将所学内容全部串联起来，培养学生分析和解决问题的能力。
操作系统：Windows 7或更高版本开发工具：微信开发者工具、HBuilder X三、课程的主要内容及基本要求第1章微信小程序入门学习单元微信小程序入门课时6课时学习目标1.了解微信小程序，能够说出微信小程序的概念、特点、发展前景和宿主环境2.掌握微信小程序开发账号的注册方法，能够独立完成微信小程序开发账号的注册3.掌握获取微信小程序AppID的方法，能够从微信小程序管理后台获取AppID4.掌握微信开发者工具的安装方法，能够独立完成微信开发者工具的安装5.掌握微信小程序项目的创建方法，能够使用微信开发者工具创建项目6.熟悉微信小程序的项目结构，能够解释每个文件的作用7.熟悉微信小程序的页面组成，能够解释WXML、WXSS、JS和JSON文件的作用8.熟悉微信小程序的通信模型，能够解释微信小程序中渲染层、逻辑层及第三方服务器的通信方式9.熟悉微信开发者工具的主界面，能够说出工具栏中常用快捷按钮的功能10.掌握微信小程序的项目设置，能够根据需要对微信小程序进行设置11.了解微信小程序开发常用快捷键，能够列举4类常用快捷键12.了解项目成员，能够说出项目成员的组织结构、分工和权限13.掌握添加项目成员和体验成员的方法，能够在微信小程序管理后台中添加项目成员和体验成员14.熟悉微信小程序的版本，能够说明微信小程序的4种版本15.熟悉微信小程序发布上线的流程，能够归纳出微信小程序发布上线的步骤学习内容知识点掌握程度重点难点什么是微信小程序了解微信小程序的特点了解微信小程序的发展前景了解微信小程序的宿主环境了解注册微信小程序开发账号掌握获取微信小程序AppID 掌握√安装微信开发者工具掌握创建微信小程序项目掌握√微信小程序的项目结构熟悉微信小程序的页面组成熟悉微信小程序的通信模型熟悉认识微信开发者工具熟悉微信小程序的项目设置掌握微信小程序开发常用快捷键了解项目成员的组织结构了解项目成员的分工了解项目成员和体验成员的管理了解项目成员的权限了解添加项目成员和体验成员掌握微信小程序的版本熟悉微信小程序的上线流程熟悉第2章微信小程序页面制作学习单元微信小程序页面制作课时10课时学习目标1.了解WXML的概念，能够说出WXML的特点、WXML与HTML的区别2.了解WXSS的概念，能够说出WXSS的特点、WXSS与CSS的区别3.了解组件的概念，能够说出组件的特点及常用的组件4.掌握页面路径的配置方法，能够运用该方法进行页面管理5.掌握view组件的使用方法，能够灵活运用view组件实现页面的布局效果6.掌握image组件的使用方法，能够灵活运用image组件完成图片插入操作7.掌握rpx单位的使用方法，能够灵活运用rpx单位解决屏幕适配的问题8.掌握页面样式的导入方法，能够灵活运用该方法导入公共样式9.掌握swiper和swiper-item组件的使用方法，能够灵活运用swiper和swiper-item组件完成轮播图的制作10.掌握text组件的使用方法，能够灵活运用text组件定义行内文本11.掌握Flex布局的使用方法，能够使用Flex布局的相关属性完成页面布局12.掌握导航栏的配置方法，能够完成导航栏标题颜色、背景颜色等页面效果的设置13.掌握标签栏的配置方法，能够完成页面标签栏的配置14.掌握vw、vh单位的使用方法，能够灵活运用vw、vh单位设置宽度和高度15.掌握video组件的使用方法，能够灵活运用video组件实现页面中视频的处理16.掌握表单组件的使用方法，能够灵活运用表单组件完成表单页面的制作学习内容知识点掌握程度重点难点WXML简介了解WXSS简介了解常用组件了解页面路径配置掌握√view组件掌握√image组件掌握√√rpx单位掌握样式导入掌握【案例2-1】个人信息-准备工作掌握【案例2-1】个人信息-实现“个人信息”微掌握√信小程序的页面结构【案例2-1】个人信息-实现“个人信息”微掌握信小程序的页面样式swiper和swiper-item组件掌握√text组件掌握Flex布局掌握【案例2-2】本地生活-准备工作掌握【案例2-2】本地生活-实现“本地生活”微掌握信小程序的页面结构【案例2-2】本地生活-实现“本地生活”微掌握信小程序的页面样式导航栏配置掌握标签栏配置掌握vm、vh单位掌握video组件掌握表单组件掌握√【案例2-3】婚礼邀请函-准备工作掌握【案例2-3】婚礼邀请函-项目初始化掌握【案例2-3】婚礼邀请函-实现“邀请函”页掌握面的结构【案例2-3】婚礼邀请函-实现“邀请函”页掌握面的样式【案例2-3】婚礼邀请函-实现“照片”页面掌握的结构【案例2-3】婚礼邀请函-实现“照片”页面掌握的样式【案例2-3】婚礼邀请函-实现“美好时光”掌握页面的结构【案例2-3】婚礼邀请函-实现“美好时光”掌握页面的样式【案例2-3】婚礼邀请函-实现“宾客信息”掌握页面的结构【案例2-3】婚礼邀请函-实现“宾客信息”掌握页面的样式第3章微信小程序页面交互学习单元微信小程序页面交互课时10课时学习目标1.熟悉Page()函数，能够归纳Page()函数及其各个参数的作用2.掌握数据绑定，能够运用数据绑定实现页面中数据的显示与修改3.掌握事件绑定，能够在组件触发时执行对应的事件处理函数4.熟悉事件对象，能够总结事件对象的属性及其作用5.掌握this关键字的使用，能够运用this关键字访问当前页面中的数据或者函数6.掌握setData()方法的使用，能够完成数据的设置与更改7.掌握条件渲染，能够运用条件渲染根据不同的判断结果显示不同的组件8.掌握<block>标签，能够运用<block>标签同时显示或隐藏多个组件9.熟悉hidden属性，能够区分其与wx:if控制属性的区别10.掌握data-*自定义属性，能够完成data-*自定义数据的设置与获取11.掌握模块的使用，能够完成模块的创建和引入12.掌握列表渲染，能够运用列表渲染将数组中的数据渲染到页面中13.掌握网络请求的实现，能够通过网络请求与服务器进行交互14.掌握提示框的实现，能够在页面中显示消息提示框15.掌握WXS的使用，能够运用WXS处理页面中的数据16.掌握上拉触底的实现，能够运用上拉触底实现数据的动态加载17.掌握下拉刷新的实现，能够运用下拉刷新实现数据的重新加载18.掌握双向数据绑定，能够运用双向绑定实现数据的动态更改学习内容知识点掌握程度重点难点Page()函数熟悉√数据绑定掌握事件绑定掌握√事件对象熟悉this关键字掌握setData()方法掌握√条件渲染掌握√<block>标签掌握hidden属性熟悉【案例3-1】比较数字大小-准备工作掌握【案例3-1】比较数字大小-实现“比较数字大小”微信小程序的页面结构掌握【案例3-1】比较数字大小-获取并保存用户输入的数字掌握【案例3-1】比较数字大小-判断数字大小并显示结果掌握data-*自定义属性掌握模块掌握【案例3-2】计算器-准备工作掌握【案例3-2】计算器-实现“计算器”微信小程序的页面结构掌握【案例3-2】计算器-实现“计算器”微信小程序的页面逻辑掌握【案例3-2】计算器-特殊情况处理掌握√列表渲染掌握√网络请求掌握√提示框掌握WXS 掌握√上拉触底掌握下拉刷新掌握【案例3-3】美食列表-准备工作掌握【案例3-3】美食列表-获取初始数据掌握【案例3-3】美食列表-实现页面渲染掌握【案例3-3】美食列表-处理电话格式掌握【案例3-3】美食列表-实现上拉触底掌握【案例3-3】美食列表-实现下拉刷新掌握双向数据绑定掌握√【案例3-4】调查问卷-准备工作掌握【案例3-4】调查问卷-获取初始数据掌握【案例3-4】调查问卷-实现页面渲染掌握第4章微信小程序常用API（上）学习单元微信小程序常用API（上）课时9课时学习目标1.掌握scroll-view组件，能够运用scroll-view组件完成视图区域的横向滚动或者纵向滚动2.掌握slider组件，能够运用slider组件完成滑动选择器的制作3.掌握<include>标签，能够运用<include>标签引用其他文件中的代码4.掌握背景音频API，能够运用背景音频API实现音频后台播放、音频暂停等功能5.掌握录音API，能够运用录音API实现录音功能6.掌握音频API，能够运用音频API实现音频播放、暂停等功能7.掌握选择媒体API，能够运用wx.chooseMedia()方法选择图片或视频8.掌握图片预览API，能够运用wx.previewImage()方法预览图片9.掌握文件上传API，能够运用wx.uploadFile()方法实现将本地资源上传到服务器中10.掌握文件下载API，能够运用wx.downloadFile()方法实现资源文件的下载11.掌握canvas组件，能够灵活运用canvas组件创建画布12.掌握画布API，能够运用画布API完成图形的绘制学习内容知识点掌握程度重点难点scroll-view组件掌握√slider组件掌握√<include>标签掌握背景音频API 掌握√【案例4-1】音乐播放器-准备工作掌握【案例4-1】音乐播放器-实现“音乐播放器”掌握微信小程序的页面结构【案例4-1】音乐播放器-实现标签页切换掌握【案例4-1】音乐播放器-实现“音乐推荐”标签页掌握【案例4-1】音乐播放器-实现“播放器”标签页掌握【案例4-1】音乐播放器-实现播放器区域掌握【案例4-1】音乐播放器-实现播放进度的控制掌握【案例4-1】音乐播放器-实现“播放列表”标签页掌握录音API 掌握音频API 掌握【案例4-2】录音机-准备工作掌握【案例4-2】录音机-初始化录音功能掌握【案例4-2】录音机-实现“录音机”微信小程序的页面结构掌握【案例4-2】录音机-实现录音功能掌握【案例4-2】录音机-实现播放录音功能掌握√选择媒体API 掌握图片预览API 掌握文件上传API 掌握√文件下载API 掌握√【案例4-3】头像上传下载-准备工作掌握【案例4-3】头像上传下载-实现“头像上传下载”微信小程序的页面结构掌握【案例4-3】头像上传下载-实现“头像上传下载”微信小程序的页面逻辑掌握canvas组件掌握画布API 掌握√【案例4-4】模拟时钟-准备工作掌握【案例4-4】模拟时钟-初始化画布掌握【案例4-4】模拟时钟-绘制表盘掌握【案例4-4】模拟时钟-绘制指针掌握【案例4-4】模拟时钟-实现时钟走动效果掌握√第5章微信小程序常用API（下）学习单元微信小程序常用API（下）课时13课时学习目标1.掌握动画API，能够完成动画的制作2.熟悉登录流程时序，能够归纳微信小程序的登录流程3.掌握登录API，能够运用wx.login()方法实现用户登录4.掌握数据缓存API，能够对数据进行存储、获取和移除等操作5.掌握头像昵称填写功能，能够实现头像选择和昵称填写6.掌握腾讯地图SDK，能够实现腾讯地图SDK的接入和使用7.掌握map组件，能够灵活运用map组件实现地图效果8.掌握地图API，能够实现地图中地理位置的获取等功能9.掌握位置API，能够实现获取当前地理位置的功能10.掌握路由API，能够利用路由API实现页面跳转11.掌握WebSocket API，能够成功创建WebSocket连接12.掌握SocketTask，能够使用SocketTask管理WebSocket连接学习内容知识点掌握程度重点难点动画API 掌握√【案例5-1】罗盘动画-准备工作掌握【案例5-1】罗盘动画-实现“罗盘动画”微信小程序的页面结构掌握【案例5-1】罗盘动画-实现“罗盘动画”微信小程序的页面逻辑掌握登录流程时序熟悉登录API 掌握√数据缓存API 掌握√头像昵称填写掌握App()函数掌握√【案例5-2】用户登录-准备工作掌握【案例5-2】用户登录-实现用户登录掌握【案例5-2】用户登录-检查用户是否已经登录掌握【案例5-2】用户登录-获取用户的积分掌握【案例5-2】用户登录-获取用户头像和昵称掌握腾讯地图SDK 掌握map组件掌握地图API 掌握√位置API 掌握路由API 掌握√【案例5-3】查看附近美食餐厅-准备工作掌握【案例5-3】查看附近美食餐厅-获取初始数据掌握【案例5-3】查看附近美食餐厅-在页面中显示地图掌握【案例5-3】查看附近美食餐厅-实现跳转到优惠券页面掌握【案例5-3】查看附近美食餐厅-实现查找附近美食餐厅功能掌握WebSocket API 掌握√√SocketTask 掌握√√【案例5-4】在线聊天-准备工作掌握【案例5-4】在线聊天-实现WebSocket连接掌握【案例5-4】在线聊天-实现发送消息功能掌握【案例5-4】在线聊天-实现消息列表展示功能掌握第6章综合项目——“点餐”微信小程序学习单元综合项目——“点餐”微信小程序课时20课时学习目标1.掌握封装网络请求的方法，能够通过封装网络请求简化项目中网络请求的代码2.掌握用户登录的开发，能够独立实现用户登录3.掌握商家首页的开发，能够独立完成商家首页的编写4.掌握菜单列表页的开发，能够独立完成菜单列表页的编写5.掌握购物车的开发，能够独立实现购物车6.掌握订单确认页的开发，能够独立完成订单确认页的编写7.掌握订单详情页的开发，能够独立完成订单详情页的编写8.掌握订单列表页的开发，能够独立完成订单列表页的编写9.掌握消费记录页的开发，能够独立完成消费记录页的编写学习内容知识点掌握程度重点难点【任务6-1】项目开发准备-开发背景了解【任务6-1】项目开发准备-项目模块划分熟悉【任务6-1】项目开发准备-项目初始化掌握【任务6-2】封装网络请求-保存接口地址掌握【任务6-2】封装网络请求-封装网络请求函数掌握√【任务6-2】封装网络请求-请求失败时的处理掌握【任务6-2】封装网络请求-请求成功时的处理掌握【任务6-3】用户登录-判断登录状态掌握√【任务6-3】用户登录-执行登录操作掌握√【任务6-3】用户登录-记住登录状态掌握【任务6-4】商家首页-加载商家首页数据掌握【任务6-4】商家首页-实现商家首页的轮播图区域掌握【任务6-4】商家首页-实现商家首页的中间区域掌握【任务6-4】商家首页-实现商家首页的底部区域掌握【任务6-5】菜单列表页-加载菜单列表页数据掌握【任务6-5】菜单列表页-实现折扣信息区域掌握【任务6-5】菜单列表页-实现菜单列表区域掌握【任务6-5】菜单列表页-实现点击左侧菜单项滚动右侧商品列表掌握√【任务6-5】菜单列表页-实现滚动右侧商品掌握√列表激活左侧菜单项【任务6-6】购物车-实现底部购物车区域掌握【任务6-6】购物车-实现添加商品到购物车掌握√【任务6-6】购物车-实现小球动画效果掌握√【任务6-6】购物车-实现满减优惠信息区域掌握【任务6-6】购物车-实现购物车界面区域掌握【任务6-6】购物车-实现增加和减少商品数掌握量【任务6-6】购物车-实现清空购物车掌握【任务6-7】订单确认页-跳转到订单确认页掌握【任务6-7】订单确认页-加载订单确认页数掌握据【任务6-7】订单确认页-实现页面结构和页掌握面样式【任务6-7】订单确认页-实现订单信息区域掌握【任务6-7】订单确认页-实现备注区域掌握【任务6-7】订单确认页-实现支付区域掌握【任务6-8】订单详情页-加载订单详情页数掌握据【任务6-8】订单详情页-实现取餐信息区域掌握【任务6-8】订单详情页-实现订单详情区域掌握【任务6-8】订单详情页-实现订单信息区域掌握【任务6-9】订单列表页-加载订单列表页数掌握据【任务6-9】订单列表页-实现订单列表页的掌握页面结构【任务6-9】订单列表页-实现订单列表页的掌握页面样式【任务6-9】订单列表页-实现下拉刷新掌握√【任务6-9】订单列表页-实现上拉触底掌握√【任务6-9】订单列表页-跳转到订单详情页掌握【任务6-10】消费记录页-加载消费记录页数掌握据【任务6-10】消费记录页-实现消费记录页的掌握页面结构【任务6-10】消费记录页-实现消费记录页的掌握页面样式【任务6-10】消费记录页-获取头像掌握第7章微信小程序开发进阶学习单元微信小程序开发进阶课时9课时学习目标1.掌握自定义组件的创建方法，能够根据实际需要创建自定义组件2.掌握自定义组件的使用方法，能够使用自定义组件3.掌握使用自定义组件渲染标签栏的方法，能够使用自定义组件渲染标签栏4.掌握Vant Weapp组件库的使用方法，能够使用Vant Weapp组件库快速搭建微信小程序的页面5.掌握WeUI组件库的使用方法，能够使用WeUI组件库快速搭建微信小程序的页面6.掌握navigator组件的使用方法，能够利用navigator组件实现页面跳转7.了解uni-app框架的概念，能够说出使用uni-app框架开发项目的优势8.掌握HBuilder X开发工具的设置，能够完成HBuilder X的基本设置和个性化设置9.掌握uni-app项目的创建方法，能够完成uni-app项目的创建10.熟悉uni-app项目的目录结构，能够解释各个文件和文件夹的作用11.掌握uni-app项目运行至微信小程序的方法，能够将uni-app项目运行至微信小程序12.掌握uni-app项目的全局配置文件，能够对导航栏、底部标签栏、页面的文件路径等进行配置学习内容知识点掌握程度重点难点创建自定义组件掌握√使用自定义组件掌握√使用自定义组件渲染标签栏掌握Vant Weapp组件库掌握【案例7-1】自定义标签栏-准备工作掌握【案例7-1】自定义标签栏-项目初始化掌握【案例7-1】自定义标签栏-定义标签栏数据掌握【案例7-1】自定义标签栏-实现页面布局掌握【案例7-1】自定义标签栏-实现页面逻辑掌握WeUI组件库掌握√navigator组件掌握√√【案例7-2】电影列表-准备工作掌握【案例7-2】电影列表-实现标签栏掌握【案例7-2】电影列表-实现“正在热映”标签页掌握【案例7-2】电影列表-实现“搜索”标签页掌握【案例7-2】电影列表-实现“分类”标签页掌握uni-app框架概述了解HBuilder X开发工具掌握创建uni-app项目掌握uni-app项目的目录结构熟悉将uni-app项目运行至微信小程序掌握√uni-app项目的全局配置文件掌握【案例7-3】待办事项-准备工作掌握【案例7-3】待办事项-实现添加待办事项的掌握功能【案例7-3】待办事项-实现列表区域掌握第8章uni-app项目—— “短视频”微信小程序学习单元uni-app项目—— “短视频”微信小程序课时9课时学习目标1.掌握公共头部的开发，能够独立完成公共头部代码的编写2.掌握导航栏的开发，能够独立完成导航栏代码的编写3.掌握轮播图的开发，能够独立完成轮播图代码的编写4.掌握视频列表的开发，能够独立完成视频列表代码的编写5.掌握视频详情页的开发，能够独立完成视频详情页的编写学习内容知识点掌握程度重点难点【任务8-1】项目开发准备-项目展示掌握【任务8-1】项目开发准备-项目初始化掌握√【任务8-2】公共头部区域-实现公共头部区域的页面结构掌握【任务8-2】公共头部区域-实现公共头部区域的页面样式掌握【任务8-2】公共头部区域-在页面中显示公共头部区域掌握【任务8-3】导航栏区域-加载导航栏数据掌握√【任务8-3】导航栏区域-实现导航栏区域的页面结构掌握【任务8-3】导航栏区域-实现导航栏区域的页面样式掌握【任务8-3】导航栏区域-实现导航栏的切换效果掌握【任务8-4】轮播图区域-加载轮播图数据掌握【任务8-4】轮播图区域-实现轮播图区域的页面结构掌握【任务8-4】轮播图区域-实现轮播图区域的页面样式掌握【任务8-5】视频列表区域-加载视频列表数据掌握【任务8-5】视频列表区域-实现视频列表区域的页面结构掌握【任务8-5】视频列表区域-实现视频列表区域的页面样式掌握【任务8-5】视频列表区域-实现跳转到视频详情页掌握√【任务8-6】视频详情页-实现整体页面结构掌握【任务8-6】视频详情页-实现视频详情区域掌握【任务8-6】视频详情页-实现推荐视频区域掌握【任务8-6】视频详情页-实现评论列表区域掌握四、课时分配五、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。
微信小程序开发 1-1 教案-微信小程序概述[4页]
第一章微信小程序入门任务1.1 微信小程序概述一、小程序简介现在，生活中随处都应用到微信小程序。
打开不同的微信小程序，如图1.1所示，点击右上角“…”可以进行转发、添加到我的小程序、取消等。
点击右上角“⊙”，则可以关闭微信小程序。
只要通过扫一扫或搜一搜，或者附近的小程序，你就可以看到5公里内所有的小程序。
同时，小程序完全不需要下载安装，也不需要卸载，更不会占用手机内存。
微信小程序也被简称为小程序，其英文名称是Mini Program。
它是一种存在于微信内部的轻量级应用程序。
微信研发团队在其官方网站上有一段关于微信小程序的介绍:“小程序是一种新的开放四、小程序的发展前景在未来的发展中，小程序将会更加方便、快捷，注册申请的渠道也更加快捷、方便，与此同时，还会进一步加强第三方平台的合作，如果能够开放第三方开发平台，那么它将为小程序的开发提供更大的后方支援。
并且随着小程序的日臻完善，小程序的开发者将能够获得更大的权限支持，由此可见，小程序在未来的发展空间中是相当巨大的，并且对于企业进行小程序制作的优势也将会进一步凸显出来。
小程序传统产业的代表，如图所示。
小程序可以使企业和用户更好地交流，也能够实现用户更好的转化，所以对企业来说小程序可以带来可观的利润和流量。
随着微信开放的功能的不断增多，那么一些小程序也会不断地完善自己，开放一些功能且不断得到匹配，这样也就提供了更多的接口能力，从而能够方便开发者进行深度地挖掘。
相信未来小程序也将具备更多的功能，那么企业所能实现的功能也会随着增加，这对于其未来发展有着至关重要的作用，同时也能推动微信的发展。
小程序互联网公司的代表，如图所示。
小程序将会与其他行业有更为友好的链接，小程序的发展是在微信的用户发展基础上而发展的，这样才能够用微信更好地结合，从而可以实现更多的功能。
因此，小程序在未来不仅方便企业与用户，也会方便企业与企业之间、用户与用户之间的交流。
《微信小程序开发实战》课程教学大纲
二、课程设计理念与思路
课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的升华与知识层面 的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。 以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发 展所需的能力和终身学习的能力，实现一站式教学理念。
wx.playVoice()
wx.pauseVoice()
wx.uploadFile()
wx.downloadFile() 录音和上传 文件的下载 【案例 8】在线聊天系统 WebSocket 的作用
√
√
√
√
√
√
√
√
√
√
√
√
√
√
√
学时
8
了解 √ √
√ √ √
√
掌握 √ √ √
√ √ √ √ √ √ √
《微信小程序开发实战》
课程教学大纲
（课程英文名称）
课程编号：
学 分：学分 学 时：67 学时 （其中：讲课学时 36 上机学时 31） 先修课程：计算机基础、计算机网络、HTML、CSS、JavaScript 适用专业：信息技术及其计算机相关专业 开课部门：计算机系
一、课程的性质与目标
《微信小程序开发实战》是专注于微信小程序开发的 Web 前端教材，涉及微信小程序 页面组件、应用接口 API、事件机制、登录、获取用户信息、Node.js 搭建服务器、第三方 框架的使用等。通过本课程的学习，学生能够理解微信小程序的实质，掌握微信小程序开发 的基本技能，快速高效的开发微信小程序。
微信小程序开发图解案例PPT教程
5
1．App.js小程序逻辑 App.js文件用来定义全局数据和 函数的使用，它可以指定微信小程序 的生命周期函数。生命周期函数可以 理解为微信小程序自己定义的函数， 如onLaunch（监听小程序初始化）、 onShow（监听小程序显示）、onHide （监听小程序隐藏）等，在不同阶段、 不同场景可以使用不同的生命周期函 数。此外，App.js中还可以定义一些全 局的函数和数据，其他页面引用App.js 文件后就可以直接使用全局函数和数 据，如图所示。
2.1.1
框架全局文件
第2章 微信小程序框架分析
6
2．App.json小程序公共设置 App.json文件可以对5个功能进 行设置：
01
OPTION OPTION
配置页面路径
02 配置窗口表现 03 配置标签导航 04
配置网络超时
OPTION
OPTION
OPTION
05 配置debug模式
第1章 认识微信小程序
18
2.光标相关快捷键
Ctrl+End：移动到文件结尾 Ctrl+Home：移动到文件开头 Ctrl+i：选中当前行
3.界面相关快捷键
Ctrl + \：隐藏侧边栏 Ctrl + m：打开或者隐藏模拟器
Shift+End：选择从光标到行尾
Shift+Home：选择从行首到光标
部的高度为200px。
微信小程序
开发图解案例教程
T h a n k
y o u ！
第2章
微信小程序框架分析
微信小程序开发图解案例教程（附精讲视频）
目录
contents
1. 微信小程序目录结构介绍
第7章 小程序API
33
方法为wx.getSystemInfo(Object object)，用于获取系统信息。
六、设备API
网络连接
第7章 小程序API
34
网络连接分为监听网络状态变化事件和获取网络类型两个方法。 1．监听网络状态变化事件 方法为wx.onNetworkStatusChange(function callback)，用来监听网络状态变化事件。 2．获取网络类型 方法为wx.getNetworkType(Object object)，用于获取网络类型。网络类型主要包括wifi、 2g、3g、4g、5g、unknown、none等。
五、位置API
位置 API
第7章 小程序API
27
获取位置 查看位置 地图组件控制
五、位置API
获取位置
第7章 小程序API
28
方法为wx.getLocation(Object object)，调用前需要用户授权erLocation获取当 前的地理位置、速度。当用户离开小程序后，此接口无法调用。工具中定位模拟使用IP定位， 可能会有一定误差，且工具目前仅支持GCJ-02（GCJ-02是由中国国家测绘局制订的地理信息 系统的坐标系统，G表示国家（Guojia），C表示测绘（Cehui），J表示局（Ju））坐标。使 用第三方服务进行逆地址解析时，请确认第三方服务默认的坐标系，正确进行坐标转换。
网络API 媒体API 文件API 数据API 位置API 设备API 界面API 开放API
第7章 小程序API
3
一、网络API
网络 API
第7章 小程序API
4
发起请求 上传与下载 WebSocket
一、网络API
发起请求
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第7章综合案例：仿糗事百科微信小程序教学过程7.1需求描述仿糗事百科微信小程序主要完成以下功能。
（1）实现顶部页签菜单左右滑动效果，如图所示。
顶部页签（2）实现顶部页签菜单切换效果，页签菜单选中时字体加粗，同时对应的内容也相应变化。
专享界面视频界面（3）实现专享界面糗事列表设计，包括发布人头像、发布人昵称、发布的段子等信息，以列表的形式展现出来。
（4）实现视频列表页设计，使视频可以进行播放与暂停。
（5）实现分享功能，可以将当前界面分享给好友。
分享页面7.2设计思路及相关知识点7.2.1设计思路（1）实现顶部页签滑动效果，需要借助于scroll-view可滚动视图区域组件，设置scroll-x="true"属性，允许顶部页签在水平方向上左右滑动；（2）页签菜单切换，内容也会随着进行切换，需要使用swiper滑块视图容器组件，根据current 当前页面索引值来决定显示哪个面板；（3）设计糗事列表，首先设计一条内容，然后复制这条内容的布局，在这个基础上进行修改；（4）设计视频列表，需要使用video视频组件，每个视频组件都有唯一的id；设计幻灯片轮播效果，准备好幻灯片需要轮播的图片；（5）分享功能，需要在Page中定义onShareAppMessage函数，设置该页面的分享信息。
7.2.2相关知识点（1）在界面布局的时候，会用到微信小程序的组件，包括view视图容器组件、image图片组件、swiper滑块视图容器组件、scroll-view可滚动视图区域组件、video视频组件等组件的使用；（2）界面样式设计中，需要使用wxss样式进行界面的美化和渲染；（3）页签菜单切换的时候，需要获得该页签所对应的id，绑定菜单切换事件；（4）设计页面分享时，需要使用onShareAppMessage这个API接口，来进行分享；（5）动态获取糗事列表信息，需要使用wx.request请求获得。
7.3准备工作（1）首先需要准备一个AppID，如果没有AppID也没有关系，只不过不能在手机上进行项目的预览，但是在开发工具上开发是没有任何问题的。
（2）在设计列表页时，需要用到一些图标，放置在images/icon文件夹下，如图所示。
图标7.4设计流程我们首先来设计仿糗事百科微信小程序顶部页签菜单左右滑动效果、页签菜单切换效果，切换时页签对应的内容也会随着切换；然后设计糗事列表、视频列表；最后设计分享功能和项目预览。
7.4.1顶部页签菜单滑动效果设计仿糗事百科微信小程序的顶部页签菜单可以左右滑动。
顶部页签菜单（1）新建一个qsbk项目，AppID为wxa7730e0596be9404，把准备好的图片放置在qsbk项目里。
（2）进入到app.json界面里，将窗口背景色设置为黄色（# FFBA1E），标题改为糗事百科，字体颜色设置为白色（white），具体代码如下所示。
{"pages":[ "pages/index/index","pages/logs/logs"],"window":{ "backgroundTextStyle":"light","navigationBarBackgroundColor": "#FFBA1E","navigationBarTitleText": " 糗事百科 ","navigationBarTextStyle":"white"}}（3）进入到pages/index/index目录下，清空index.wxml、index.js、index.wxss文件默认生成的内容。
（4）进入到pages/index/index.wxml文件里，设计顶部页签菜单，顶部页签菜单包括3方面内容：页签菜单、“审”字、+，具体代码如下所示。
<view class="bg"><view class="nav"><scroll-view class="scroll-view_H" scroll-x="true" ><view class="scroll-view_H"><view><view class="{{flag==0?'select':'normal'}}" id="0" bindtap="switchNav">专享</view></view><view><view class="{{flag==1?'select':'normal'}}" id="1" bindtap="switchNav">视频</view></view><view><view class="{{flag==2?'select':'normal'}}" id="2" bindtap="switchNav">糗闻</view></view><view><view class="{{flag==3?'select':'normal'}}" id="3" bindtap="switchNav">纯文</view></view><view><view class="{{flag==4?'select':'normal'}}" id="4" bindtap="switchNav">纯图</view></view><view><view class="{{flag==5?'select':'normal'}}" id="5" bindtap="switchNav">精华</view></view><view><view class="{{flag==6?'select':'normal'}}" id="6" bindtap="switchNav">趣闻</view></view> </view></scroll-view><view class="opr"> 审</view><view class="add">+</view></view>（5）进入到pages/index/index.wxss文件里，给顶部菜单内容添加样式，具体代码如下所示。
.bg{background-color: #FFBA1E; height:50px;color: #ffffff; display: flex;flex-direction: row; align-items:center;}.nav{width: 70%; height: 40px;}.opr{width: 20px; height: 20px;border-radius:50%; font-size:13px; line-height: 20px; text-align: c enter; color: #FFBA1E;background-color: #ffffff; font-weight:bold;margin-left: 10px;}.add{width: 20%; height: 50px;line-height: 50px; text-align:right; margin-right:10px; font-size: 50px;}.scroll-view_H{ margin-left: 10px;height: 40px; display: flex;flex-direction: row;}.normal{ width: 40px;height: 40px;line-height: 40px; padding-left:10px; padding-right: 10px;font-size: 14px;}.select{width: 40px; height: 40px;line-height: 40px; padding-left:20px; padding-right: 20px;font-size: 14px; font-weight: bold;}这样就可以实现顶部页签左右滑动效果，如图所示。
顶部菜单内容7.4.2顶部页签菜单切换效果设计顶部页签菜单可以进行左右切换，但是还没有实现页签菜单切换效果，单击不同的页签，页签需要呈现为选中状态，同时页签对应的内容也要随着进行切换。
（1）在页签里设计两种样式，一种是select样式，选中时字体加粗；另一种是normal样式，字体不加粗。
绑定单击事件switchNav。
（2）进入到pages/index/index.js文件里，定义两个变量：currentTab为当前页签的索引值，flag变量用来控制样式选择，如果flag等于页签对应的id，则呈现为选中状态。
使用select这个样式，具体代码如下所示。
Page({data:{currentTab:0, flag:0}})（3）添加页签菜单单击绑定事件switchNav，动态地给currentTab和flag变量赋值，具体代码如下所示。
Page({data:{currentTab:0,flag:0},switchNav:function(e){ console.log(e);var page = this; var id =e.target.id;if(this.data.currentTab == id){ returnfalse;}else{page.setData({currentTab:id});}page.setData({flag:id});}})这样单击不同页签，页签就会呈现为选中效果，如图所示。